Setting select value on form submit with jQuery

Question

I'm trying to set a select value on submit, but I'm having some problems with declaring functions and the format of my code. Hopefully you guys can help out!

<form>
   <select>
      <option value="1" data-parent="-1">Alt 1</option>
      <option value="11" data-parent="1">&nbsp;&nbsp;Alt 1.1</option>
      <option value="12" data-parent="1">&nbsp;&nbsp;Alt 1.2/option>
      <option value="2" data-parent="-1">Alt 2</option>
      <option value="21" data-parent="2">&nbsp;&nbsp;Alt 2.1</option>
      <option value="22" data-parent="2">&nbsp;&nbsp;Alt 2.2</option>
      <option value="23" data-parent="2">&nbsp;&nbsp;Alt 2.3</option>
      <option value="24" data-parent="2">&nbsp;&nbsp;Alt 2.4option>
      <option value="3" data-parent="-1">Alt 3</option>
      <option value="31" data-parent="3">&nbsp;&nbsp;Alt 3.1</option>
      <option value="32" data-parent="3">&nbsp;&nbsp;Alt 3.2</option>
   </select>
   <input type="submit" value="Submit">
</form>

$('form select').on('change', function(e) {
  var optionSelected = $('option:selected', this);
  var selectedOptionParent = $('option:selected', this).attr('data-parent');

  var selectedValue = optionSelected.val();
  var parentValue = $('option[value="' + selectedOptionParent + '"]', this).val();

  var selectedValues = parentValue + ',' + selectedValue;
  console.log('Registered value is ' + parentValue + ',' + selectedValue);
});

$('form input[type="submit"]').on('click', function(e) {
  $('.modal-add-gallery-image select').val(selectedValues);
});

Please find example fiddle at https://jsfiddle.net/iamchriswick/sa6v7f6h/3/

Please elaborate the issue(s) you are facing with as much clarity as you can. — hazardous
– hazardous, Commented Feb 2, 2016 at 11:26
As of now, I get the error "Uncaught ReferenceError: selectedValues is not defined" — iamchriswick
– iamchriswick, Commented Feb 2, 2016 at 11:38
Either move selectedValues declaration outside of the change handler or populate its value inside submit click handler. — Yury Tarabanko
– Yury Tarabanko, Commented Feb 2, 2016 at 12:03
@YuryTarabanko Could you please provide an example of how to do this? — iamchriswick
– iamchriswick, Commented Feb 2, 2016 at 12:07

Yury Tarabanko · Accepted Answer · 2016-02-02 12:13:13Z

2

Demo You need to declare variable selectedValues outside of the change handler if you want to make it accessible from within another function.

var selectedValues;
$('form select').on('change', function(e) {
    var optionSelected = $('option:selected', this);
    var selectedOptionParent = $('option:selected', this).attr('data-parent');

    var selectedValue = optionSelected.val();
    var parentValue = $('option[value="' + selectedOptionParent + '"]', this).val();

 selectedValues = parentValue + ',' + selectedValue; //setting its value
 console.log('Registered value is ' + parentValue + ',' + selectedValue);
});

$('form').on('submit', function(e) {
  console.log(selectedValues); //reading the value we set on change
  e.preventDefault();
});

answered Feb 2, 2016 at 12:13

Yury Tarabanko

45.1k10 gold badges88 silver badges99 bronze badges

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

1 Comment

iamchriswick Over a year ago

Works like a charm! :D Thank you! :)

Collectives™ on Stack Overflow

Setting select value on form submit with jQuery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related