Question

I have multiple select boxes on the page all of which share the same beginning parts of the name attribute. What I need to do is go through each select box on the page with this starting name SELECT___ and grab the name of that select box and whatever the selected option value is and have it formatted like this so that I can then insert it into an Ajax post call as shown below.

Note: the product code is retrieved from the following variable

var global_Current_ProductCode = '100E';

This is the Ajax call. Notice I hard coded the data field and it works but I need to grab the actually selected options value with its corresponding select name.

$.ajax({
url: $("form[name='MainForm']").attr('action'),
data: "SELECT___100E___7=25&SELECT___100E___9=42&btnupdateprice.x=0&btnupdateprice.y=0&ProductCode=100E",
type: 'POST', 
cache: false,
success: function(response) {
result2= $(response).find(".pricecolor .price");
alert(result2.text());
}
});

Here is the select boxes. Please note that there could be one, two or more select boxes on the page. Thanks for any help. Hope I am making sense.

<select onChange="change__option(this.name,this.options[this.selectedIndex].value,this.options[this.selectedIndex].text)" name="SELECT___100E___7">
<option value="0">Select Cart Color</option>
<option value="21">Chrome</option>
<option value="25">Beige/Almond [Add $1.00]</option>
</select>

<select onChange="change__option(this.name,this.options[this.selectedIndex].value,this.options[this.selectedIndex].text)" name="SELECT___100E___9">
<option value="0">Select Cart Color</option>
<option value="27">Red</option>
<option value="42">Beige/Almond [Add $2.00]</option>
</select>

So to sum it up I need the format to be like SELECT___100E___7=25&SELECT___100E___9=42&btnupdateprice.x=0&btnupdateprice.y=0&ProductCode=100E so that I can put it in the data field of the Ajax call. This is assuming that the first select box had the beige/Almond option selected (25) and the second select box also had the beige/almond option (42) selected

Answer 1

You could use jQuery serialize. It simply needs an id attribute on the surrounding <form>. To include other information with the request, such as the product id or price, create corresponding hidden fields and call

$.ajax({ 

//..

data: $("#form-id").serialize(), 

//..

});