How to select input value from onchange using jQuery?

Question

I have a select and input tags. I am updating a value of a text input based from what is selected in the select tag.

Select Tag

<select class="form-control form-field-username form-field-users">
<option class="form-field-first-option" value="0" selected="selected">Select User...</option>
<option value="1">Peter Fel</option> 
<option value="2">Mark Getty</option>
</select>

Input Tag

<input name="user_id" id="user_id" class="form-control form-field-user-id" type="number">

Code for onchange select:

$('.form-field-username').change( function() {
    $(this).find(":selected").each(function () {
        var userId = $(this).val();

        $('.form-field-user-id').val(userId);

    });

});

I want to set the value of text input with user id of "user_id" to null or undefined if the onchange chooses the first value or user_id == 0.

Do you know how to modify the code? Any help is appreciated. Thanks

Pranav C Balan · Accepted Answer · 2017-03-09 05:59:54Z

2

Check the value within the handler using a ternary operator. The each() method is completely unnecessary here since there is only single selected option.

$('.form-field-username').change(function() {
  $('.form-field-user-id').val(this.value == 0 ? '' : this.value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control form-field-username form-field-users">
<option class="form-field-first-option" value="0" selected="selected">Select User...</option>
<option value="1">Peter Fel</option> 
<option value="2">Mark Getty</option>
</select> 
<input name="user_id" id="user_id" class="form-control form-field-user-id" type="number">

edited Mar 9, 2017 at 5:59

answered Mar 9, 2017 at 5:54

Pranav C Balan

115k25 gold badges173 silver badges195 bronze badges

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

2 Comments

Adrian Over a year ago

I just have a question. How was your code able to find out the value of ":selected" without my $(this).find(":selected").each(function () {}); ??

Pranav C Balan Over a year ago

yes, $(this).val() or this.value holds the selected value

Nitesh Gupta · Accepted Answer · 2017-03-09 06:09:33Z

1

Set empty on first option value.

<select class="form-control form-field-username form-field-users">
  <option class="form-field-first-option" value="" selected="selected">Select User...</option>
  <option value="1">Peter Fel</option> 
  <option value="2">Mark Getty</option>
</select>

answered Mar 9, 2017 at 6:09

Nitesh Gupta

1086 bronze badges

Collectives™ on Stack Overflow

How to select input value from onchange using jQuery?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related