聚合物铁表格未提交

Polymer Iron-form not submitting

本文关键字：提交 表格 聚合物      更新时间：2023-09-26

我使用Polymer 1.0中的iron表单提交一个带有纸质输入和纸质按钮的登录表单。

我在按钮onclick上调用submit((，但什么也没发生。我甚至试着放一个原生按钮，看看我的JS是否有错误，但它仍然没有提交。

然而，它确实显示了"-----是必需的"弹出窗口，而这与纸张按钮不同。

我使用PHP来动态呈现HTML，但我也尝试过让它在普通的HTML文件中工作，这给了我相同的结果。

我不使用gump来运行Web服务器，我只是使用普通的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>

login-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"字段，并使用这些值提交表单。

相关文章：