传递可变大小的表单

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.

Hope this helps:

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

You can assign variable names, something like a00 to a99, b00 to b99 etc. that are being sent to the server in a POST request. Then simply on the server side check which values have been set and then treat the accordingly.

It's a bit crude, but it should work.

What about something like this? http://jsfiddle.net/r0k3t/e6W3Z/ as you can see you can add any number of fields and they will all get dumped into qString.

$('#yourform').submit(function() {
    var qString = "";
    $('#yourform input[type=text]').each(function() {
       qString += $(this).attr("id") + "=" + $(this).val() + "?";
    });
    console.log(qString);
    return false;
});

From you question is appears that you can grab the values of the button because you do that elsewhere. Once you are happy with the query string you can use .post as Joe Brown suggested.