how to populate the textbox value on the selection of a combo box

Question

I have a form which has one combo box and three textboxes. The three textboxes are meant for the calculation purpose. The first textbox is the amount, second one is received and the last one is read only which shows the balance and the combo has the values - full, part and none. If the user selects full then the the received textbox should become read only and the amount entered in the amount textbox should come in the the received textbox. If the user selects part then the textbox should be available for the user to enter the amount. If the user selects none then the balance textbox should get populated with the value entered in the amount textbox.

<select id="pay" name="pay" tabindex="12">
    <option value=""></option>                           
    <option value="1">Full</option>                           
    <option value="2">Part</option>
    <option value="3">None</option>                            
</select>
<input type="text" id="amt" name="amt" value="" 
    size ="8" onblur="calculateText()" 
    style="background-color:transparent; color:blue; text-align:right" 
    tabindex="17"/>
<input type="text" id="resc" name="resc" value="" 
    disabled="disabled" size ="8" onblur="calculateText()"  
    tabindex="18"/>
 <input type="text" id="bal" name="bal"  
    readonly="readonly" value="" size ="8" 
    onblur="calculateText()" tabindex="19"/>

Added jsFiddle: http://jsfiddle.net/MackieeE/fjXzY/1/

Answer 1

please write following code in javascript frame in your jsfiddle and check if that is you want ..

function UpdatePay( n ) {

     if(n.options[n.selectedIndex].value==2){
         document.getElementById('amt').style.display='none';
        document.getElementById('resc').disabled = false;
        }
      if(document.getElementById('pay').value==3){
        document.getElementById('bal').value=document.getElementById('amt').value
        document.getElementById('resc').value=document.getElementById('amt').value
    }
    if(document.getElementById('pay').value==2){
        document.getElementById('bal').value=document.getElementById('resc').value
    }

}       document.getElementById('resc').value=document.getElementById('amt').value
    }
    if(document.getElementById('pay').value==2){
        document.getElementById('bal').value=document.getElementById('resc').value
    }

}

Answer 2

Here's something to get you started. It does more or less what you've asked, there are some usability issues because you haven't said what to do in every case, only a limited set of cases. I'll leave it up to you to get it working as you want.

<script>

function calculateText(el) {
  var form = el.form;
  var idx = form.pay.selectedIndex;

  if (idx <= 0) {
    form.reset();
    return;
  }

  if (form.pay.value == 1) {
    form.resc.disabled = true;
    form.resc.value = form.amt.value;
    form.bal.value = 0;

  } else if (form.pay.value == 2) {
    form.resc.disabled = false;
    form.bal.value = form.amt.value - form.resc.value;

  } else if (form.pay.value == 3) {
    form.resc.disabled = true;
    form.resc.value = 0;
    form.bal.value = form.amt.value;
  }
}

</script>

<form>
  <select name="pay" onchange="calculateText(this);">
    <option selected>Please select an option</option>                           
    <option value="1">Full                   
    <option value="2">Part
    <option value="3">None
  </select><br>
  Amount: <input name="amt" onblur="calculateText(this)"><br>
  Received: <input name="resc" disabled onblur="calculateText(this)"><br>
  Balance: <input name="bal" readonly><br>
  <input type="reset">
</form>