聚合物铁形式未提交

Question

I am using the iron-form in Polymer 1.0 to submit a login form with paper-inputs and a paper-button. 我在Polymer 1.0中使用铁形式提交带有纸张输入和纸张按钮的登录表单。

I am calling submit() on the buttons onclick, but nothing happens. 我在按钮onclick上调用submit（），但没有任何反应。 I even tried to put in a native button just to see if there was an error with my JS, but it still didn't submit. 我甚至试图放入一个原生按钮，看看我的JS是否有错误，但它仍然没有提交。

However, it did show the "----- is required" popup which it didn't do with the paper-button. 然而，它确实显示了“-----是必需的”弹出窗口，它与纸张按钮没有关系。

I am using PHP to dynamically render the HTML, but i have also tried to make it work in a normal HTML file, which gave me the same results. 我正在使用PHP动态呈现HTML，但我也试图让它在普通的HTML文件中工作，这给了我相同的结果。

I don't use gulp to run the webserver, i just use a normal XAMPP setup. 我不使用gulp来运行网络服务器，我只是使用普通的XAMPP设置。

login.php: 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: 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: 登录-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: footer.html：

    </body>
</html>

elements.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">

Any help will by greatly appreciated! 任何帮助将非常感谢！

Answer 1

The iron-form element submits your request via AJAX ( https://github.com/PolymerElements/iron-form/blob/master/iron-form.html#L146 ). iron-form元素通过AJAX（ https://github.com/PolymerElements/iron-form/blob/master/iron-form.html#L146 ）提交您的请求。 In other words, it's not going to do a full page refresh like the traditional <form> element (which seems like the behavior you're expecting). 换句话说，它不会像传统的<form>元素那样进行整页刷新（这看起来像你期望的行为）。 It's just getting and fetching data. 它只是获取和获取数据。

I've asked the team if it would be possible to create a flag on the iron-form element so users can still get the benefit of having it submit their custom element values in the request, but force it to use the old form behavior where it does a full page refresh (allowing the server to render and send down a new page). 我已经向团队询问是否可以在iron-form元素上创建一个标志，这样用户仍然可以获得让它在请求中提交自定义元素值的好处，但强制它使用旧的表单行为它执行整页刷新（允许服务器呈现并向下发送新页面）。

edit 编辑

I'd recommend that you replace iron-form in your example with a regular form element, then write the values from your paper-* elements into input type="hidden" fields, and use those to submit the form. 我建议您使用常规表单元素替换示例中的iron-form ，然后将paper- *元素中的值写入input type="hidden"字段，并使用它们提交表单。

聚合物铁形式未提交

问题描述

1 个解决方案

解决方案1
5 已采纳 2015-07-06 18:51:36

聚合物铁形式未提交

问题描述

1 个解决方案

解决方案1 5 已采纳 2015-07-06 18:51:36

解决方案1
5 已采纳 2015-07-06 18:51:36