Polymer Iron-form 不提交

Question

我正在使用 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">

非常感谢任何帮助！

Answer 1

iron-form 元素通过 AJAX (https://github.com/PolymerElements/iron-form/blob/master/iron-form.html#L146) 提交您的请求。换句话说，它不会像传统的 <form> 元素那样进行整页刷新（这似乎是您所期望的行为）。它只是获取和获取数据。

我问过团队是否可以在 iron-form 元素上创建一个标志，这样用户仍然可以从它在请求中提交他们的自定义元素值中获益，但强制它在刷新整个页面时使用旧表单行为（允许服务器呈现并发送新页面）。

编辑

我建议您将示例中的 iron-form 替换为常规表单元素，然后将 paper-* 元素中的值写入 input type="hidden" 字段，并使用它们提交表格.

Polymer Iron-form 不提交

Polymer Iron-form not submitting

html

javascript

php

forms

polymer-1.0