Question

I have some problem with my form.

i want to use jquery ajax to validate a form against a database and i encounter different problems.

1.

$('#formsubmit').click(function(e) {
    e.preventDefault(); // this is not working, the page reloads
});

2.

$('#formsubmit').live('click', function(e) {
    e.preventDefault(); //works, but...
    var firstname = $('#firstname').val(); // returns an empty string and ...
    firstname = document.getElementById('firstname'); //does not return anything either
    alert("$('#firstname')"); // returns [object][object] ... should'nt it be [object][html inputelement]
});

so far i havent been able to trigger an ajax load on click on the submit button of my form because i cannot get the values of my input fields.

am i missing something here?
Is it possible to use another method for:
1. prevent page reload on submit-click and
2. get all values of the form and send them via ajax to my php script
3. wait for the answer and display it in the according html elements.

Answer 1

The problem is you’re preventing the click event, not the submit event, which is what you want to catch here, like this:

$("#formid").live("submit", function(e) {
  e.preventDefault();
  $.post("myPage.php", $(this).serialize(), function(result) { 
    $("#resultContainer").html(result);
  });
});

In the above, we’re using .serialize() on the <form> itself to get all the data to submit (from all successful inputs), just like a normal submission would do (with no JavaScript).

---

Also, I ca’t tell from your question, but be sure your id attributes are unique, e.g. there is only one id="firstname", you’ll have many issues if that’s not the case.