CODEWITHSUNDEEP
phpjqueryformsinput
Sladfive
Sladfive

Reputation: 17

Jquery Ajax html (Select multiple)

I m searching something of easy. I must pass value from a form html to a file PHP by jquery. I try this code with zero result. If someone can say me where i m mistaking. Thx

for JQUERY

$('#Save').click(function(){

    var realvalues = new Array();//storing the selected values inside an array
    $('#Privilege[] :selected').each(function(i, selected) {
        realvalues[i] = $(selected).val();
    });

    $.ajax({
        type: "POST",
        url: "test5.php",
        data: {"Privilege[]": realvalues},
        success:function(data){
                $("#subscrres").html(data)
            }
    });
});

For HTML

<form method="post">
<select id="Privilege[]" multiple>
<option value="yahoo">yahoo</option>
<option value="chrome">chrome</option>
<option value="mozilla">mozilla</option>
</select>
<input type="button" id="Save" Value="SEND"/>

For PHP. Content file test5.php

if(isset($_POST['Privilege'])){
$myvar  =$_POST['Privilege'];
foreach($_POST['Privilege'] as $one)
echo $one."<br/>";

}

I don't receive nothing on PHP. Someone can help me ?

Upvotes: 0

Views: 440

Answers (1)

Bhargav Tailor
Bhargav Tailor

Reputation: 650

If you are trying to access multi select element using id the you don't need to set id like Privilege[], you can set any unique identity like privilege-selector but if you are giving name for any multi select element then name must be like Privilege[]

Here is the html :

<form id="form" method="post">
    <select id="privilege-selector" multiple>
       <option value="yahoo">yahoo</option>
       <option value="chrome">chrome</option>
       <option value="mozilla">mozilla</option>
    </select>
    <input type="button" id="Save" Value="SEND"/>
</form>

Please check this below ajax request to post selected data to the server

$("#Save").on("click",function(){
    var selection = [];
    $.each($("#privilege-selector option:selected"),function(index,element){
        selection.push($(element).val());
    })
    $.ajax({
        url : "test5.php",
        type : "POST",
        data : {Privilege:selection},
        success : function(_response){
           var res = JSON.parse(_response);
           if(res.code == "1"){
             console.log(res.data);
           } else {
             alert(res.message);
            }
        }
    })
});

and here is your server file that will handle the incoming request data

$serverResponse = [];
if(isset($_POST['Privilege']) && !empty($_POST['Privilege'])){
    $formattedData = [];
    foreach($_POST['Privilege'] as $key => $value){
        $formattedData[] = array(
            "id" => $key+1,
            "name" => $value
        );
    }
    $serverResponse = ["code"=>"1","message"=>"formatted data","data"=>$formattedData];
} else {
    $serverResponse = ["code"=>"0","message"=>"Please select at least on value"];
}
echo json_encode($serverResponse);

Upvotes: 2

Related Questions