聚合物铁形式不提交 [英] Polymer Iron-form not submitting

查看：123
本文介绍了聚合物铁形式不提交的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

我打电话给submit（）按钮onclick，但没有任何反应。我甚至试图加入一个本地按钮来查看我的JS是否有错误，但它仍然没有提交。 然而，它确实显示了-----是必需的弹出式窗口，它没有使用纸张按钮。

b

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



我不使用gulp来运行网络服务器，我只是使用普通的XAMPP设置。



login.php：

 <？php 
 
 //配置
 require（/ includes / config.php）; （$ _SERVER [REQUEST_METHOD] ==GET）
 //如果用户通过GET访问页面（如通过单击链接或通过重定向）
 {b 
 $ b { 
 // else render form 
 render（login-form.php，[title=>Log In]）; 
} 
 
 //如果用户通过POST访问页面（如通过POST提交表单）
 else if（$ _SERVER [REQUEST_METHOD] ==POST ）
 {
 
 //查询用户数据库
 $ rows = query（SELECT * FROM users WHERE username =？，$ _POST [username]）; 
 
 //如果我们找到用户，请检查密码
 if（count（$ rows）== 1）
 {
 // first（and only）row 
 $ row = $ rows [0]; 
 
 //将用户输入的散列与数据库中的散列进行比较
 if（crypt（$ _ POST [password]，$ row [hash]）== $ row [哈希]）
 {
 //记住用户现在通过在会话中存储用户ID登录
 $ _SESSION [id] = $ row [id]; 
 
 //重定向到投资组合
重定向（/）; 
 
 
 $ b $ //道歉
道歉（无效的用户名和/或密码）; 
} 
？>

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 =importhref =elements.html> 
< link rel =importhref =/ styles / styles.html> 
 
<？php if（isset（$ title））：？> 
< title>测试：<？= htmlspecialchars（$ title）？>< / title> 
<？php else：？> 
< title>测试< /标题> 
<？php endif？> 
 
< / head> 
 
< body>

login-form.php： 

 < div class =outer> 
< div class =middle> 
< div class =inner> 
< paper-material elevation =5> 
< paper-header-panel> 
< paper-toolbar> 
< div>< b>登入< / b>< / div> 
< / paper-toolbar> 
< div class =content> 
< form is =iron-formid =formmethod =postaction =index.php> 
< paper-input name =usernamelabel =用户名必需>< / paper-input> 
 < paper-button raised onclick =clickHandler（event）id =loginButton> Submit< / paper-button> 
< / form> 
< script> 
函数clickHandler（event）{
 Polymer.dom（event）.localTarget.parentElement.submit（）; 
 console.log（已提交！）; 
} 
< / script> 
< / div> 
< / paper-header-panel> 
< / paper-material> 
< / div> 
< / div>



footer.html：

 < / body> 
< / html>

elements.html：

 < link rel =importhref =bower_components / font-roboto / roboto.html> 
< link rel =importhref =bower_components / paper-header-panel /> 
< link rel =importhref =bower_components / paper-material /> 
< link rel =importhref =bower_components / paper-toolbar /> 
< link rel =importhref =bower_components / paper-input / paper-input.html> 
< link rel =importhref =bower_components / paper-button / paper-button.html> 
< link rel =importhref =bower_components / iron-form / iron-form.html>

任何帮助都将不胜感激！

iron-form 元素通过AJAX提交你的请求（ iron-form / blob / master / iron-form.html＃L146rel =noreferrer> https://github.com/PolymerElements/iron-form/blob/master/iron-form.html#L146 ）。换句话说，它不会像传统的< form> 元素那样进行整页刷新（这看起来就像您期待的行为）。它只是获取和获取数据。



我问过团队是否可以在 iron-form code>元素，因此用户仍然可以获得让它在请求中提交自定义元素值的好处，但强制它使用旧的表单行为进行整页刷新（允许服务器渲染并发送）一个新的页面）。

编辑



我建议您替换在你的例子中使用常规表单元素，然后将你的paper- *元素的值写入 input type =hidden code>字段，并使用它们来提交表单。


I am using the iron-form in Polymer 1.0 to submit a login form with paper-inputs and a paper-button.

I am calling submit() on the buttons onclick, but nothing happens. 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.

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.

I don't use gulp to run the webserver, i just use a normal XAMPP setup.

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>

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>

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

Any help will by greatly appreciated!

解决方案

The iron-form element submits your request via 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). 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).

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.

这篇关于聚合物铁形式不提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
PHP最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆