Eli*_*sen 3 html javascript php forms polymer-1.0
我在Polymer 1.0中使用铁形式提交带有纸张输入和纸张按钮的登录表单.
我在按钮onclick上调用submit(),但没有任何反应.我甚至试图放入一个原生按钮,看看我的JS是否有错误,但它仍然没有提交.
然而,它确实显示了"-----是必需的"弹出窗口,它与纸张按钮没有关系.
我正在使用PHP动态呈现HTML,但我也试图让它在普通的HTML文件中工作,这给了我相同的结果.
我不使用gulp来运行网络服务器,我只是使用普通的XAMPP设置.
login.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>
登录-form.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>
footer.html:
</body>
</html>
elements.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"字段,并使用这些值提交表单.
| 归档时间： |
|
| 查看次数： |
3676 次 |
| 最近记录： |