聚合物鐵形式不提交

我使用聚合物1.0中的鐵形式提交帶有紙張輸入和紙張按鈕的登錄表單。聚合物鐵形式不提交

我在按鈕onclick上調用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">

任何幫助將不勝感激！

來源

2015-07-05 Elias

iron-form元素通過AJAX（https://github.com/PolymerElements/iron-form/blob/master/iron-form.html#L146）提交您的請求。換句話說，它不會像傳統的<form>元素那樣進行整頁刷新（這看起來像您期望的行爲）。它只是獲取和提取數據。

我問過團隊是否可以在iron-form元素上創建一個標記，這樣用戶仍然可以獲得在請求中提交自定義元素值的好處，但強制它使用舊的表單行爲進行全頁面刷新（允許服務器渲染併發送新頁面）。

編輯

我建議你用常規表單元素替換iron-form在你的榜樣，那麼從你的紙 - *元素的值寫入input type="hidden"領域，並使用這些提交表單。

來源

2015-07-06 18:51:36 robdodson

啊好吧，我明白了！現在完全合理！雖然我對你的「修復」有點困惑，所以我應該使用一個普通的HTML表單，然後將我的paper- *元素設置爲什麼？後半部分讓我感到困惑..一個例子將不勝感激！ – Elias

對於任何爲paper- *元素的字段，請創建相應的字段。在提交表單的處理程序中，首先收集paper- *元素中的所有值，並將其設置爲元素的值。然後提交表單。問題是表單無法看到paper- *元素中的值。但它可以看到元素的值 – robdodson

因此，基本上，在紙張按鈕onclick上，我應該運行一個js函數，它接受來自紙張輸入的輸入並將它們設置爲字段，然後提交它？ – Elias

聚合物鐵形式不提交

回答

相關問題