In my jQM project, I had a problem with form submission. I did not use "action" URL to submit the form, instead, I use JS to submit my form after validation by another js addon, once validated, the form will be submit by jQM $.post().

I follow this from jQM page:

> 
> 
> ```
> Example: Send form data using ajax requests
> $.post( "test.php", $( "#testform" ).serialize() );
> 
> ```
> 
> 

Everything working fine include the return data. But my problem is, the "action" in form, if I remove it, after the form submit, app will be redirect to jQM first page. Same goes to "#". And if I put "/", it will show "Error Loading Page" for a moment then vanish.

My question, is there any way to get rid of the "Error Loading Page"?
I have also tried include [data-ajax="false"] in form tag. Also same result.

Please advice, thank you.

![enter image description here](https://i.stack.imgur.com/c5quJ.png)

**My JS code:** With this code, it fix the problem. But if I uncomment the commented line to perform my actual task, it will redirect me to the first page of my multipage. It's like ignored the preventDefault. What is actually wrong here? Please advice, thank you.

```
$(document).on("click", "#registerButton", function (e) {
    e.preventDefault();
    var registerForm = $( "#registerForm" );
    if (registerForm.valid() === true) {
        document.getElementById("regDeviceName").value = intel.xdk.device.model;
        document.getElementById("regDeviceOs").value = intel.xdk.device.platform;
        $.post("http://domain.com/api/user/register",
        $("#registerForm").serialize(),
            function(data,status){
                alert(data);
//                if (data == "registered") {
//                    $.mobile.pageContainer.pagecontainer("change", "#regSuccess");
//                }
//                elseif (data == "unverified") {
//                    $.mobile.pageContainer.pagecontainer("change", "#unverified");
//                }
//                elseif (data === "duplicate") {
//                    $.mobile.pageContainer.pagecontainer("change", "#duplicate");
//                }
//                else {
//                    $.mobile.pageContainer.pagecontainer("change", "#suspended");
//                };
//                $.mobile.pageContainer.pagecontainer("change", "#regSuccess");
            });
        }
});

```

**JS Code on 2nd attempt:**

```
$("#registerButton").click(function (e) {
    e.preventDefault();
    var registerForm = $( "#registerForm" );
    if (registerForm.valid() === true) {
        document.getElementById("regDeviceName").value = intel.xdk.device.model;
        document.getElementById("regDeviceOs").value = intel.xdk.device.platform;
        $.post("http://domain.com/api/user/register",
        $("#registerForm").serialize(),
            function(data,status){
                alert(data);
//                if (data == "registered") {
//                    $.mobile.pageContainer.pagecontainer("change", "#regSuccess");
//                }
//                elseif (data == "unverified") {
//                    $.mobile.pageContainer.pagecontainer("change", "#unverified");
//                }
//                elseif (data === "duplicate") {
//                    $.mobile.pageContainer.pagecontainer("change", "#duplicate");
//                }
//                else {
//                    $.mobile.pageContainer.pagecontainer("change", "#suspended");
//                };
//                $.mobile.pageContainer.pagecontainer("change", "#regSuccess");
//                $("#registerResult").html("Data: " + data + "<br>Status: " + status);
            });
        }
});

```

**Form HTML (jQM multipage structure):**

```
    <div data-role="page" id="register">
         <div data-role="header"><h1>Register</h1></div>
         <div data-role="content" class="pageWithHeader">
            <div id="formContainer">
                <form id="registerForm">
                <label for="regFirstName">First Name</label>
                <input class="registerVal" type="text" name="regFirstName" id="regFirstName" value="">
                <label for="regLastName">Last Name</label>
                <input class="registerVal" type="text" name="regLastName" id="regLastName" value="">
                <label for="regEmail">Email</label>
                <input class="registerVal" type="email" name="regEmail" id="regEmail" value="">
                <label for="regPassword">Password</label>
                <div id="regPassDiv">
                    <input class="registerVal" type="password" name="regPassword" id="regPassword" value="">
                </div>
                <input type="hidden" id="regDeviceName" name="regDeviceName" value="">
                <input type="hidden" id="regDeviceOs" name="regDeviceOs" value="">
                <div data-role="controlgroup" data-type="vertical">
                    <button id="registerButton" class="ui-btn ui-corner-all ui-icon-plus ui-btn-icon-left">Register</button>
                    <a href="#verifyRegister" class="ui-btn ui-corner-all ui-icon-check-square-o ui-btn-icon-left">Go to Account Verification</a>
                </div>
                </form>
             </div>
<!--             <div id="registerResult"></div>-->
         </div>
    </div> 

```