Question

I have a form that is of variable size (length) that is populated from a MySQL db. There are 4 fields that make up the information used to create a button (id, button#, name and price). When the form is submitted I want to save all the values to the MySQl db and update a div at the bottom of the page with a success message. For all my other pages I have used something like…

xmlhttp.open("GET","myfile.php?a="+val1+"&b="+val2+"&c="+val3+"&d="+val4,true);
xmlhttp.send();

The PHP files saves the data and generates the message for the div.
and to write to the div…

document.getElementById("txtHint").innerHTML=xmlhttp.responseText;

This work well for all my other pages but since I don’t know how many fields there will be I can’t hard code the xmlhttp.open statement.

I’m new to ajax and jQuery and know there must be a way to easily do this but I have been unable to get anything working. I was told I could use this

$.each($('#yourform').serializeArray(), function() { console.log(" <" +this.name+ '>' + this.value + "</" + this.name + "> " ); });

and it does print out each form element but not sure how to get this info to my PHP file and how to generate the return message for the div. Again I am new to ajax and jquery so if I could get some explanation as well I’m sure it would go a long way to helping me figure this out.

Answer 1

Hope this helps:

$('form').submit(function() {
    $.post("myfile.php", $(this).serialize(), function(response) {
        console.log(response);
    });
});