Question

I’m trying to upgrade a javascript site to a Jquery Mobile site. I need to preventDefault a form submission to run my validation routine and fire an ajax form submission.

I have this:

HTML

<form name="LoginForm" id="LoginForm" action="some.html" method="post">
  ...
  <input type="submit" onClick="routine('true')" />
</form>

Jquery:

function rountine(isit){
   if(isit == "true"){
      document.LoginForm.action = "some.html"; 
      }
   console("rountine triggered");

   $("#LoginForm").submit(function(event, data){
       console.log("submission triggered");
       console.log(event);
       console.log(data);
       event.preventDefault();  
       });
 };

Question:
I’m only getting the first console message. The form is not submitted, but nothing else shows up on the console. What am I doing wrong? Also do I need to re-specify action or can I omit it in the HTML part and maybe set it dynamically from within my rountine function?

Thanks for helP!

Answer 1

your line :

$("#LoginForm").submit(function(event, data){

Is setting up an event handler for submitting of the form … see http://api.jquery.com/submit/

Do it this way :

<form name="LoginForm" id="LoginForm" action="some.html" method="post">
  ...
  <input type="submit"/>
</form>

$(document).ready(function() {
  $("#LoginForm").submit(function(event){
     // actions you want to perform on the form submitting
     if(isit == "true"){
        document.LoginForm.action = "some.html"; 
     }
     console("rountine triggered");
     console.log("submission triggered");
     console.log(event); // event is an object - dont expect much in the console
     event.preventDefault();  
   });
});

This will setup the submit listener and the code within the function will be executed on submit – event.preventDefault(); will prevent the form from submitting.