jQuery imple form submission without reload

Question

Hi,

Could someone provide me with the most simple code for form submission with jquery. On the web is with all sorts of gizmo coding.

Thanks in advance Dave

Answer 1

$('#your_form_id').submit(function(){
  var dataString = $("#your_form_id").serialize();

  $.ajax({  
    type: "POST",  
    url: "submit.php",  
    data: dataString,  
    success: function() {  
      alert('Sent!');
    }  
  });

  return false;
});

Answer 2

What you want is jquery form plugin. It allows you to simply send normal 'form' using ajax - you can make a non-visible form and use this plugin to subnmit it. The option in Joel's answer is possible as well, it depends on the complexity of the thing you want to submit.

Answer 3

Take a look at the Form plugin:

$(function() {
    $('#myForm').ajaxForm(function() { 
        alert("Thank you for your comment!"); 
    }); 
});

Answer 4

here is a another solution, not as simple as the Jquery Form Plugin, but it can be useful if you want to handle errors codes and messages by yourself

look at this HTML + Javascript sample :

    <div>
      <form method="post" id="fm-form" action ="">
      <label>Name:</label>
          <input type="text" id="fm-name" name="fm-name" value="" />
          <label>Email:</label>
          <input type="text" id="fm-email" name="fm-email" value="" />
          <label>Birthdate:</label>
          <input type="text" id="fm-birthdate" name="fm-birthdate" value="" />

          <input type="submit" id="fm-submit" value="Save it">
      </form>
    </div>


<script type="text/javascript">
$(function() {

  // disable the form submission
  $("#fm-form").submit(function () { return false; });

  // post the datas to "submit_form.php"
  $("#fm-submit").click(function() {
  $.post("/ajax/submit_form.php",
      { 'fm-name':$("#fm-name").val(),
      'fm-email':$("#fm-email").val(),
      'fm-birthdate':$("#fm-birthdate").val()
      }
      ,function(xml) {
        // submit_form.php will return an XML or JSON document
      // check it for potential errors
      });
  });

});
</script>