Issue while posting Array and Form data together through jQuery Ajax

Question

I have been trying to post Array and Form data together but seems like I am getting JavaScript errors. When I tried to post Only array data without adding form data it works fine.

I am having a Dropdown Select Box and few CheckBoxes. I wanted to post SelectBox data and CheckBox data together, so I had saved the CheckBox data's into array since it is a multi Select CheckBox.

In the below code i need to resolve issue with this

data: datasel+"&id="+$("#member_id").val(), //Error in this line only. To be Fixed!!

Here is the Complete code

<script>
$(document).ready(function(){
    $("#err").css('display', 'none', 'important');
     $("#submit_issueBook").click(function(){
         //Creating Array and adding data
        var datasel = { 'selector[]' : []};
        $(":checked").each(function() {
          datasel['selector[]'].push($(this).val());
        });

        $.ajax({
            type: "POST",
            url: "includes/issue_book.php",
            //data: "submit_addMember="+$("#submit_addMember").val(),  <-- Default format for sending post data
            data: datasel+"&id="+$("#member_id").val(),
                if($.trim(html)=='true'){
                    $("#err").addClass("alert alert-success err-inline");
                    $("#err").html("<strong>Member details updated Successfully</strong>");
                    window.location="<?php basename($_SERVER['PHP_SELF']); ?>";
                }
                else{
                    $("#err").addClass("alert alert-danger err-inline");
                    $("#err").html("<img src='images/caution-icon.png' />"+$.trim(html));
                }
           },
           beforeSend:function()
           {
                $("#err").css('display', '-webkit-inline-box', 'important');
                $("#err").addClass("err-inline");
                $("#err").html("<img src='images/loading.gif' /> Loading...")
           }
        });
        return false;
    });
});
</script>

PHP code to catch this data is

if( isset( $_POST['selector'] ) )
{   $id=$_POST['id'];
    $data=$_POST['selector'];
    for ( $i=0; $i < count( $data ); $i++ )
    {
        //Some SQL query
    }
}

Any help would be appreciated. Thanks :)

n-dru · Accepted Answer · 2015-04-04 19:17:42Z

1

You are mixing json with get string in data. As you have datasel object, just add id key and value to it. First drop those square brackets, it is only needed in html form as a name:

var datasel = { 'selector' : []};

then in the loop:

datasel['selector'].push($(this).val());

after loop add id key/value pair to datasel object:

datasel.id = $("#member_id").val();

And then in ajax it is enough to send this json:

data: datasel,

answered Apr 4, 2015 at 19:17

n-dru

9,4402 gold badges31 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ashish Over a year ago

Thanks Bro it worked. But one problem I have checked the POST data it seems it is posting one extra select here selector"%"5B"%"5D=2&selector"%"5B"%"5D=1&selector"%"5B"%"5D=2&id=2 The one with selector=2 in the first is automatically added dont know how. I have even checked the html there is no such problem in that. Then why it is posting two times selector=2

n-dru Over a year ago

I cannot know, looks like you have two "2"s checked. Double check your form inputs set.

Ashish Over a year ago

Thanks Man I had figured out the issue replaced $(":checked") with $("#selection:checked")

AdamM · Accepted Answer · 2015-04-04 19:20:28Z

First of all why do you put the DOM manipulation code into the ajax call settings? Try out this code:

$.ajax({
    type: "POST",
    url: "includes/issue_book.php",
    //data: "submit_addMember="+$("#submit_addMember").val(),  <-- Default format for sending post data
    data: datasel+"&id="+$("#member_id").val(),
    beforeSend:function()
    {
        $("#err").css('display', '-webkit-inline-box', 'important');
        $("#err").addClass("err-inline");
        $("#err").html("<img src='images/loading.gif' /> Loading...")
    }
});

What I did here is deleted this code I mentioned before (so you should put it where you need) and then put beforeSend inside the ajax settings where it belongs :)

Hop it will help you.

Collectives™ on Stack Overflow

Issue while posting Array and Form data together through jQuery Ajax

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related