Multiple select box values using jquery not getting saved in database?

Question

Jquery:

<script type="text/javascript"> 

   function becomepartner()
   {

        var locations = []; 
    $('#geographicregion :selected').each(function(i, selected){ 
        locations[i] = $(selected).val(); 

    });

        alert("locations ========"+locations);

    var partners = JSON.stringify({
        "firstName": $('#fname').val(), 
        "lastName":$('#lname').val(),
        "geographicRegion":locations,


       });


       $.ajax({
           type: "POST",
           contentType: 'application/json',
           url: baseurl+"becomepartner/add",
           data: partners,
           dataType:"text",
           success:successmethod,
           error: function(data,status) {
            //alert("Error  "+status);
           }
       });

   }

HTML :

<form class="form-horizontal" id="becomepartnerfrm" style="padding:20px;" onsubmit="becomepartner(); return false;">

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="fname">First Name</label>  
  <div class="col-md-5">
                        <div class="required-field-block">
                         <input id="fname" name="firstName" type="text" placeholder="First Name" pattern="[A-Za-z ]{3,20}" oninvalid="setCustomValidity('First Name should be in range of 3 to 20 characters(only alphabets are allowed')" onchange="try{setCustomValidity('')}catch(e){}" class="form-control input-md"  required="required">
                         <div class="required-icon">
                            <div class="text">*</div>
                         </div>
                        </div> 
  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="lname">Last Name</label>  
  <div class="col-md-5">
                       <div class="required-field-block">
                       <input id="lname" name="lastName" type="text" placeholder="Last Name" pattern="[A-Za-z ]{3,20}" oninvalid="setCustomValidity('Last Name should be in range of 3 to 20 characters(only alphabets are allowed')"  onchange="try{setCustomValidity('')}catch(e){}"   class="form-control input-md" required="required">
                       <div class="required-icon">
                            <div class="text">*</div>
                         </div>
                       </div>
  </div>
</div>

<!-- Select Multiple -->
<div class="form-group">
  <label class="col-md-4 control-label" for="geolocation">Business Locations/Regions</label>
  <div class="col-md-5">
    <select id="geographicregion" name="geographicRegion" class="form-control" multiple="multiple">

    <option value="APAC">APAC</option>
    <option value="EMEA">EMEA</option>
    <option value="LATAM">LATAM</option>
    <option value="Middle East">Middle East</option>
    <option value="NA">NA</option>
    <option value="Public Sector">Public Sector</option>
    <option value="All">All</option>    
    </select>
  </div>
</div>

<!-- Button -->
<div class="form-group">
  <label class="col-md-4 control-label" for=""></label>
  <div class="col-md-4">
          <button type="submit"  class="btn btn-success">Apply Now</button>
  </div>
</div>

</form>

In the above code i have multiple select box..i am selecing three values from it and getting it inside function..but only the last value is saving inside database instead of all the three values selected in the multiple select box..please throw some light on it??

It wouldn't hurt if we could see the server side code that's responsible for saving data to db — Mikayil Abdullayev, Dec 15 '14 at 07:30
please check your params on server and look if your select is within them — Mephiztopheles, Dec 15 '14 at 08:54
@Mephiztopheles no need to check anything i got my answer...thanks to all for your support — User2413, Dec 15 '14 at 09:30

Hardik Raval · Answer 1 · 2014-12-16T06:09:04.283

0

Posting multipal value needs to be Array in selection box

Change selection box name geographicRegion[]

Below is the process to get value on client side when form submit it help

<form onsubmit="functionname($this)"></form>

On Client side

function functionname($form)
{
    var values = {};
     $.each($form.serializeArray(), function(i, field) {
         values[field.name] = field.value;
     });
    alert(values.field_name);  
}

In Ajax use async: false property to transfer data.

edited Dec 16 '14 at 06:09

answered Dec 15 '14 at 07:36

Hardik Raval

1,948
16
29

can you please give me complete answer if possible?? – User2413 Dec 15 '14 at 07:39
http://stackoverflow.com/questions/2407284/how-to-get-multiple-selected-values-of-select-box-in-php link for more reference – Hardik Raval Dec 15 '14 at 07:43
doesnt need to be an array. just need to handle it as an array on server – Mephiztopheles Dec 15 '14 at 08:53

score 0 · Accepted Answer · answered Dec 15 '14 at 09:33

we can save all the values in database by the following code:

var geolocations=$('#geographicregion :selected').map(function(){return $(this).val(); }).get();
        var totalloc="";
        for(var i=0;i<geolocations.length;i++)
        {
            totalloc+=geolocations[i]+",";

        }   

        alert("locations ========"+locations);

    var partners = JSON.stringify({
        "firstName": $('#fname').val(), 
        "lastName":$('#lname').val(),
        "geographicRegion":totalloc,


       });

rajesh kakawat · Answer 3 · 2014-12-15T11:35:07.223

0

just make it simple

var partners = JSON.stringify({
    "firstName": $('#fname').val(),
    "lastName":$('#lname').val(),
    "geographicRegion": $('#geographicregion').val()
});

EDITED CODE

           var geographicregion = $('#geographicregion').val().join();
           var partners = {
                "firstName": 'qwewqe',
                "lastName":'qwerewrwqe',
                "geographicRegion": geographicregion,
            };

edited Dec 15 '14 at 11:35

answered Dec 15 '14 at 09:45

rajesh kakawat

10,826
1
21
40

the above code saves only one value inside database though we select two or three values in multiple select box... – User2413 Dec 15 '14 at 10:12
you can alert geographicregion value, it will give you all selected value – rajesh kakawat Dec 15 '14 at 11:09
yes i know though it gives all the values in alert,it will save only last select value in database..if we want all the values to be saved in database..my approach is perfect – User2413 Dec 15 '14 at 11:15
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/66911/discussion-between-rajesh-kakawat-and-user2413). – rajesh kakawat Dec 15 '14 at 11:21
@User2413 check the edit code, if it doesn't work than use your one – rajesh kakawat Dec 15 '14 at 11:35

Multiple select box values using jquery not getting saved in database?

3 Answers3