Webmaster-Talk.com > Coding Talk > JavaScript Forum > Update field based on what is selected

Reply
Update field based on what is selected
Old 10-07-2009, 11:46 AM Update field based on what is selected
WebTraffic's Avatar
Extreme Talker

Posts: 215
Name: Brandon
Trades: 0
Talkupation: WebTraffic is on a distinguished road
I am trying to create this form to update a field when a certain item is selected from a dropdown menu. I would like to have it to where when heat pump is selected from heating type, the AFUE field that originally has a value of 80 needs to be updated to 7.7.

I would also like for the wording to be changed... Instead of having it say Current AFUE or HSPF, have it to where when a Single Speed Furnace or Variable Speed Furnace then it says AFUE below it, when Heat Pump is selected then it says HSPF, and if Electric Heat is selected do not have anything or even delete the whole field.

A demo of this can be found here

This is my form:

HTML Code:
<table border="0" cellspacing="0" cellpadding="0" width="80%" align="center">
<tbody>
<tr>
<td><form id="form1" action="http://system-selector.ingramswaterandair.com/index.php/system-selector/heating-a-cooling/system-calculator" method="post"> <label> </label>
<div>
<p align="center"><img src="http://www.webmaster-talk.com/images/zone_map.gif" border="0" alt="Zone Map" width="558" height="495" /><br /> Please Select Your Climate Zone using the map above:             <select id="zone" name="zone"> <option value="Zone 1">Zone 1</option> <option value="Zone 2">Zone 2</option> <option value="Zone 3">Zone 3</option> <option value="Zone 4">Zone 4</option> <option value="Zone 5">Zone 5</option> </select></p>
<p>Please Enter The Square Footage of your home:             <input id="squarefeet" name="squarefeet" type="text" /> Square Feet.</p>
<p>Cooling Type             <label> <select id="coolingtype" name="coolingtype"> <option value="ac">A/C</option> <option value="acvarspeed">A/C Variable Speed</option> </select> </label></p>
<p>Current Seer Rating            
  <select id="seerrating" name="seerrating">
    <option value="0">Please Select</option>
    <option value="8">8 Seer</option>
    <option value="10">10 Seer</option> <option value="12">12 Seer</option> <option value="13">13 Seer</option> <option value="14">14 Seer</option> <option value="15">15 Seer</option> <option value="16">16 Seer</option> <option value="18">18 Seer</option>
  </select></p>
<p>If you do not know your  Seer Rating,  select the year your system was installed
  <select id="year" name="year">
    <option value="0" selected="selected">Select</option>
    <option value="13.0">2001 to 2006</option>
    <option value="10.8">2000</option>
    <option value="10.8">1999</option>
    <option value="10.7">1998</option>
    <option value="10.6">1997</option>
    <option value="10.6">1996</option>
    <option value="10.5">1995</option>
    <option value="10.4">1994</option>
    <option value="10.4">1993</option>
    <option value="10.3">1992</option>
    <option value="9.4">1991</option>
    <option value="9.2">1990</option>
    <option value="9.1">1989</option>
    <option value="8.9">1988</option>
    <option value="8.8">1987</option>
    <option value="8.7">1986</option>
    <option value="8.7">1985</option>
    <option value="8.5">1984</option>
    <option value="8.4">1983</option>
    <option value="8.3">1982</option>
    <option value="7.7">1981</option>
    <option value="7.5">1980</option>
    <option value="7.4">1979</option>
    <option value="7.3">1978</option>
    <option value="7.1">1977</option>
    <option value="7.0">1976</option>
    <option value="7.0">Older than 1976</option>
              </select>
</p>
<p>
  <label></label>
Heating Type            
<select id="heatingtype" name="heatingtype">
  <option value="singlespeedfurnace" selected>Single Speed Furnace</option>
  <option value="varspeedfurnace">Variable Speed Furnace</option>
  <option value="heatpump">Heat Pump</option>
  <option value="electricheat">Electric Heat</option>
</select>
</p>
<p>
  <label>Current <a href="#" onclick="ReadMore=window.open('http://system-selector.ingramswaterandair.com/afue.htm','ReadMore','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=no,width=350,height=200'); return false;">AFUE</a>
 or <a href="#" onclick="ReadMore=window.open('http://system-selector.ingramswaterandair.com/hspf.htm','ReadMore','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=no,width=350,height=200'); return false;">HSPF</a></label>
  <input id="afue" name="afue" size="1" type="text" value="80" />
  <br>
Gas Furnace Efficiency is rated in AFUEs, Heat Pump Efficiency is rated in HSPF. </p>
<p><a href="#" onclick="ReadMore=window.open('http://system-selector.ingramswaterandair.com/electricrate.htm','ReadMore','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=no,width=350,height=200'); return false;">Electric Rate </a>
  <input id="electricrate" name="electricrate" size="2" type="text" value="15.5" />
  cents/kWhr<br /> <span class="style1">To get this, divide your monthly bill ($) by by the total usage (kWhrs)</span></p>
<p><a href="#" onclick="ReadMore=window.open('http://system-selector.ingramswaterandair.com/gasrate.htm','ReadMore','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=no,width=350,height=200'); return false;">Gas Rate </a>
  <input id="gasrate" name="gasrate" size="2" type="text" value="107" />
   cents/therm<br />
   <span class="style1">To get this, divide your monthly bill ($) by by the total usage (therms)</span></p>
<p><label></label> <label> <input id="Calculate" name="Calculate" type="submit" value="Calculate" /> </label></p>
</div>
<p><label></label></p>
<label></label>
<p> </p>
</form></td>
</tr>
</tbody>
</table>
<!-- .style1 {font-size: 10px} -->
Please help I don't know what I'm doing

Brandon
__________________
Coding is just like a woman. If you don't do something exactly right, it complains.
Last edited by WebTraffic; 10-07-2009 at 12:01 PM..
WebTraffic is offline
Reply With Quote
View Public Profile
 
 
When You Register, These Ads Go Away!
Old 10-07-2009, 02:19 PM Re: Update field based on what is selected
WebTraffic's Avatar
Extreme Talker

Posts: 215
Name: Brandon
Trades: 0
Talkupation: WebTraffic is on a distinguished road
This is what I have dug into and figured out... I have to use an onChange...

I have a javascript file created called formcontrol.js which has this in it.. (I do not know if this is correct). I believe I have the right idea of what to do, yet it still isnt working. Can anyone please look at this and tell me what I'm doing wrong?

HTML Code:
<script type="text/javascript">

function UpdateAFUE()
{     form=document.form1;

    if (heatingtype=="singlespeedfurnace") {              // Single Speed Furnace
        form.afue.value=80;
        form.StandardName.value="AFUE: "
    }    
    else if (heatingtype=="variablespeedfurnace") {            // Variable Speed Furnace
        form.afue.value=80;
        form.StandardName.value="AFUE: "
    }
    else if (heatingtype=="heatpump") {            // Heat Pump
        form.afue.value=7.7;
        form.StandardName.value="HSPF: "
    }
    else if (heatingtype=="electricheat") {            // Electric Heat
        form.afue.value="";
        form.StandardName.value=""
    }
    
}

</script>
I have put in my html form onChange="UpdateAFUE()" on the heating type field, so that when this is changed it looks in that javascript file and attempts to update the afue field.

HTML Code:
<script language="JavaScript" Src="formcontrol.js"></script>
<table border="0" cellspacing="0" cellpadding="0" width="80%" align="center">
<tbody>
<tr>
<td><form id="form1" action="http://system-selector.ingramswaterandair.com/index.php/system-selector/heating-a-cooling/system-calculator" method="post"> <label> </label>
<div>
<p align="center"><img src="http://www.webmaster-talk.com/images/zone_map.gif" border="0" alt="Zone Map" width="558" height="495" /><br /> Please Select Your Climate Zone using the map above:             <select id="zone" name="zone"> <option value="Zone 1">Zone 1</option> <option value="Zone 2">Zone 2</option> <option value="Zone 3">Zone 3</option> <option value="Zone 4">Zone 4</option> <option value="Zone 5">Zone 5</option> </select></p>
<p>Please Enter The Square Footage of your home:             <input id="squarefeet" name="squarefeet" type="text" /> Square Feet.</p>
<p>Cooling Type             <label> <select id="coolingtype" name="coolingtype"> <option value="ac">A/C</option> <option value="acvarspeed">A/C Variable Speed</option> </select> </label></p>
<p>Current Seer Rating             
  <select id="seerrating" name="seerrating">
    <option value="0">Please Select</option>
    <option value="8">8 Seer</option> 
    <option value="10">10 Seer</option> <option value="12">12 Seer</option> <option value="13">13 Seer</option> <option value="14">14 Seer</option> <option value="15">15 Seer</option> <option value="16">16 Seer</option> <option value="18">18 Seer</option> 
  </select></p>
<p>If you do not know your  Seer Rating,  select the year your system was installed 
  <select id="year" name="year">
    <option value="0" selected="selected">Select</option>
    <option value="13.0">2001 to 2006</option>
    <option value="10.8">2000</option>
    <option value="10.8">1999</option>
    <option value="10.7">1998</option>
    <option value="10.6">1997</option>
    <option value="10.6">1996</option>
    <option value="10.5">1995</option>
    <option value="10.4">1994</option>
    <option value="10.4">1993</option>
    <option value="10.3">1992</option>
    <option value="9.4">1991</option>
    <option value="9.2">1990</option>
    <option value="9.1">1989</option>
    <option value="8.9">1988</option>
    <option value="8.8">1987</option>
    <option value="8.7">1986</option>
    <option value="8.7">1985</option>
    <option value="8.5">1984</option>
    <option value="8.4">1983</option>
    <option value="8.3">1982</option>
    <option value="7.7">1981</option>
    <option value="7.5">1980</option>
    <option value="7.4">1979</option>
    <option value="7.3">1978</option>
    <option value="7.1">1977</option>
    <option value="7.0">1976</option>
    <option value="7.0">Older than 1976</option>
              </select>
</p>
<p>
  <label></label>
Heating Type             
<select id="heatingtype" name="heatingtype" onChange="UpdateAFUE()"> 
  <option value="singlespeedfurnace" selected>Single Speed Furnace</option> 
  <option value="varspeedfurnace">Variable Speed Furnace</option> 
  <option value="heatpump">Heat Pump</option> 
  <option value="electricheat">Electric Heat</option>
</select>
</p>
<p>


  <label>Current <a href="#" onclick="ReadMore=window.open('http://system-selector.ingramswaterandair.com/afue.htm','ReadMore','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=no,width=350,height=200'); return false;">AFUE</a>
 or <a href="#" onclick="ReadMore=window.open('http://system-selector.ingramswaterandair.com/hspf.htm','ReadMore','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=no,width=350,height=200'); return false;">HSPF</a></label>
  <input id="afue" name="afue" size="1" type="text"/>
  <br>
Gas Furnace Efficiency is rated in AFUEs, Heat Pump Efficiency is rated in HSPF. </p>
<p><a href="#" onclick="ReadMore=window.open('http://system-selector.ingramswaterandair.com/electricrate.htm','ReadMore','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=no,width=350,height=200'); return false;">Electric Rate </a>
  <input id="electricrate" name="electricrate" size="2" type="text" value="15.5" /> 
  cents/kWhr<br /> <span class="style1">To get this, divide your monthly bill ($) by by the total usage (kWhrs)</span></p>
<p><a href="#" onclick="ReadMore=window.open('http://system-selector.ingramswaterandair.com/gasrate.htm','ReadMore','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=no,width=350,height=200'); return false;">Gas Rate </a>
  <input id="gasrate" name="gasrate" size="2" type="text" value="107" />
   cents/therm<br /> 
   <span class="style1">To get this, divide your monthly bill ($) by by the total usage (therms)</span></p>
<p><label></label> <label> <input id="Calculate" name="Calculate" type="submit" value="Calculate" /> </label></p>
</div>
<p><label></label></p>
<label></label>
<p> </p>
</form></td>
</tr>
</tbody>
</table>
<!-- .style1 {font-size: 10px} -->
__________________
Coding is just like a woman. If you don't do something exactly right, it complains.
Last edited by WebTraffic; 10-07-2009 at 02:20 PM..
WebTraffic is offline
Reply With Quote
View Public Profile
 
Reply     « Reply to Update field based on what is selected
 
Previous Thread | Next Thread Webmaster-Talk.com > Coding Talk > JavaScript Forum > Update field based on what is selected

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off


Webmaster Resources Marketplace:
Software Development Company | Webhosting.UK.com | Text Link Brokers | Dedicated Server Hosting | Managed Hosting 


   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML

 



Page generated in 0.11022 seconds with 13 queries