Get data from multiple select in javascript on submit

Question

I need help with getting the selected data from my multiselect into my javascript datastring when the submit button is pressed.

So I have this select:

<select multiple class="form-control" name="DivisionSelect[]">
  <option value="|TD">Traffic Division</option>
  <option value="|CP">Metro - C Platoon</option>
  <option value="|DP">Metro - D Platoon</option>
</select>

I want the selected data to be lined next to each other like this: "|TD|DP" if Traffic and D Platoon are selected. How can I do this?

var dataString = 'Crime='+ Crime + '&Type='+ Type + '&DescriptionForm='+ DescriptionForm +'&PinID='+ PinID + '&CordX='+ CordX + '&CordY='+ CordY + '&UserID='+ UserID + '&DivSelect='+ UseDiv + '&Divs='+ selecteddivs; — St3fanNL
– St3fanNL, Commented Apr 27, 2017 at 11:25

Nenad Vracar · Accepted Answer · 2017-04-27 11:39:09Z

2

You can use join() on select value and add it to string.

$('select').change(function() {
  var str = '&Divs="' + $(this).val().join('') + '"';
  console.log(str)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple class="form-control" name="DivisionSelect[]">
  <option value="|TD">Traffic Division</option>
  <option value="|CP">Metro - C Platoon</option>
  <option value="|DP">Metro - D Platoon</option>
</select>

To get this value on form submit you can use submit event on form and get value of select using find

$('form').submit(function(e) {
  e.preventDefault();
  
  var value = $(this).find('select[name="DivisionSelect[]"]').val();
  var str = '&Divs="' + (value ? value.join('') : '') + '"';
  console.log(str)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
  <select multiple class="form-control" name="DivisionSelect[]">
  <option value="|TD">Traffic Division</option>
  <option value="|CP">Metro - C Platoon</option>
  <option value="|DP">Metro - D Platoon</option>
</select>
  <br>
  <input type="submit" value="Submit">
</form>

edited Apr 27, 2017 at 11:39

answered Apr 27, 2017 at 11:24

Nenad Vracar

122k16 gold badges160 silver badges184 bronze badges

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

1 Comment

St3fanNL Over a year ago

How can I only make this work on the select with name DivisionSelect?

guradio · Accepted Answer · 2017-04-27 11:26:03Z

1

$("select").change(function() {

  var value = $("select option:selected").map(function() {


    return $(this).val()
  }).get().join("")

  console.log("&Divs="+value)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple class="form-control" name="DivisionSelect[]">
  <option value="|TD">Traffic Division</option>
  <option value="|CP">Metro - C Platoon</option>
  <option value="|DP">Metro - D Platoon</option>
</select>

Use .map()

Description: Translate all items in an array or object to new array of items.

answered Apr 27, 2017 at 11:26

guradio

15.6k4 gold badges39 silver badges65 bronze badges

2 Comments

St3fanNL Over a year ago

And how can I ge this under my "submit" form? Can I make it do this when someone hits the submit button?

guradio Over a year ago

yes just change the $("select").change(function() { with you `$("form").submit(function() {

Smit Shah · Accepted Answer · 2017-04-27 11:27:43Z

0

I Think below code will work for you.

var querystring = "&DivisionSelect=";
$('[name="DivisionSelect"] :selected').each(function(i, selected){ 
  querystring += $(selected).val()+querystring; 
});
alert(querystring);

answered Apr 27, 2017 at 11:27

Smit Shah

3541 gold badge3 silver badges14 bronze badges

Comments

score 0 · Accepted Answer · 2017-04-27 12:10:19Z

0

Hev you tried, to read out the selected option, and then appending them to a String? You can append via concat() :

var str1 = "Hello ";
var str2 = "world!";
var res = str1.concat(str2);

I hope this helps :)

edited Apr 27, 2017 at 12:10

answered Apr 27, 2017 at 11:25

user7740063

Collectives™ on Stack Overflow

Get data from multiple select in javascript on submit

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related