5 Replies - 4193 Views - Last Post: 24 April 2012 - 07:50 PM

#1 mmpabc  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 12-April 12

Need help to show value of selected item (dropdown) in text box

Posted 12 April 2012 - 04:55 PM

I am new to javascript and programming in general. What I am trying to do is make a certain price display in the item1 test box when a certain hand tool is selected from the drop down menu. I also need it to add shipping cost and display that in the shipping text box. This is what I have so far. Thanks in advanced

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>
     Project 2
    </title>    
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="content-language" content="en-us" />
    <link rel="stylesheet" href="../jsfiles/js_styles.css" type="text/css" />
    
<script type="text/javascript">
/* <![CDATA[ */
function checkForNumber(fieldValue) {
	var numberCheck = isNaN(fieldValue);
	if (numberCheck == true) {
		window.alert("You must enter a numeric value!");
		return false;
		}

function Calculate(fieldValue) {
 var totalShipping
 var payamount = form.item1.value;
 if (document.form.saw.selected)
 Saw = 20
 item1 = saw
 }
 

/* ]]> */
</script>
</head>

  <body>

<h1>Purchase Order</h1>
<form action="FormProcessor.html" method="get" enctype="application/x-www-form-urlencoded" onsubmit="return confirmSubmit();" onreset="return confirmReset();">    
<h3>Products</h3>
<table>
<tr>
	<td>	
<p>Hand Tools <br />$20.00</p>
	</td>
	<td>

<select name="hand_tool" size="1">
			<option value="hand_tool">Hand Tool</option>
			<option value="saw">Saw</option>
			<option value="hammer">Hammer</option>
			<option value="screwdriver">Screwdriver</option>
			<option value="wrench">Wrench</option>
			<option value="pliers">Pliers</option>
			</select>
	</td>
	<td>
	<p>Power Tools <br />$30.00</p>
	</td>
	<td>			
	<select name="power_tool" size="1">
			<option value="power_tool">Power Tool</option>

			<option value="circular_saw">Circular Saw</option>
			<option value="sabre_saw">Sabre Saw</option>
			<option value="drill">Drill</option>
			<option value="belt_sander">Belt Sander</option>
			<option value="table_saw">Table Saw</option>
		</select>

	</td>	
</tr>
</table>
	
<h3>Shipping Fees</h3>
<table>
	<tr>
	<td>Item 1: <input type="text" name="item1" value="" onchange="calculate();" /></td>
	<td>Item 2: <input type="text" name="itme2" value="" onchange="calculate();" /></td>
	</tr>

	<tr>
	<td>Shipping: <input type="text" name="shipping" value="" /></td>
	<td>Total: <input type="text" name="total" value="" /></td>
	</tr> 
</table> 
<h3>Customer Information</h3>
	<p>First Name
		<input type="text" name="first_name" value="FirstName" onclick="document.forms[0].first_name.value = '';" onchange="confirmSubmit();"/>  
	Last Name
		<input type="text" name="last_name" value="LastName" onclick="document.forms[0].last_name.value = '';" onchange="confirmSubmit();" /></p>

	<p>Street Address 1 
		<input type="text" name="address1" value="Address1" onclick="document.forms[0].address1.value = '';" onchange="confirmSubmit();" /></p>
	<p>City 
		<input type="text" name="city" value="City" onclick="document.forms[0].city.value = '';" onchange="confirmSubmit();" />
	State 
		<input type="text" name="state" value="State" onclick="document.forms[0].state.value = '';" onchange="confirmSubmit();" />
	Zip 
		<input type="text" name="zip" value="Zip" onchange="return checkForNumber(this.value);" onclick="document.forms[0].zip.value = '';" /></p>
	<p>Phone
		<input type="text" name="phone" value="Phone" onchange="return checkForNumber(this.value);" onclick="document.forms[0].phone.value = '';" />
	Fax
		<input type="text" name="fax" value="Fax" onclick="document.forms[0].fax.value = '';" onchange="return checkForNumber(this.value);" /></p>

	
	<p>Payment Method? 
	<input type="radio" name="credit_card" />Visa
	
	<input type="radio" name="credit_card" />MasterCard
	
	<input type="radio" name="credit_card" />American Express</p>
	<p>Credit Card Number<input type="text" name="cardNumber" value="CardNumber" size="50" onclick="document.forms[0].cardNumber.value = '';" onchange="return checkForNumber(this.value);" /></p>

<table>
<tr>
	<td>	
<p>Expiration Month</p>
	</td>

	<td>
	<select name="month" size="1" style="width: 200px">
			<option value="months">Month</option>
			<option value="january">January (1)</option>
			<option value="february">February (2)</option>
			<option value="march">March (3)</option>
			<option value="april">April (4)</option>

			<option value="may">May (5)</option>
			<option value="june">June (6)</option>
			<option value="july">July (7)</option>
			<option value="august">August (8)</option>
			<option value="september">September (9)</option>
			<option value="october">October (10)</option>

			<option value="november">November (11)</option>
			<option value="december">December (12)</option>
			</select>
	</td>
	<td>
	
	<p>Expiration Year</p>
	</td>

	<td>			
	<select name="expiration" size="1">
			<option value="2012">2012</option>
			<option value="2013">2013</option>
			<option value="2014">2014</option>
			<option value="2015">2015</option>
			<option value="2016">2016</option>
			<option value="2017">2017</option>
		</select>
	</td>	
</tr>
</table>

<p><input type="image" alt="Graphical image of a submit button" src="submitButton.gif" onchange="confirmSubmit()" /></p>
<p><input type="reset" value="Reset Purchase Order Form" onchange="confirmReset();" /></p>    
</form>    

  </body>
  </html>


 


Is This A Good Question/Topic? 0
  • +

Replies To: Need help to show value of selected item (dropdown) in text box

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3577
  • View blog
  • Posts: 10,442
  • Joined: 08-June 10

Re: Need help to show value of selected item (dropdown) in text box

Posted 12 April 2012 - 10:21 PM

now that we know what you intend, what about the problem (besides the case-sesitivity issues)?
Was This Post Helpful? 0
  • +
  • -

#3 rajesh.kakawat  Icon User is offline

  • New D.I.C Head

Reputation: 5
  • View blog
  • Posts: 43
  • Joined: 03-January 11

Re: Need help to show value of selected item (dropdown) in text box

Posted 12 April 2012 - 10:45 PM

explain clearly what do you want

This post has been edited by rajesh.kakawat: 12 April 2012 - 10:48 PM

Was This Post Helpful? 0
  • +
  • -

#4 ellaandcodeysdaddy  Icon User is offline

  • New D.I.C Head

Reputation: -3
  • View blog
  • Posts: 19
  • Joined: 21-March 12

Re: Need help to show value of selected item (dropdown) in text box

Posted 15 April 2012 - 01:39 PM

I'm still fairly new to these forums and I usually don't use forms however I don't really see anything to update the item1 box. I see there's an onchange on the item1 however I'm not showing an onchange on the select list or in the calculate function. It looks like the calculate function only takes the data from the item1 field.

View Postmmpabc, on 12 April 2012 - 04:55 PM, said:

I am new to javascript and programming in general. What I am trying to do is make a certain price display in the item1 test box when a certain hand tool is selected from the drop down menu. I also need it to add shipping cost and display that in the shipping text box. This is what I have so far. Thanks in advanced

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>
     Project 2
    </title>    
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="content-language" content="en-us" />
    <link rel="stylesheet" href="../jsfiles/js_styles.css" type="text/css" />
    
<script type="text/javascript">
/* <![CDATA[ */
function checkForNumber(fieldValue) {
	var numberCheck = isNaN(fieldValue);
	if (numberCheck == true) {
		window.alert("You must enter a numeric value!");
		return false;
		}

function Calculate(fieldValue) {
 var totalShipping
 var payamount = form.item1.value;
 if (document.form.saw.selected)
 Saw = 20
 item1 = saw
 }
 

/* ]]> */
</script>
</head>

  <body>

<h1>Purchase Order</h1>
<form action="FormProcessor.html" method="get" enctype="application/x-www-form-urlencoded" onsubmit="return confirmSubmit();" onreset="return confirmReset();">    
<h3>Products</h3>
<table>
<tr>
	<td>	
<p>Hand Tools <br />$20.00</p>
	</td>
	<td>

<select name="hand_tool" size="1">
			<option value="hand_tool">Hand Tool</option>
			<option value="saw">Saw</option>
			<option value="hammer">Hammer</option>
			<option value="screwdriver">Screwdriver</option>
			<option value="wrench">Wrench</option>
			<option value="pliers">Pliers</option>
			</select>
	</td>
	<td>
	<p>Power Tools <br />$30.00</p>
	</td>
	<td>			
	<select name="power_tool" size="1">
			<option value="power_tool">Power Tool</option>

			<option value="circular_saw">Circular Saw</option>
			<option value="sabre_saw">Sabre Saw</option>
			<option value="drill">Drill</option>
			<option value="belt_sander">Belt Sander</option>
			<option value="table_saw">Table Saw</option>
		</select>

	</td>	
</tr>
</table>
	
<h3>Shipping Fees</h3>
<table>
	<tr>
	<td>Item 1: <input type="text" name="item1" value="" onchange="calculate();" /></td>
	<td>Item 2: <input type="text" name="itme2" value="" onchange="calculate();" /></td>
	</tr>

	<tr>
	<td>Shipping: <input type="text" name="shipping" value="" /></td>
	<td>Total: <input type="text" name="total" value="" /></td>
	</tr> 
</table> 
<h3>Customer Information</h3>
	<p>First Name
		<input type="text" name="first_name" value="FirstName" onclick="document.forms[0].first_name.value = '';" onchange="confirmSubmit();"/>  
	Last Name
		<input type="text" name="last_name" value="LastName" onclick="document.forms[0].last_name.value = '';" onchange="confirmSubmit();" /></p>

	<p>Street Address 1 
		<input type="text" name="address1" value="Address1" onclick="document.forms[0].address1.value = '';" onchange="confirmSubmit();" /></p>
	<p>City 
		<input type="text" name="city" value="City" onclick="document.forms[0].city.value = '';" onchange="confirmSubmit();" />
	State 
		<input type="text" name="state" value="State" onclick="document.forms[0].state.value = '';" onchange="confirmSubmit();" />
	Zip 
		<input type="text" name="zip" value="Zip" onchange="return checkForNumber(this.value);" onclick="document.forms[0].zip.value = '';" /></p>
	<p>Phone
		<input type="text" name="phone" value="Phone" onchange="return checkForNumber(this.value);" onclick="document.forms[0].phone.value = '';" />
	Fax
		<input type="text" name="fax" value="Fax" onclick="document.forms[0].fax.value = '';" onchange="return checkForNumber(this.value);" /></p>

	
	<p>Payment Method? 
	<input type="radio" name="credit_card" />Visa
	
	<input type="radio" name="credit_card" />MasterCard
	
	<input type="radio" name="credit_card" />American Express</p>
	<p>Credit Card Number<input type="text" name="cardNumber" value="CardNumber" size="50" onclick="document.forms[0].cardNumber.value = '';" onchange="return checkForNumber(this.value);" /></p>

<table>
<tr>
	<td>	
<p>Expiration Month</p>
	</td>

	<td>
	<select name="month" size="1" style="width: 200px">
			<option value="months">Month</option>
			<option value="january">January (1)</option>
			<option value="february">February (2)</option>
			<option value="march">March (3)</option>
			<option value="april">April (4)</option>

			<option value="may">May (5)</option>
			<option value="june">June (6)</option>
			<option value="july">July (7)</option>
			<option value="august">August (8)</option>
			<option value="september">September (9)</option>
			<option value="october">October (10)</option>

			<option value="november">November (11)</option>
			<option value="december">December (12)</option>
			</select>
	</td>
	<td>
	
	<p>Expiration Year</p>
	</td>

	<td>			
	<select name="expiration" size="1">
			<option value="2012">2012</option>
			<option value="2013">2013</option>
			<option value="2014">2014</option>
			<option value="2015">2015</option>
			<option value="2016">2016</option>
			<option value="2017">2017</option>
		</select>
	</td>	
</tr>
</table>

<p><input type="image" alt="Graphical image of a submit button" src="submitButton.gif" onchange="confirmSubmit()" /></p>
<p><input type="reset" value="Reset Purchase Order Form" onchange="confirmReset();" /></p>    
</form>    

  </body>
  </html>


 

Was This Post Helpful? 0
  • +
  • -

#5 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3577
  • View blog
  • Posts: 10,442
  • Joined: 08-June 10

Re: Need help to show value of selected item (dropdown) in text box

Posted 15 April 2012 - 10:19 PM

a couple of issues
- there’s no calculate() function, only a Calculate() function
- you only use item1, so why should itme2 be involved?
Was This Post Helpful? 0
  • +
  • -

#6 mmpabc  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 12-April 12

Re: Need help to show value of selected item (dropdown) in text box

Posted 24 April 2012 - 07:50 PM

Thanks for all of your replies. Basically this is what I am trying to do

make one function
On each of the selection boxes, when a change occurs, use the onchange
event handler to call a function.

Inside that function
if a hand tool is selected and a power tool is selected, calculate the costs
else if a hand tool is selected and a power tool is not selected,
calculate the costs
else if a hand tool is not selected and a power tool is selected,
calculate the costs
if no hand tool is selected and no power tool is selected, zero out the fields.

Ive been working hard on it and this is what I have so far but I can't get both dropdown menus to work at the same time
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title></title>  
<script type="text/javascript">
/* <![CDATA[ */

 window.onload=function() {  
  if (document.getElementById) { 
 document.getElementById("selection").onchange=function() { switchme(this); }  
  } 
 } 
 function switchme(SNewSel) { 
 var ind = SNewSel.selectedIndex; 
 var txt = document.getElementById('TextField1'); 
 var txt2 = document.getElementById('TextField2');
 var txt3 = document.getElementById('TextField3');
 var txt4 = document.getElementById('TextField4');
 switch (ind) { 
  case 1: // hand tool 
  txt.value = "$20"; 
   txt2.value = "$0"; 
    txt3.value = "$5"; 
     txt4.value = "$25"; 
 break; 
  case 2: // hand tool 
  txt.value = "$20"; 
   txt2.value = "$0"; 
    txt3.value = "$5"; 
     txt4.value = "$25"; 
 break; 
  case 3: // hand tool 
  txt.value = "$20"; 
   txt2.value = "$0"; 
    txt3.value = "$5"; 
     txt4.value = "$25"; 
 break; 
  case 3: // hand tool 
  txt.value = "$20"; 
   txt2.value = "$0"; 
    txt3.value = "$5"; 
     txt4.value = "$25"; 
 break; 
   case 4: // hand tool 
  txt.value = "$20"; 
   txt2.value = "$0"; 
    txt3.value = "$5"; 
     txt4.value = "$25"; 
 break; 
   case 5: // hand tool 
  txt.value = "$20"; 
   txt2.value = "$0"; 
    txt3.value = "$5"; 
     txt4.value = "$25"; 
       case 6: // hand tool 
  txt.value = "$20"; 
   txt2.value = "$0"; 
    txt3.value = "$5"; 
     txt4.value = "$25"; 
 break;
  default: 
 txt.value='$20'; 
 } 
} 


/* ]]> */
</script>    
    
</head>

  <body> 
 <div> 
<!-- Your XHTML here -->
  
<h1>Purchase Order</h1>
<form action="FormProcessor.html" name="contact_form" method="get" enctype="application/x-www-form-urlencoded" onsubmit="return confirmSubmit();" onreset="return confirmReset();">    
<h3>Products</h3>
<table>
<tr>
  <td>  
<p>Hand Tools <br />$20.00</p>
  </td>
  <td>
  <select name="hand_tool" size="1" id="selection">
      <option value="1">Hand Tool</option>
      <option value="2">Saw</option>
      <option value="3">Hammer</option>
      <option value="4">Screwdriver</option>
      <option value="5">Wrench</option>
      <option value="6">Pliers</option>
      </select>
  </td>
  <td>
  <p>Power Tools <br />$30.00</p>
  </td>
  <td>      
  <select name="power_tool" size="1" id="select">
      <option value="7">Power Tool</option>
      <option value="8">Circular Saw</option>
      <option value="9">Sabre Saw</option>
      <option value="10">Drill</option>
      <option value="11">Belt Sander</option>
      <option value="12">Table Saw</option>
    </select>
  </td> 
</tr>
</table>
  
<h3>Shipping Fees</h3>
<table>
  <tr>
  <td>Item 1: <input id="TextField1" type="text" name="TextField1" value="" /></td>
  <td>Item 2: <input id="TextField2" type="text" name="TextField2" value="" /></td>
  </tr>
  <tr>
  <td>Shipping: <input id="TextField3" type="text" name="shipping" value="" /></td>
  <td>Total: <input id="TextField4" type="text" name="total" value="" /></td>
  </tr> 
</table> 
<h3>Customer Information</h3>
  <p>First Name
    <input type="text" name="first_name" value="FirstName" onclick="document.forms[0].first_name.value = '';" onchange="confirmSubmit();"/>  
  Last Name
    <input type="text" name="last_name" value="LastName" onclick="document.forms[0].last_name.value = '';" onchange="confirmSubmit();" /></p>
  <p>Street Address 1 
    <input type="text" name="address1" value="Address1" onclick="document.forms[0].address1.value = '';" onchange="confirmSubmit();" /></p>
  <p>City 
    <input type="text" name="city" value="City" onclick="document.forms[0].city.value = '';" onchange="confirmSubmit();" />
  State 
    <input type="text" name="state" value="State" onclick="document.forms[0].state.value = '';" onchange="confirmSubmit();" />
  Zip 
    <input type="text" name="zip" value="Zip" onchange="return checkForNumber(this.value);" onclick="document.forms[0].zip.value = '';" /></p>
  <p>Phone
    <input type="text" name="phone" value="Phone" onchange="return checkForNumber(this.value);" onclick="document.forms[0].phone.value = '';" />
  Fax
    <input type="text" name="fax" value="Fax" onclick="document.forms[0].fax.value = '';" onchange="return checkForNumber(this.value);" /></p>
  
  <p>Payment Method? 
  <input type="radio" name="credit_card" />Visa
  
  <input type="radio" name="credit_card" />MasterCard
  
  <input type="radio" name="credit_card" />American Express</p>
  <p>Credit Card Number<input type="text" name="cardNumber" value="CardNumber" size="50" onclick="document.forms[0].cardNumber.value = '';" onchange="return checkForNumber(this.value);" /></p>

<table>
<tr>
  <td>  
<p>Expiration Month</p>
  </td>
  <td>
  <select name="month" size="1" style="width: 200px">
      <option value="months">Month</option>
      <option value="january">January </option>
      <option value="february">February</option>
      <option value="march">March</option>
      <option value="april">April</option>
      <option value="may">May</option>
      <option value="june">June</option>
      <option value="july">July</option>
      <option value="august">August</option>
      <option value="september">September</option>
      <option value="october">October</option>
      <option value="november">November</option>
      <option value="december">December</option>
      </select>
  </td>
  <td>
  
  <p>Expiration Year</p>
  </td>
  <td>      
  <select name="expiration" size="1">
      <option value="2009">2012</option>
      <option value="2010">2013</option>
      <option value="2011">2014</option>
      <option value="2012">2015</option>
      <option value="2013">2016</option>
      <option value="2014">2017</option>
    </select>
  </td> 
</tr>
</table>

<p><input type="image" alt="image of a submit button" src="submitButton.gif" onchange="confirmSubmit()" /></p>
<p><input type="reset" value="Reset Form" src="resetButton.gif" onchange="confirmReset();" /></p>    
</form>    
  </body>
  </html>


Was This Post Helpful? 0
  • +
  • -

Page 1 of 1