Form doesn't work (I'm trying to learn)

Page 1 of 1

14 Replies - 3254 Views - Last Post: 11 April 2011 - 09:17 AM

#1 novato1  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 07-April 11

Form doesn't work (I'm trying to learn)

Posted 07 April 2011 - 05:09 PM 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">

<!--

function count(f,n,u)
{

 
 document.form1.subt[n].value = document.form1.qty[n].value * u ;
 
 var st = 0;
    for(i=0; i < document.form1.subt.length; i++)
    {
     st += Math.ceil(document.form1.subt[i].value * 1000) /1000
    }   
   
    document.form1.sub_total.value = "$ " + st;
	
	
	}
function CalcuTotal() {
	 var gifty= document.getElementById(qty[0]);
     document.form1.total.value= gifty * document.form1.gift.value;
}

	

 
	

// -->
</script>
</head>

<body>
<form name="form1" method="post" action="" >
<table border="2"><tbody>
<tr><td colspan="3"><b>Order Form</b></td></tr><tr>
<td width="144"><u>Qty</u></td>
<td width="143"><u>Items</u></td><td width="531"><u>Total</u></td></tr>
<tr>
<td><input name="qty" id="qty1" type="text" value="0" onkeyup="count(this.form,0,10.00)"/></td>
<td>A-$10.00</td>
<td><input name="subt" type="text" readonly="readonly"/></td></tr>
<tr >
<td><input name="qty" id="qty2" type="text" value="0" onkeyup="count(this.form,1,9.99)" /></td>
<td>B-$9.99</td>
<td><input name="subt" type="text" readonly="readonly"/></td></tr>
<tr>
<td><input name="qty" id="qty3"  type="text"  value="0" onkeyup="count(this.form,2,12.99)"/></td>
<td>C-$ 15.99</td>
<td><input name="subt" type="text" readonly="readonly"/></td>
</tr>
<tr> 
<td><input name="qty"   type="text" value="0" onkeyup="count(this.form,3,10.00)"/></td>
<td>D-$10.00</td>
<td><input name="subt" type="text" readonly="readonly"/></td>
</tr>
<tr>
<td><input name="qty"   type="text" value="0" onkeyup="count(this.form,4,12.00)" /></td>
<td>E-$12.00</td>
<td><input name="subt" type="text" readonly="readonly" /></td></tr>
<tr>
<td><input name="qty"  type="text" value="0" onkeyup="count(this.form,5,3.99)" /></td>
<td>F-$3.00</td>
<td><input name="subt" type="text" readonly="readonly" /></td>
</tr>
<tr >
<td colspan="2">Subtotal</td>
<td><input name="sub_total" type="text" size="10" readonly="readonly" /></td></tr>
<tr >
  <td colspan="3"><label>
<input type="checkbox" name="gift" id="gift" value="2.00"
     onclick="calcuTotal()" />
Gift wrapping? (extra of $2.00 per box)<br />
   gift card text:<br />
  <textarea name="note" id="note" cols="45" rows="5" ></textarea>
  </label></td>
  
</tr>
<tr >
  <td colspan="2"><p>shiping and handling</p></td>
  <td>$3.00 for 1-3 boxes, $ 5.00 for 3 plus boxes</td>
</tr>
<tr >
  <td colspan="2">Total</td>
  <td><label>
    <input type="text" name="total" id="total"  readonly="readonly"/>
  </label></td>
</tr>
</tbody>
</table>

</form>

</body>
</html>


Is This A Good Question/Topic? 0
  • +

Replies To: Form doesn't work (I'm trying to learn)

#2 nandureddy  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 60
  • Joined: 31-January 11

Re: Form doesn't work (I'm trying to learn)

Posted 07 April 2011 - 05:36 PM

You should post the errors or problems with the code clearly so that some one can easily understand and can help you.
The individual calculations are working but the total value is not getting calculated.
Was This Post Helpful? 1
  • +
  • -

#3 novato1  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 07-April 11

Re: Form doesn't work (I'm trying to learn)

Posted 07 April 2011 - 06:26 PM

View Postnandureddy, on 07 April 2011 - 05:36 PM, said:

You should post the errors or problems with the code clearly so that some one can easily understand and can help you.
The individual calculations are working but the total value is not getting calculated.

Thank you for your reply.
Was This Post Helpful? 0
  • +
  • -

#4 novato1  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 07-April 11

Re: Form doesn't work (I'm trying to learn)

Posted 07 April 2011 - 06:48 PM 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">

<!--

function count(f,n,u)
{

 
 document.form1.subt[n].value = document.form1.qty[n].value * u ;
 
 var st = 0;
    for(i=0; i < document.form1.subt.length; i++)
    {
     st += Math.ceil(document.form1.subt[i].value * 1000) /1000
    }   
   document.form1.sub_total.value = "$ " + st;
	}
	
	// -->
</script>
</head>

<body>
<form name="form1" method="post" action="" >
<table border="2"><tbody>
      <tr><td colspan="3"><b>Order Form</b></td></tr><tr>
      <td width="144"><u>Qty</u></td>
      <td width="143"><u>Items</u></td><td width="531"><u>Total</u></td></tr>

<tr>
   <td><input name="qty"  type="text" value="0" onkeyup="count(this.form,0,10.99)"/></td>
   <td>A-$10.00</td>
   <td><input name="subt" type="text" readonly="readonly"/></td>
</tr>

<tr >
   <td><input name="qty"  type="text" value="0" onkeyup="count(this.form,1,9.99)" /></td>
   <td>B-$9.99</td>
   <td><input name="subt" type="text" readonly="readonly"/></td>
</tr>



<tr >
   <td colspan="2">Subtotal</td>                                                          
   <td><input name="sub_total" type="text" size="10" readonly="readonly" /></td>
</tr>


<tr >
  <td colspan="3"><label>
  <input type="checkbox" name="gift" id="gift" value="1.95"
     onclick=")" />
     Gift wrapping? (extra of $2.00 per box)<br />
     gift card text:<br />
  <textarea name="note" id="note" cols="45" rows="5" ></textarea>
  </label></td>
</tr>

<tr >
  <td colspan="2"><p>shiping and handling</p></td>
  <td>$3.00 for 1-3 boxes, $ 5.00 for 3 plus boxes</td>
</tr>

<tr >
  <td colspan="2">Total</td>
  <td><label>
    <input type="text" name="total" id="total"  readonly="readonly"/>
  </label></td>
</tr>

</tbody>
</table>

</form>

</body>
</html>

Was This Post Helpful? 0
  • +
  • -

#5 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 3911
  • View blog
  • Posts: 11,448
  • Joined: 18-April 07

Re: Form doesn't work (I'm trying to learn)

Posted 07 April 2011 - 06:58 PM

Well the quantities boxes work fine. The checkbox of course doesn't work because in the checkbox's onclick event you have onclick=")" which isn't a function. What you need it to do is call a new function where you check if the checkbox is checked and if so, add 2.00 to the subtotal box. If it is not checked, you need to remove that 2.00 from the subtotal.

So create another function that gets a reference to the checkbox, uses its "checked" property to determine if it is checked or not and depending on its state, you add or remove the 2.00 from the subtotal box.

If there is something else not working, please let us know "IN ADDITION" to your code. :)
Was This Post Helpful? 1
  • +
  • -

#6 novato1  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 07-April 11

Re: Form doesn't work (I'm trying to learn)

Posted 07 April 2011 - 07:27 PM

Thank you for your reply.
I wonder how I could multiply qty * gift wrap check( check box). I tried to do it within count(f,n,u), but it didn't work.
Do I have to create two functions?
Was This Post Helpful? 0
  • +
  • -

#7 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 3911
  • View blog
  • Posts: 11,448
  • Joined: 18-April 07

Re: Form doesn't work (I'm trying to learn)

Posted 07 April 2011 - 07:52 PM

Well ideally you would want to create two functions right? I mean, when you click the checkbox you are doing a separate action than specifying a sub total by quantities. Plus, you don't want to be trying to handle the gift wrap figure when you are entering a quantity.

Also you will want to keep track of how much you have added to the subtotal in the way of gift boxes because you may need to subtract that value back out if they reduce the number of boxes or simply uncheck the box.

Never be afraid of breaking a problem into separate functions. The sooner you get into the habit of breaking a problem down into smaller functions, the better off you will be later. Newbies always want to put all their code into one function and try to do too many things at once. That is where they run into trouble later.

:)
Was This Post Helpful? 2
  • +
  • -

#8 novato1  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 07-April 11

Re: Form doesn't work (I'm trying to learn)

Posted 08 April 2011 - 10:52 AM

Martyr2

Do I have to assign a new ID to qty in order to use it in another function?
Was This Post Helpful? 0
  • +
  • -

#9 novato1  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 07-April 11

Re: Form doesn't work (I'm trying to learn)

Posted 08 April 2011 - 12:17 PM

View Postnovato1, on 08 April 2011 - 10:52 AM, said:

Martyr2

Do I have to assign a new ID to qty in order to use it in another function?


Perhaps using qty[]
Was This Post Helpful? 0
  • +
  • -

#10 novato1  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 07-April 11

Re: Form doesn't work (I'm trying to learn)

Posted 10 April 2011 - 01:25 PM

Please, take a look at total. I have tried using parseFloat to not avail.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">

<!--

function count(n,u){
      document.form1.subt[n].value = document.form1.qty[n].value * u ;
      st = 0;
      for(i=0; i < document.form1.subt.length; i++)
     {
      st += Math.ceil(document.form1.subt[i].value * 1000) /1000
     }   
   document.form1.sub_total.value = "$ " + st;
   quantity()
   giftCheck()
   tc()
}


function quantity() {
	var first= parseFloat (document.form1.qty[0].value);
	var sec = parseFloat (document.form1.qty[1].value);
	var qfinal=  first + sec;
	return qfinal
	
	tc()
}

	function shipping (){
	var shipRate1= 3
	var shipRate2= 5
		   if  (quantity() < 3) {
			    return  shipRate1 
           }else{ 
		        return  shipRate2 
			   }
	}
function giftCheck() {
    rate= document.form1.gift.value * quantity();
	return rate
	tc()
}


function tc() {
	subtt = document.form1.sub_total.value;
	gf= giftCheck();
	shipt= shipping();
	misce= subtt + gf + shipt;
	document.form1.total.value = misce ; 
	}

			   



	// -->
</script>
</head>

<body>
<form name="form1" method="post" action="" >
  <table border="2"><tbody>
      <tr><td colspan="3"><b>Order Form</b></td></tr><tr>
      <td width="144"><u>Qty</u></td>
      <td width="143"><u>Items</u></td><td width="531"><u>Total</u></td></tr>

<tr>
   <td><input name="qty"  id="A" type="text" value="0" onkeyup="count(0,10.99)"/></td>
   <td>A-$10.00</td>
   <td><input name="subt" type="text" readonly="readonly"/></td>
</tr>

<tr >
   <td><input name="qty" id= "B" type="text" value="0" onkeyup="count(1,9.99)" /></td>
   <td>B-$9.99</td>
   <td><input name="subt" type="text" readonly="readonly"/></td>
</tr>



<tr >
   <td colspan="2">Subtotal</td>                                                          
   <td><input name="sub_total" type="text" size="10" readonly="readonly" /></td>
</tr>


<tr >
  <td colspan="3"><label>
  <input type="checkbox" name="gift" id="gift" value="2.00" 
     onclick="giftCheck()"  />
     Gift wrapping? (extra of $2.00 per box)<br />
     gift card text:<br />
  <textarea name="note" id="note" cols="45" rows="5" ></textarea>
  </label></td>
</tr>

<tr >
  <td colspan="2"><p>shiping and handling</p></td>
  <td>$3.00 for 1-3 boxes, $ 5.00 for 3 plus boxes</td>
</tr>

<tr >
  <td colspan="2">Total</td>
  <td><label>
    <input type="text" name="total" id="total"  readonly="readonly"/>
  </label></td>
</tr>

</tbody>
</table>

</form>

</body>
</html>

Was This Post Helpful? 0
  • +
  • -

#11 nandureddy  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 60
  • Joined: 31-January 11

Re: Form doesn't work (I'm trying to learn)

Posted 10 April 2011 - 01:37 PM

Are you still getting any errors?
The total field is getting calculated correctly, though the Giftbox option is not working.
Post exact errors.

This post has been edited by nandureddy: 10 April 2011 - 01:37 PM

Was This Post Helpful? 0
  • +
  • -

#12 novato1  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 07-April 11

Re: Form doesn't work (I'm trying to learn)

Posted 10 April 2011 - 01:49 PM

View Postnandureddy, on 10 April 2011 - 01:37 PM, said:

Are you still getting any errors?
The total field is getting calculated correctly, though the Giftbox option is not working.
Post exact errors.

I meant the second total or grand total at the end of the form. It shows concatenated strings instead of a sum.
Was This Post Helpful? 0
  • +
  • -

#13 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 2935
  • View blog
  • Posts: 7,687
  • Joined: 08-June 10

Re: Form doesn't work (I'm trying to learn)

Posted 10 April 2011 - 10:27 PM

the + operator does string concatenation and addition, depending on what data type the first operand is.
Was This Post Helpful? 1
  • +
  • -

#14 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 2935
  • View blog
  • Posts: 7,687
  • Joined: 08-June 10

Re: Form doesn't work (I'm trying to learn)

Posted 11 April 2011 - 07:24 AM

additional note: anything you grab from the HTML (like attribute values) is of the string data type.

This post has been edited by Dormilich: 11 April 2011 - 07:24 AM

Was This Post Helpful? 0
  • +
  • -

#15 novato1  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 07-April 11

Re: Form doesn't work (I'm trying to learn)

Posted 11 April 2011 - 09:17 AM

View PostDormilich, on 11 April 2011 - 07:24 AM, said:

additional note: anything you grab from the HTML (like attribute values) is of the string data type.

Thank you for your help.
Now the form adds the check box value even if it's not selected. I have used the following functions, but it didn't worked:
function wrap() {
if (document.form1.gift.checked)
return document.form1.gift.value
}
function wrap () {
x= document.form1.gift.value * quantity();
return x
}


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">

<!--

function count(n,u){
      document.form1.subt[n].value = document.form1.qty[n].value * u ;
      st = 0;
      for(i=0; i < document.form1.subt.length; i++)
     {
      st += Math.ceil(document.form1.subt[i].value * 1000) /1000
     }   
   document.form1.sub_total.value = "$" + st;
   quantity()
   tc()
   
}

function quantity() {
	var first= parseFloat (document.form1.qty[0].value);
	var sec = parseFloat (document.form1.qty[1].value);
	var qfinal=  first + sec;
	return qfinal
	wrap()
	tc()
	
}

	function shipping (){
	var shipRate1= 3
	var shipRate2= 5
		   if  (quantity() < 3) {
			    return  shipRate1 
           }else{ 
		        return  shipRate2 
			   }
	}

function wrap() {
	if (document.form1.gift.checked)
	return document.form1.gift.value
}
function wrap () {
	x= document.form1.gift.value * quantity();
	return x
}


function tc() {
	subtt= document.form1.sub_total.value;
	gf=  wrap();
	ship= shipping();
	subtt= subtt.slice(1);
	misce= Number(subtt) + ship + gf ;
	document.form1.total.value = "$" + misce; 
	}


	// -->
</script>
</head>

<body>
<form name="form1" method="post" action="" >
  <table border="2"><tbody>
      <tr><td colspan="3"><b>Order Form</b></td></tr><tr>
      <td width="144"><u>Qty</u></td>
      <td width="143"><u>Items</u></td><td width="531"><u>Total</u></td></tr>

<tr>
   <td><input name="qty"  id="A" type="text" value="0" onkeyup="count(0,10.99)"/></td>
   <td>A-$10.00</td>
   <td><input name="subt" type="text" readonly="readonly"/></td>
</tr>

<tr >
   <td><input name="qty" id= "B" type="text" value="0" onkeyup="count(1,9.99)" /></td>
   <td>B-$9.99</td>
   <td><input name="subt" type="text" readonly="readonly"/></td>
</tr>



<tr >
   <td colspan="2">Subtotal</td>                                                          
   <td><input name="sub_total" type="text" size="10" readonly="readonly" /></td>
</tr>


<tr >
  <td colspan="3"><label>
  <input type="checkbox" name="gift" id="gift"  value="2"
     onclick="wrap()"  />
     Gift wrapping? (extra of $2.00 per box)<br />
     gift card text:<br />
  <textarea name="note" id="note" cols="45" rows="5" ></textarea>
  </label></td>
</tr>

<tr >
  <td colspan="2"><p>shiping and handling</p></td>
  <td>$3.00 for 1-3 boxes, $ 5.00 for 3 plus boxes</td>
</tr>

<tr >
  <td colspan="2">Total</td>
  <td><label>
    <input type="text" name="total" id="total"  readonly="readonly"/>
  </label></td>
</tr>

</tbody>
</table>

</form>

</body>
</html>

This post has been edited by novato1: 11 April 2011 - 09:19 AM

Was This Post Helpful? 0
  • +
  • -
Page 1 of 1