CODEWITHSUNDEEP
jquery
SkyeBoniwell
SkyeBoniwell

Reputation: 7092

retrieving data from select list using jQuery and sending to server via AJAX

I have a select list that contains ID information that I need to send to a serverside script.

My server side script is working and has an object that has properties: GroupId, isManagement, and isHourly.

For some reason, my jQuery is always sending an empty object. The AJAX request errors out saying my object is empty.

So my question is, is my jquery code below correctly retrieving the data from my select list?

Thanks!

Here is an HTML sample:

<select id="groupList">
    <option id="39238">Group 1</option>
    <option id="95833">Group 2</option>
    <option id="38911">Group 3</option>
</select>

<input type="button" id="btnSend" value="Send Data" />

Here is my jQuery

$("#btnSend").on("click", function () {

    var data = $.map($("#groupList option"), function (e, i) {
      return {
                   GroupId: i.id,
                   isManagement: True,
                   isHourly: False
             }
    });  

    $.ajax({
        type: "POST",
        url: url,
        data: data,
        success: function () {

        },
        error:function(xhr,err){
           alert("readyState: "+xhr.readyState+"\nstatus: "+xhr.status);
           alert("responseText: "+xhr.responseText);
        }
    });

 });

Upvotes: 0

Views: 710

Answers (1)

PSL
PSL

Reputation: 123739

It should be other way, you are trying to get the id from index i. First argument is the element of the array and second argument index in $.map.

var data = $.map($("#groupList option"), function (ob, i) {
      return {
                   GroupId: ob.id,
                   isManagement: true, // unless True is a variable
                   isHourly: false //unless False is a variable.
             }
    });

Upvotes: 1

Related Questions