?
Solved

Populate Form Fields based on Selection from Drop Down

Posted on 2012-09-21
5
Medium Priority
?
1,168 Views
Last Modified: 2012-11-08
Dear Experts

I would like to be able to populate auto populate form fields based on the selection from a drop down list.

I have a form drop down list field called pAdvertType and based on the selection made by the user I would like to be able to auto populate the form field called pAdvertPrice.

For example:

if the user selected the value 'Double' from the pAdvertType drop down I would like to populate the pAdvertPrice with a value of '50'

if the user selected the value 'Premier' from the pAdvertType drop down I would like to populate the pAdvertPrice with a value of '100'

Please below the code from the form.


    <tr>
      <td><p>Advert Type:</p></td>
      <td colspan="3"><label for="pAdvertType"></label>
        <select name="pAdvertType" id="pAdvertType">
          <option value="NA">Please Select...</option>
          <option value="Double">Member - Double</option>
          <option value="Premier">Member - Premier</option>
          <option value="Single">Member - Single</option>
          <option value="Rental">Member - Rental</option>

        </select></td>
    </tr>
      <tr>
      <td><p>Advert Price:</p></td>
      <td><label for="pAdvertPrice"></label>
        <input name="pAdvertPrice" type="text" id="pAdvertPrice" size="10" /></td>
      <td><p>VAT:</p></td>

Thank you for any help
0
Comment
Question by:grantballantyne
  • 3
  • 2
5 Comments
 
LVL 82

Expert Comment

by:hielo
ID: 38423784
try changing your SELECT to:
<select name="pAdvertType" id="pAdvertType" onchange="suggestPrice(this)">...</select>

then add the following javascript:
<script type="text/javascript">
function suggestPrice(sel)
{
     var prices={"NA":0,"Double":"50","Premier":"100","Single":"150","Rental":"200"};
     document.getElementById("pAdvertPrice").value=prices[sel.value];
}
</script>

Open in new window

0
 

Author Comment

by:grantballantyne
ID: 38425028
Thanks Hielo

This seems to work OK.

Is there anyway to extend this function to also populate another field called 'pAdvertVAT'?

The pAdvertVAT field is equal to pAdvertPrice * 0.20

I required - happy to start a new question for this

Thanks

Grant
0
 
LVL 82

Expert Comment

by:hielo
ID: 38425532
Is there anyway to extend this function to also populate another field called 'pAdvertVAT'?
Yes.  Be sure to give that other field a unique id:
<input type="text" name="pAdvertVAT" id="pAdvertVAT" value="" readonly="readonly" />
<script type="text/javascript">
function suggestPrice(sel)
{
     var prices={"NA":0,"Double":"50","Premier":"100","Single":"150","Rental":"200"};
     document.getElementById("pAdvertPrice").value=prices[sel.value];
     document.getElementById("pAdvertVAT").value=(parseInt(prices[sel.value],10)*0.20).toFixed(2);
}
</script>

Open in new window

0
 

Author Comment

by:grantballantyne
ID: 38426759
Thanks hielo

Its almost there.  See the code below that I am using to calculate pAdvertVat and pAdvertTotal

<script type="text/javascript">
function suggestPrice(sel)
{
     var prices={"NA":0,"Double":"229.17","Premier":"312.50","Single":"166.67","Rental":"33.34"};
      
     document.getElementById("pAdvertPrice").value=prices[sel.value];
        document.getElementById("pAdvertVAT").value=(parseInt(prices[sel.value],10)*0.20).toFixed(2);
         document.getElementById("pAdvertTotal").value=(parseInt(prices[sel.value],10)*1.20).toFixed(0);

      
      
}
</script>


The cost (ex VAT) of a 'Single' advert is £166.87 but for some reason the pAdvertVAT value is calculated to £33.20 where it should actually be £33.33?

Any idea why this is not accurate ?

Thanks again
0
 
LVL 82

Accepted Solution

by:
hielo earned 2000 total points
ID: 38430429
>Any idea why this is not accurate ?
parseInt() converts a number to an Integer.  So single is "seen" as 166.  In my example I used integers only, that's why I used parseInt().

You need to change those to parseFloat().

<script type="text/javascript">
function suggestPrice(sel)
{
     var prices={"NA":0,"Double":"229.17","Premier":"312.50","Single":"166.67","Rental":"33.34"};
      
     document.getElementById("pAdvertPrice").value=prices[sel.value];
        document.getElementById("pAdvertVAT").value=(parseFloat(prices[sel.value],10)*0.20).toFixed(2);
         document.getElementById("pAdvertTotal").value=(parseFloat(prices[sel.value],10)*1.20).toFixed(0);
}

</script>
<select name="pAdvertType" id="pAdvertType" onchange="suggestPrice(this)">
          <option value="NA">Please Select...</option>
          <option value="Double">Member - Double</option>
          <option value="Premier">Member - Premier</option>
          <option value="Single">Member - Single</option>
          <option value="Rental">Member - Rental</option>
        </select>
</select>
<input type="text" name="pAdvertPrice"	id="pAdvertPrice" 	value="" readonly="readonly"/>
<input type="text" name="pAdvertVAT"	id="pAdvertVAT" 	value="" readonly="readonly"/>
<input type="text" name="pAdvertTotal"	id="pAdvertTotal" 	value="" readonly="readonly"/>

Open in new window

0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

862 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question