Polymer Iron-form not submitting

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.

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

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

Recommended topics

Hot tags