jquery submit vs javascript event

Question

I have a button that calls a javascript function after an onclick event is called. This function validates my entries, and then creates an ajax object to populate my table of information. Everything seems to work fine, except when I add this code:

    echo "$(document).ready(function() { $(\"#newDate\").submit( function() { 
    ValidateForm('$ID');

    } ); });";

ValidateForm() is the same function my onclick event calls, except it does not seem to work without an empty alert placed after I send the ajax request. After looking around on SO I found a similar problem. I understand the problem in that particular post, except no matter what I do I can't solve my problem. I tried moving my send into my anonymous function after a successful ready state is established, and even tried setting my final parameter in my open method to -false-. (Which I know is not a valid solution, but it didn't work anyway.

So why does everything work perfectly with an onclick event, but not a jquery submit method?

    function ValidateForm(CQID)
    {

      var dt=document.newDate.uinput;

      if (isDate(dt.value)==false){
        dt.focus();
        return false;
      }

      populateDateTable(dt.value, CQID);

    }



function populateDateTable(dateString, CQID)
{
  //After recieving a date and checking validity populate a table of proceeding dates.
  var xmlhttp = createReq();

  xmlhttp.onreadystatechange=function()
  {

    if (xmlhttp.readyState==4 && xmlhttp.status==200)
      {
      document.getElementById("BoxCarCapacityDates").innerHTML= xmlhttp.responseText;
      }
  }

  xmlhttp.open("GET",'populateDateTable.php?dateString='+dateString+'&CQID='+CQID, true);
  xmlhttp.send();



}

Thanks in advance. (Switching everything into jquery slowly.. )

echo "$(document).ready($(function() 
{

    $('#newData').click(function()
    {

        var dt=document.newDate.uinput;

         if (isDate(dt.value)==false)
         {
            dt.focus();
            return false;
         }

        $.get(
        {
        url: 'populateDateTable.php',
        data: 'dateString='+dateString+'&CQID='+CQID,
        success: function()
                 {
                    $('#BoxCarCapacityDates').html(response);
                 }
        });


    });
});
); </script>";

The above code was submitted as an answer, but it doesn't seem to work at all.

Answer 1

Have you changed your button into a submit button? Without this, the form won't submit.

You will also need to add:

e.preventDefault();

into your function that you are attaching to the submit event of the form, to ensure that the form doesn't just POST(or GET) the information to it's action URL:

echo "$(document).ready(function() { $(\"#newDate\").submit( function(e) { 
e.preventDefault();
ValidateForm('$ID');

} ); });";

Answer 2

Are you ready to jQuery'ify your code? If so, try this.

$(function() {

$('#newData').click(function() {

    var dt=document.newDate.uinput;

        if (isDate(dt.value)==false){
            dt.focus();
            return false;
         }

    $.get({
        url: 'populateDateTable.php',
        data: 'dateString='+dateString+'&CQID='+CQID,
        success: function(){
            $('#BoxCarCapacityDates').html(response);
        }
    });


});

});