Jquery select value on submit for multiple dynamically generated selects

Question

Trying to figure out if and how I can get the specific value by only using the class name. Is it even possible?

All selects are generated dynamically and have the same class name. all the submit buttons have the same class name as well.

<div>
<select class="mystat" name="mystat" style="width: 140px">
    <option value="1" selected="selected">option 1</option>
    <option value="2">option 2</option>
    <option value="3">option 3</option>
</select>
<button class="go-btn" type="submit">Update</button>
</div>


$(document).on('click', '.go-btn', function(){
    var mystat = $('.mystat').val();
    alert('Value is ' + mystat);
});

Fiddle

Any help is greatly appreciated

do you have a different submit per select?

Neville Nazerane
– Neville Nazerane

2017-08-24 00:27:51 +00:00
Commented Aug 24, 2017 at 0:27 — Neville Nazerane
– Neville Nazerane, Commented Aug 24, 2017 at 0:27

Barmar · Accepted Answer · 2017-08-24 00:23:30Z

Use DOM navigation relative to $(this).

$(document).on('click', '.go-btn', function() {
  var mystat = $(this).siblings('.mystat').val();
  alert('Value is ' + mystat);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <select class="mystat" name="mystat" style="width: 140px">
  <option value="1" selected="selected">option 1</option>
  <option value="2">option 2</option>
  <option value="3">option 3</option>
 </select>
  <button class="go-btn" type="submit">Update</button>
</div>
<div>
  <select class="mystat" name="mystat" style="width: 140px">
  <option value="1" selected="selected">option 1</option>
  <option value="2">option 2</option>
  <option value="3">option 3</option>
 </select>
  <button class="go-btn" type="submit">Update</button>
</div>
<div>
  <select class="mystat" name="mystat" style="width: 140px">
  <option value="1" selected="selected">option 1</option>
  <option value="2">option 2</option>
  <option value="3">option 3</option>
 </select>
  <button class="go-btn" type="submit">Update</button>
</div>

user8508838 · Accepted Answer · 2017-08-24 00:35:45Z

0

Try this, because select tag is in the front of the button in each block

var mystat = $(this).prev().val();

answered Aug 24, 2017 at 0:35

user8508838

1

Collectives™ on Stack Overflow

Jquery select value on submit for multiple dynamically generated selects

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related