• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1200
  • Last Modified:

Populate Form Fields based on Selection from Drop Down

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
grantballantyne
Asked:
grantballantyne
  • 3
  • 2
1 Solution
 
hieloCommented:
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
 
grantballantyneAuthor Commented:
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
 
hieloCommented:
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
 
grantballantyneAuthor Commented:
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
 
hieloCommented:
>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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now