Dynamically set the VALUE of an text-INPUT element to default by clicking SELECT option

Chris Ha Published at Dev

Chris Ha

Ok, here is the first thing that what I want to do:

1) Lets say a user has been adding text to one or to both of the input fields. Now, if the user is either selecting option value 'Name1' or option value 'Name2' of the select field the input fields value have to be reseted. How can this be done?

<div id='CustomerIsNotInDatabase'>
    <input id='vlastname' name='ulastname' type='text' value=''></input>
    <input id='vfirstname' name='ufirstname' type='text' value=''></input>
</div>

<div id='customerIsInDatabase'>
<select>
    <option selected='true' value=''>Choose</option>
    <option value='Name1'></option>
    <option value='Name2'></option>
</select>
</div>

2) Now the other way round: If either option value 'Name1' or option value 'Name2' is selected: How can this value be reseted to the 1st option with value '' if the user adds text to an input field?

Zakaria Acharki

1. For the first question.

If the user is either selecting option value 'Name1' or option value 'Name2' of the select field the input fields value have to be reseted

You can use change event to handle the user change and reset input using val('') :

$('#customerIsInDatabase select').change(function(){
     if ( $(this).val() != '' )
     {
         $('#vlastname').val('');
         $('#vfirstname').val('');
     }
});

2. For the second question.

If either option value 'Name1' or option value 'Name2' is selected: How can this value be reseted to the 1st option with value '' if the user adds text to an input field?

You can use keyup event to detect user action when any key presed in input field :

$('#CustomerIsNotInDatabase input').keyup(function()
{
      $('#customerIsInDatabase select').val('').change();
});

Hope this helps.

Full Example :

$('#customerIsInDatabase select').change(function()
{
     if ( $(this).val() != '' )
     {
         $('#vlastname').val('');
         $('#vfirstname').val('');
     }
});


$('#CustomerIsNotInDatabase input').keyup(function()
{
      $('#customerIsInDatabase select').val('').change();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='CustomerIsNotInDatabase'>
    <input id='vlastname' name='ulastname' type='text' value=''></input>
    <input id='vfirstname' name='ufirstname' type='text' value=''></input>
</div>

<div id='customerIsInDatabase'>
<select>
    <option selected='true' value=''>Choose</option>
    <option value='Name1'>Name1</option>
    <option value='Name2'>Name2</option>
</select>
</div>

Collected from the Internet

Please contact [email protected] to delete if infringement.