我正在使用 Polymer 1.0 中的 iron-form 提交带有纸质输入和纸质按钮的登录表单。
我在单击按钮时调用 submit()，但没有任何反应。我什至尝试放入一个 native 按钮，看看我的 JS 是否有错误，但它仍然没有提交。
但是，它确实显示了“----- 是必需的”弹出窗口，但它没有用纸质按钮显示。
我正在使用 PHP 动态呈现 HTML，但我也尝试让它在普通 HTML 文件中工作，这给了我相同的结果。
我不使用 gulp 来运行网络服务器，我只是使用普通的 XAMPP 设置。
登录.php:
<?php
// configuration
require("/includes/config.php");
// if user reached page via GET (as by clicking a link or via redirect)
if ($_SERVER["REQUEST_METHOD"] == "GET")
{
// else render form
render("login-form.php", ["title" => "Log In"]);
}
// else if user reached page via POST (as by submitting a form via POST)
else if ($_SERVER["REQUEST_METHOD"] == "POST")
{
// query database for user
$rows = query("SELECT * FROM users WHERE username = ?", $_POST["username"]);
// if we found user, check password
if (count($rows) == 1)
{
// first (and only) row
$row = $rows[0];
// compare hash of user's input against hash that's in database
if (crypt($_POST["password"], $row["hash"]) == $row["hash"])
{
// remember that user's now logged in by storing user's ID in session
$_SESSION["id"] = $row["id"];
// redirect to portfolio
redirect("/");
}
}
// else apologize
apologize("Invalid username and/or password.");
}
?>
header.html:
<!DOCTYPE html>
<head>
<script src="/bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<!--<script src="/bower_components/webcomponentsjs/ShadowDOM.min.js"></script>-->
<link rel="import" href="elements.html">
<link rel="import" href="/styles/styles.html">
<?php if (isset($title)): ?>
<title>Test: <?= htmlspecialchars($title) ?></title>
<?php else: ?>
<title>Test</title>
<?php endif ?>
</head>
<body>
登录表单.php:
<div class="outer">
<div class="middle">
<div class="inner">
<paper-material elevation="5">
<paper-header-panel>
<paper-toolbar>
<div><b>Login</b></div>
</paper-toolbar>
<div class="content">
<form is="iron-form" id="form" method="post" action="index.php">
<paper-input name="username" label="Username" required></paper-input>
<paper-input name="password" label="Password" required></paper-input>
<paper-button raised onclick="clickHandler(event)" id="loginButton">Submit</paper-button>
</form>
<script>
function clickHandler(event) {
Polymer.dom(event).localTarget.parentElement.submit();
console.log("Submitted!");
}
</script>
</div>
</paper-header-panel>
</paper-material>
</div>
</div>
页脚.html:
</body>
</html>
元素.html:
<link rel="import" href="bower_components/font-roboto/roboto.html">
<link rel="import" href="bower_components/paper-header-panel/">
<link rel="import" href="bower_components/paper-material/">
<link rel="import" href="bower_components/paper-toolbar/">
<link rel="import" href="bower_components/paper-input/paper-input.html">
<link rel="import" href="bower_components/paper-button/paper-button.html">
<link rel="import" href="bower_components/iron-form/iron-form.html">
非常感谢任何帮助!
最佳答案
iron-form元素通过 AJAX ( https://github.com/PolymerElements/iron-form/blob/master/iron-form.html#L146 ) 提交您的请求。换句话说，它不会像传统的 <form> 那样进行整页刷新。元素(这看起来像您期望的行为)。它只是获取和获取数据。
我问过团队是否可以在 iron-form 上创建一个标志元素，这样用户仍然可以通过在请求中提交他们的自定义元素值来获得好处，但是强制它使用旧的表单行为来刷新整个页面(允许服务器呈现并发送新页面)。
编辑
我建议您更换 iron-form在您的示例中使用常规表单元素，然后将 paper-* 元素中的值写入 input type="hidden"字段，并使用这些字段提交表单。
关于javascript - Polymer Iron-form 不提交，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31229330/