Question

我正在使用Polymer 1.0中的铁形式提交带有纸张输入和纸张按钮的登录表单。

我在按钮onclick上调用submit（），但没有任何反应。我甚至试图放入一个原生按钮，看看我的JS是否有错误，但它仍然没有提交。

然而，它确实表明＆＃34; -----是必需的＆＃34;弹出窗口，它没有用纸按钮。

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

聚合物铁形式未提交

1 个答案: