www.webdeveloper.com
Results 1 to 13 of 13

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

  1. #1
    Join Date
    Feb 2012
    Posts
    64

    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!

  2. #2
    Join Date
    Nov 2007
    Posts
    409
    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;
    }

  3. #3
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    778
    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();
    }
    JavaScript: Learn | Validate | Compact

  4. #4
    Join Date
    Feb 2012
    Posts
    64
    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!

    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

  5. #5
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    778
    Quote Originally Posted by APD1993 View Post
    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();
    }
    Last edited by bionoid; 03-17-2012 at 10:39 AM.
    JavaScript: Learn | Validate | Compact

  6. #6
    Join Date
    Feb 2012
    Posts
    64

    Implementing Validation

    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

  7. #7
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    778
    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;
    }
    JavaScript: Learn | Validate | Compact

  8. #8
    Join Date
    Feb 2012
    Posts
    64
    Quote Originally Posted by bionoid View Post
    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?

  9. #9
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    778
    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;
    }
    Last edited by bionoid; 03-17-2012 at 02:47 PM.
    JavaScript: Learn | Validate | Compact

  10. #10
    Join Date
    Feb 2012
    Posts
    64
    Quote Originally Posted by bionoid View Post
    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 :/

  11. #11
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    778
    Quote Originally Posted by APD1993 View Post
    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.
    JavaScript: Learn | Validate | Compact

  12. #12
    Join Date
    Feb 2012
    Posts
    64
    Quote Originally Posted by bionoid View Post
    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?

  13. #13
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    778
    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;
    }
    JavaScript: Learn | Validate | Compact

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles