Question

I have a HTML5 form which looks like this:

        <form id="myData">
            <p>Email
            <input type="email" title="myEmail" id="email" required />
            </p> 

            <p>Some Text
            <input type="text" title="myText" id="text" required />
            </p>

            <button type="submit" id="submitButton">Submit</button>
        </form>

Pressing the submit button then causes the form to disappear from the screen. I’m using the Navigation template for the app, although looking at the DOM Explorer, it doesn’t navigate away from the page, just gets rid of the form. This is obviously by design, but bizarrely I can’t find any reference to this functionality.

My question is: why does it do this, and how can I stop it, while still keeping the free validation that I get with the form?

Answer 1

You can handle the form submitted event. Call preventDefault to keep the form from submitting to a form action that you haven’t defined, then handle the submission.

ready: function (element, options) {
    document.getElementById("myData").addEventListener("submit", function (e) { 
        e.preventDefault(); 

        // handle your form submission here

    });
},