title: Can I recalculate a form field without a reload?
body: <p>When a field in my form gets focus, I'd like a javascript function to be called that
  calculates a value for that field without my putting in a specific button to do that. </p>
  
  <p>Is this possible without causing the form to reload? </p>
  
  <p>I have thought about making the Amount field read-only, and some other ways of doing this, but I'm looking to see if changing the Quantity field could cause the Amount field to change either using onchange in the Quantity field or onfocus in the Amount field.</p>
  
  <pre><code>Purchase Tickets&lt;br&gt;                
  &lt;script type="text/javascript" language="JavaScript1.2"&gt;
  &lt;script type="text/javascript" language="JavaScript1.2"&gt;
  document.write(
  '&lt;form name="InvGenPayTickets" action="'+PostURL+'" 
  onsubmit="return validateForm();" method=GET&gt;');
  &lt;/script&gt;
  
  &lt;input type=hidden name="TplURL" value="GenPayCCInfo.html"&gt;
  &lt;input type=hidden name="CancelURL" value="Ooopsie.html"&gt;
  &lt;input type=hidden name="SuccessURL" value="Joanie.html"&gt;
  
  &lt;input type='hidden' name='TransDesc' id='TransDesc' 
  value="$_POST['TransDesc']; ?&gt;" /&gt;
  
  &lt;input type='text' name='Quantity' id='Quantity' /&gt; &lt;br /&gt;
  Amount&lt;br /&gt;
  $&lt;input type='text' name='Amount' id='Amount' /&gt;
  &lt;input type="submit" value="Next"&gt;
  &lt;br&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Edit:</p>
  
  <p>Here is the function that won't update. It is called if I use</p>
  
  <pre><code>&lt;input type='text' name='Quantity' 
       id='Quantity' onchange="return retTotalAmt();" /&gt; 
  </code></pre>
  
  <p>but the Amount field does not update. I am not able to update using a calc button either.</p>
  
  <pre><code>&lt;script type="text/javascript" language="JavaScript1.2"&gt;    
      function retTotalAmt()
      {
          alert("Got here.");
          var total_amt 
              = (document.getElementById('Quantity').value * ticketCost) 
                  + DonationAmount;    
          document.getElementById('Amount').value = total_amt;
      }    
  &lt;/script&gt;
  </code></pre>
  
  <p>Per request in comments:</p>
  
  <pre><code>&amp;nbsp;
  &lt;input type='text' name='Quantity' 
      id='Quantity' onchange="return retTotalAmt();" /&gt; 
  </code></pre>
  
  <p>Edit -- Show Problem</p>
  
  <pre><code>&lt;script type="text/javascript" language="JavaScript1.2"&gt;
  var ticketCost = 40.00;
  
  function EnterPage()
  {
  var currentTotalAmount = DonationAmount + ticketCost;
  //DonationAmount moved up to ticketCost's scope fixed problem.
  var DonationAmount = &lt;?php echo($_POST['DonationAmount']); ?&gt;;
  
  document.getElementById('DonationAmountField').value = DonationAmount.toFixed(2);
  document.getElementById('Quantity').value=1;
  document.getElementById('Amount').value = currentTotalAmount.toFixed(2);
  
  return;
  }
  </code></pre>
  
  <p></p>