Fatal编程技术网

Javascript 聚合铁表格未提交

javascript php html forms

Javascript 聚合铁表格未提交,javascript,php,html,forms,polymer-1.0,Javascript,Php,Html,Forms,Polymer 1.0,我正在使用Polymer 1.0中的iron表单提交一个带有纸张输入和纸张按钮的登录表单 我正在单击按钮onclick上调用submit（），但什么也没发生。我甚至试着输入一个原生按钮，看看我的JS是否有错误，但它仍然没有提交 但是，它确实显示了“----是必需的”弹出窗口，而不是纸张按钮 我使用PHP动态呈现HTML，但我也尝试在普通HTML文件中使用它，这给了我相同的结果 我不使用gulp来运行web服务器，我只使用普通的XAMPP设置 login.php： <?php // con

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

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

但是，它确实显示了“----是必需的”弹出窗口，而不是纸张按钮

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

我不使用gulp来运行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>





测试：
试验
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>


登录
提交
函数clickHandler（事件）{
Polymer.dom（event.localTarget.parentElement.submit（）；
console.log（“已提交！”）；
}

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表单
元素通过AJAX（）提交您的请求。换句话说，它不会像传统的
元素那样进行整页刷新（这似乎是您所期望的行为）。它只是获取数据

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

编辑


我建议您将示例中的
iron form
替换为常规表单元素，然后将论文-*元素中的值写入
input type=“hidden”
字段，并使用这些字段提交表单。
啊，好的，我明白了！现在完全有道理了！不过，我对您的“修复”有点困惑，所以我应该使用常规HTML表单，然后将我的paper-*元素设置为什么？后一部分使我困惑。。举个例子将不胜感激！对于属于纸张-*元素的任何字段，请创建相应的字段。在提交表单的处理程序中，首先从paper-*元素收集所有值，并将这些值设置为元素的值。然后提交表格。问题是表单无法在paper-*元素中看到值。但它可以看到元素中的值基本上，在纸按钮onclick上，我应该运行一个js函数，从纸输入中获取输入并将其设置为字段值，然后提交？在隐藏的输入字段上，yesOkay，我会尝试！谢谢

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