Я использую железо-форму в Polymer 1.0 для отправки формы входа с бумажными вводами и бумажной кнопкой.
Я вызываю submit () на кнопках onclick, но ничего не происходит. Я даже попытался установить собственную кнопку, чтобы увидеть, была ли ошибка с моим 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">
Любая помощь будет очень оценена!
Элемент « iron-form отправляет ваш запрос через AJAX ( https://github.com/PolymerElements/iron-form/blob/master/iron-form.html#L146 ). Другими словами, это не будет делать полное обновление страницы, как традиционный элемент <form> (что похоже на поведение, которое вы ожидаете). Это просто получение и выборка данных.
Я спросил у команды, можно ли создать флаг в элементе « iron-form чтобы пользователи могли получить преимущество в том, что он отправил свои собственные значения элементов в запрос, но заставил его использовать старое поведение формы, где он обновляет всю страницу (позволяет серверу отображать и отправлять новую страницу).
редактировать
Я бы рекомендовал вам заменить iron-form в вашем примере на обычный элемент формы, а затем записать значения из ваших элементов paper- * в поля input type="hidden" и использовать их для отправки формы.