jQM POST form via JS show "Error Loading Page"

Question

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

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>

are you using jquery validator? – kamesh Jul 04 '14 at 09:37 — kamesh, Jul 04 '14 at 09:37
I'm using third party validator. – MarkZ Jul 04 '14 at 14:00 — MarkZ, Jul 04 '14 at 14:00

kamesh · Answer 1 · 2014-07-04T09:47:51.437

0

solution : prevent Default action of your form tag because action="url" in your form is executed while you submitting .. try this

code :

$("#formid").submit(function(e){
     $.post( "test.php", $( "#testform" ).serialize() );  

});

If you using jquery validator just put this code inside successHandler function. here no need to preventDefault action on form tag.

Code :

 $('#myform').validate({
  rules:{
  firstname:"required",
  lastname:"required",
  username:"required" ,
  employeeid:"required",
  email:{
  required:true,
  email:true
  },
  password:{
  required:true,
  minlength:5
  },
  phoneno:{
  minlength:9,
  maxlength:10,

  }
  },
  messages:{
  username:"Please enter your username..!",
  password:"Please enter your password..!"
  },

  submitHandler: function(form) {
              $.post( "test.php", $( "#testform" ).serialize() );  
  }
  });

edited Jul 04 '14 at 09:47

answered Jul 04 '14 at 09:36

kamesh

2,374
3
25
33

do I need to put the "e.preventDefault();"? – MarkZ Jul 04 '14 at 09:42
yes , you need to prevent you default action of form tag.. Are you using jquery validator plugin/ – kamesh Jul 04 '14 at 09:46
@user3053891 what happen – kamesh Jul 04 '14 at 09:58
I tested buthave some problem. I'm preparing the code to show you. Will update you again when I updated the code. Thanks. – MarkZ Jul 04 '14 at 13:06
1

@user3053891 ok sure... there only should be slight mistake in your code because i have done that many time..anyway update the code we ill sort out that – kamesh Jul 04 '14 at 13:13
I've updated my code in my original post and posted the description on how it goes wrong. Kinda weird, but I'm new newbie in JS. Thanks a million. – MarkZ Jul 04 '14 at 14:02
Are you dynamically binding the registerButton element to your form tag ?If (YES) => ($(document).on("click","#registerButton",fun...) is ok or if (NO) => just directly specify like this($("#registerButton").click(function()...) ...(read event delegation) and ther might be two chances one =(form tag preventDefault action is not working) and (some value is returning from post file and its creating that problem )..! – kamesh Jul 05 '14 at 03:39
Sorry, I'm not fully understand the meaning of "dynamically binding". The button is in the HTML code. But I'll try your recommendation of the second method which is: $("#registerButton").click(function() Will update again for the result. – MarkZ Jul 05 '14 at 04:42
do you know when to use $(selector).on("click"... and when to use $(selector).click(... ? reference:http://stackoverflow.com/questions/9122078/difference-between-onclick-vs-click – kamesh Jul 05 '14 at 04:48
Thank you so much for the reference. Will learn more about it. Thanks again. – MarkZ Jul 05 '14 at 05:07
Hi @kamesh, I've updated my post with edited JS code (JS Code on 2nd attempt) as well as add in my HTML code. On the 2nd attempt, the preventDefault are totally ignored. No function at all. Is there anything wrong on my HTML, checked but didn't see anything wrong. – MarkZ Jul 05 '14 at 05:44
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/56806/discussion-between-kamesh-and-user3053891). – kamesh Jul 05 '14 at 05:53

MarkZ · Accepted Answer · 2014-07-07T13:09:37.560

0

There is nothing wrong in the code except "elseif".

The correct usage should be "else if". With the use of "e.preventDefault();", everything works as expected after corrected the mentioned error.

edited Jul 07 '14 at 13:09

answered Jul 07 '14 at 13:03

MarkZ

280
3
14

jQM POST form via JS show "Error Loading Page"

2 Answers2