Polymer Iron-form 不提交

Polymer Iron-form not submitting

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

我在单击按钮时调用 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" 字段,并使用它们提交表格.