How can I get a value to be displayed in a text box based on a user selection?

I am trying to do a function that will perform automatic calculations based on user selections. I believe that the relevant values are stored in the array properly, but I am having trouble so that, for instance, if a user selects a template type from a drop down box, that the price associated with the template type is displayed in a text box. Here is my form code:

Code:

---

<form id="website" name="website" action="mailto:apd15@hotmail.co.uk" method="post" onsubmit="return ValidatePaymentDetails();">
 <p><b><u>Website Details Form</b></u></p>
 Website Template:
 <select id="templatetype" name="templatetype" onChange="getTotal()">
 <option>Select a Template Type</option>
 <option value = "con">Construction</option>
  <option value = "it">IT</option>
  <option value = "eng">Engineering</option>
    <option value = "pub">Public Services</option>
 </select><br>
Images? (£5 more per page):
<input type="radio" name="images" value="Yes"/>Yes<input type="radio" name="images" value="No"/>No<br>
 Number Of Pages Desired (10 Maximum) :
 <select name="pagenum">
 <option>Select A Number Of Pages</option>
 <option>1</option>
  <option>2</option>
  <option>3</option>
    <option>4</option>
    <option>5</option>
  <option>6</option>
  <option>7</option>
    <option>8</option>
      <option>9</option>
    <option>10</option>
 </select><br>
 Total Price:<input type="text" name="totalprice" id = "totalprice" readonly="readonly"><br>
 </form>

---

And here is my calculation JavaScript code so far:

Code:

---

function getTempPrice()
{
        var template_type = new Array();
        template_type[0]=10;
        template_type[1]=12;
        template_type[2]=14;
        template_type[3]=16;
       
        var tempPrice=0;
        var theForm = document.forms["website"];
        var selectedTemplate=theForm.elements["templatetype"];
        tempPrice = template_type[selectedTemplate.selectedIndex];
        alert (tempPrice);
        return tempPrice;
}

function getTotal()
{
        var webPrice = getTempPrice();
        var result=document.forms["website"]["totalprice"] = webPrice;
}

---

I would like the relevant price displayed in the "totalprice" text box, but I believe that a getElementByID line of code will be required, but I cannot seem to get it working when I tried.

Any help is appreciated! :)

Presuming your functions work like they look they do... this should work:

Code:

---

function getTotal()
{
        var webPrice = getTempPrice();
        document.getElementById('totalprice').value = webPrice;
        var result=document.forms["website"]["totalprice"] = webPrice;
}

---

I would even consider removing the getTempPrice function at this stage...

Code:

---

function getTempPrice()
{
        return [0, 10, 12, 14, 16][document['website']['templatetype'].selectedIndex];
}

function getTotal()
{
        document['website']['totalprice'].value = getTempPrice();
}

---

Thanks nap0leon!

I managed to get the answer to appear in a label, but the problem was that the function only seemed to work on Mozilla Firefox. However, I tried your coding and it worked so that the result appeared in the textbox! :D

Thanks for the advice, bionoid :)

However, it was my fault and I failed to mention that I was using this code to do automatic calculations and that was not the only set of numbers that needed to be gathered. As a result, I have several functions, primarily to store the values of the numbers based on the user selection in an array that can be accessed :)

Quote:

---

Originally Posted by APD1993

However, it was my fault and I failed to mention that I was using this code to do automatic calculations and that was not the only set of numbers that needed to be gathered. As a result, I have several functions, primarily to store the values of the numbers based on the user selection in an array that can be accessed :)

---

Once simplified, you might find you don't need the extra functions either.

For my own sanities sake... (using dot notation)

Code:

---

function getTempPrice()
{
        return [0, 10, 12, 14, 16][document.website.templatetype.selectedIndex];
}

function getTotal()
{
        document.website.totalprice.value = getTempPrice();
}

---

So I now have it so that the calculation can be done, but I was wondering if someone could help me. At the moment, my calculation has a slight problem where if I select a website template type, whether images are needed and the page number, the price is calculated automatically. However, if I then change my website template type to the "Select Template Type" value and I have "Yes" selected for the images, the total of the number of pages and if the Images "Yes" option is selected and calculated.

For instance:

I change back so that no website template is chosen, but I have selected 4 pages and the Images Radio Button that reads "Yes" is clicked, then 20 is displayed, when I want it to be 0 since no website template has been selected. Could anyone help me? I would think that it would involve an IF statement, but I am not sure. Here is my updated code:

Code:

---

<form id="website" name="website" action="mailto:apd15@hotmail.co.uk" method="post" onchange="getTotal()">
 <p><b><u>Website Details Form</b></u></p>
 Website Template:
 <select id="templatetype" name="templatetype" onChange="getTotal()">
 <option>Select a Template Type</option>
 <option value = "con">Construction</option>
  <option value = "it">IT</option>
  <option value = "eng">Engineering</option>
    <option value = "pub">Public Services</option>
 </select><br>
Images? (£5 more per page):
<input type="radio" name="images" value="Yes" onChange="getTotal()"/>Yes<input type="radio" name="images" value="No" checked onChange="getTotal()"/>No<br>
 Number Of Pages Desired (10 Maximum) :
 <select name="pagenum" id="pagenum" onChange="getTotal()">
 <option>Select A Number Of Pages</option>
 <option>1</option>
  <option>2</option>
  <option>3</option>
    <option>4</option>
    <option>5</option>
  <option>6</option>
  <option>7</option>
    <option>8</option>
      <option>9</option>
    <option>10</option>
 </select><br>
 Total Price:<input type="text" name="totalprice" id = "totalprice" readonly="readonly"><br>
  <div id="totalPrice"></div>
  </form>

---

Code:

---

function getTempPrice()
{
        var template_type = new Array();
        template_type[0]=0;
        template_type[1]=10;
        template_type[2]=12;
        template_type[3]=14;
        template_type[4]=16;
       
        var tempPrice=0;
        var theForm = document.forms["website"];
        var selectedTemplate=theForm.elements["templatetype"];
        tempPrice = template_type[selectedTemplate.selectedIndex];
        return tempPrice;
}
function getPages()
{
        var page_number = new Array();
        page_number[0]=0;
        page_number[1]=1;
        page_number[2]=2;
        page_number[3]=3;
        page_number[4]=4;
        page_number[5]=5;
        page_number[6]=6;
        page_number[7]=7;
        page_number[8]=8;
        page_number[9]=9;
        page_number[10]=10;
       
        var pageNum=0;
        var theForm = document.forms["website"];
        var selectedPage=theForm.elements["pagenum"];
        pageNum=page_number[selectedPage.selectedIndex];
        return pageNum;
}
function getImages()
{
var images = new Array();
images["Yes"]=5;
images["No"]=0;
var imagePrice=0;
var theForm = document.forms["website"];
var selectedImage = theForm.elements["images"];
for (var i=0; i< selectedImage.length; i++)
{
        if (selectedImage[i].checked)
        {
                imagePrice = images[selectedImage[i].value];
                break
        }
}
return imagePrice

}
function getTotal()
{
        if (getTempPrice!==0)
        {
        var webPrice = (getTempPrice()*getPages())+(getPages()*getImages());
        document.getElementById('totalprice').value=webPrice;
        var result=document.forms["website"]["totalprice"] = webPrice;
        }
        if (getTempPrice===0)
        {
                webPrice=0;
        }
}

---

Any help is appreciated! :)

Summary: If no template type is chosen, but the Images radio button that reads Yes is selected, then the price stays at £0

From what I have tested, you can replace all your functions with this...

Code:

---

function getTotal()
{
        var
                form      = document.website,
                temp_price = [0, 10, 12, 14, 16][form.templatetype.selectedIndex],
                page_count = form.pagenum.selectedIndex,
                has_images = form.images[0].checked ? 5 : 0;

        form.totalprice.value = temp_price ? ((temp_price * page_count) + (page_count * has_images)) : 0;
}

---

Quote:

---

Originally Posted by bionoid

From what I have tested, you can replace all your functions with this...

Code:

---

function getTotal()
{
        var
                form      = document.website,
                temp_price = [0, 10, 12, 14, 16][form.templatetype.selectedIndex],
                page_count = form.pagenum.selectedIndex,
                has_images = form.images[0].checked ? 5 : 0;

        form.totalprice.value = temp_price ? ((temp_price * page_count) + (page_count * has_images)) : 0;
}

---

---

Thank you :)

Is there a way that I could use it so that if the user clicks on the Next button on the form, that if the total price is equal to 0, then an error message will appear, otherwise a confirmation box appears, allowing the user to continue to another page? :)

Try this...

Code:

---

<form id="website" name="website" action="mailto:apd15@hotmail.co.uk" method="post" onsubmit="getTotal(); return confirmPrice(this);">
        <p><b><u>Website Details Form</b></u></p>
        Website Template:
        <select id="templatetype" name="templatetype" onchange="getTotal()">
                <option>Select a Template Type</option>
                <option value = "con">Construction</option>
                <option value = "it">IT</option>
                <option value = "eng">Engineering</option>
                <option value = "pub">Public Services</option>
        </select><br />
        Images? (&#163;5 more per page):
        <input type="radio" name="images" value="Yes" onchange="getTotal()"/>Yes<input type="radio" name="images" value="No" checked="checked" onchange="getTotal()" />No<br />
        Number Of Pages Desired (10 Maximum) :
        <select name="pagenum" id="pagenum" onchange="getTotal()">
                <option>Select A Number Of Pages</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
                <option>6</option>
                <option>7</option>
                <option>8</option>
                <option>9</option>
                <option>10</option>
        </select><br />
        Total Price:<input type="text" name="totalprice" id = "totalprice" readonly="readonly" /><br />
        <div id="totalPrice"></div>
        <input type="submit" />
</form>

---

Code:

---

function getTotal()
{
        var
                form      = document.website,
                temp_price = [0, 10, 12, 14, 16][form.templatetype.selectedIndex],
                page_count = form.pagenum.selectedIndex,
                has_images = form.images[0].checked ? 5 : 0;

        form.totalprice.value = temp_price ? ((temp_price * page_count) + (page_count * has_images)) : 0;
}

function confirmPrice(form)
{
        if (parseFloat(0 + form.totalprice.value, 10)) {
                return confirm('Are you sure?');
        } else {
                alert('Error Message!');
        }
        return false;
}

---

Quote:

---

Originally Posted by bionoid

Try this...

Code:

---

<form id="website" name="website" action="mailto:apd15@hotmail.co.uk" method="post" onsubmit="getTotal(); return confirmPrice(this);">
        <p><b><u>Website Details Form</b></u></p>
        Website Template:
        <select id="templatetype" name="templatetype" onchange="getTotal()">
                <option>Select a Template Type</option>
                <option value = "con">Construction</option>
                <option value = "it">IT</option>
                <option value = "eng">Engineering</option>
                <option value = "pub">Public Services</option>
        </select><br />
        Images? (£5 more per page):
        <input type="radio" name="images" value="Yes" onchange="getTotal()"/>Yes<input type="radio" name="images" value="No" checked="checked" onchange="getTotal()" />No<br />
        Number Of Pages Desired (10 Maximum) :
        <select name="pagenum" id="pagenum" onchange="getTotal()">
                <option>Select A Number Of Pages</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
                <option>6</option>
                <option>7</option>
                <option>8</option>
                <option>9</option>
                <option>10</option>
        </select><br />
        Total Price:<input type="text" name="totalprice" id = "totalprice" readonly="readonly" /><br />
        <div id="totalPrice"></div>
        <input type="submit" />
</form>

---

Code:

---

function getTotal()
{
        var
                form      = document.website,
                temp_price = [0, 10, 12, 14, 16][form.templatetype.selectedIndex],
                page_count = form.pagenum.selectedIndex,
                has_images = form.images[0].checked ? 5 : 0;

        form.totalprice.value = temp_price ? ((temp_price * page_count) + (page_count * has_images)) : 0;
}

function confirmPrice(form)
{
        if (parseFloat(0 + form.totalprice.value, 10)) {
                return confirm('Are you sure?');
        } else {
                alert('Error Message!');
        }
        return false;
}

---

---

Sadly, it didn't seem to work for me :/

Quote:

---

Originally Posted by APD1993

Sadly, it didn't seem to work for me :/

---

What doesn't work?

I have made changes to the html section as well if you didn't try it.

Otherwise, I tried it in IE, Firefox and Chrome without error.

Quote:

---

Originally Posted by bionoid

What doesn't work?

I have made changes to the html section as well if you didn't try it.

Otherwise, I tried it in IE, Firefox and Chrome without error.

---

Oh, I got it working, I was just being stupid :)

I was writing "return confirmPrice(form)" in the literal sense to my "Next" button rather than writing "return confirmPrice(website)" :)

I hate to pester you more, but is there a way that it can determine which selection (e.g. Website Template or Page Number) has been left blank, so I can provide more specific error messages? :)

If you haven't made any changes to the confirmPrice function...

Code:

---

function confirmPrice(form)
{
        if (parseFloat(0 + form.totalprice.value, 10)) {
                return confirm('Are you sure?');
        } else {
                if (!form.templatetype.selectedIndex) {alert('Please select a Template!');} else
                if (!form.pagenum.selectedIndex)      {alert('Please select how many pages you want!');} else
                                                      {alert('Unknown Error!');}
        }
        return false;
}

---