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

Question

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?

Answer 1

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> 

Answer 2

$('#customerIsInDatabase select').on('change', function(){
    $('#CustomerIsNotInDatabase').find('input:text').val('');
});

$('#CustomerIsNotInDatabase input').on('keypress', function(){
    $('#customerIsInDatabase select').val('');
});

Fiddle

EDIT (solution based on comment to update the 'selected' attribute)

$('#customerIsInDatabase select').on('change', function(){
    var selectedVal = $(this).val();
    setSelected(selectedVal);   
    $('#CustomerIsNotInDatabase').find('input:text').val('');
});

$('#CustomerIsNotInDatabase input').on('keypress', function(){
    $('#customerIsInDatabase select').val('');
    setSelected('');
});

function setSelected(selVal) {
    $("select option").attr("selected",false);
    $("select option[value='" + selVal +"']").attr("selected",true);
}

Updated Fiddle