Select dropdown fails to trigger the jquery function

Question

When Y is selected, both of the input field should display "completed",and when user select "N", both of the input field should be blank but for some reason the code fail, any idea. Many Thanks

if($('.finished1').val(''))
{
	$('.finished').val('');
	
}

else if($('.finished1').val('Y'))
{
	$('.finished').val('completed');
	
}
else{
	$('.finished').val('');
	
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<select  class="finished1">
<option value="" ></option>
<option value="Y" > Y</option>
<option value="N" > N</option>
</select>

<table>
<td><input type="text" class="finished"></td>
<td><input type="text" class="finished"></td>
</table>

Where is your change Function ?

Creator
– Creator

2017-11-29 02:15:18 +00:00
Commented Nov 29, 2017 at 2:15 — Creator
– Creator, Commented Nov 29, 2017 at 2:15

Nobita · Accepted Answer · 2017-11-29 02:15:02Z

2

Try this code JSFiddle

$('.finished1').on('change',function(){
   if($(this).val() == 'N' || $(this).val() == ''){
     $('.finished').val('');
   }else{
     $('.finished').val('completed');
   }
});

answered Nov 29, 2017 at 2:15

Nobita

3301 silver badge12 bronze badges

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

1 Comment

nnnnnn Over a year ago

If you use this.value instead of $(this).val() you avoid two function calls, which is both easier to read and more efficient, and if you were to invert the if test and check for 'Y' instead you could avoid having to check the field value twice.

Pratansyah · Accepted Answer · 2017-11-29 02:16:25Z

2

You should use jquery's Change API to capture any change in the select input then you can check the selected value and respond accordingly

$('.finished1').on('change', function(){
  if($(this).val() == 'Y')
    $('.finished').val('completed');
  else
    $('.finished').val('');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<select  class="finished1">
<option value="" ></option>
<option value="Y" > Y</option>
<option value="N" > N</option>
</select>

<table>
<td><input type="text" class="finished"></td>
<td><input type="text" class="finished"></td>
</table>

answered Nov 29, 2017 at 2:16

Pratansyah

4572 silver badges14 bronze badges

Comments

Carl Edwards · Accepted Answer · 2017-11-29 02:20:05Z

2

You'll first need to evaluate the value of the select box through a change event handler and from there you can use switch statement to determine what to do from there.

$(function() {
  $('.finished1').on('change', function() {
    switch (this.value) {
      case 'Y':
        $('.finished').val('completed');
        break;
      case 'N':
      case: '':
        $('.finished').val('');
        break;
      default:
        //
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

<select class="finished1">
  <option value="" ></option>
  <option value="Y" > Y</option>
  <option value="N" > N</option>
</select>

<table>
  <td><input type="text" class="finished"></td>
  <td><input type="text" class="finished"></td>
</table>

edited Nov 29, 2017 at 2:20

answered Nov 29, 2017 at 2:15

Carl Edwards

14.6k12 gold badges70 silver badges131 bronze badges

4 Comments

nnnnnn Over a year ago

case 'N', '':? I don't think that does what you seem to think it does. Should be a fall-through.

Carl Edwards Over a year ago

Good catch. Fixed.

nnnnnn Over a year ago

Cool. Bonus points for saying this.value rather than $(this).val().

Carl Edwards Over a year ago

Hey man...whenever I have a chance to go native, I most certainly do.

Creator · Accepted Answer · 2017-11-29 02:21:34Z

1

You should use a function that will detect the change in dropdown selected item.

If its detected it will check the values again and if need chang it to what is selected.

$(function () {
    $('.finished1').change(function () {
         if($('.finished1').val(''))
         {
         $('.finished').val('');    
         }
         else if($('.finished1').val('Y'))
         {
         $('.finished').val('completed');   
         }
         else{
         $('.finished').val('');    
         }
    });
});

answered Nov 29, 2017 at 2:21

Creator

1,4994 gold badges17 silver badges30 bronze badges

Collectives™ on Stack Overflow

Select dropdown fails to trigger the jquery function

4 Answers 4

1 Comment

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related