7 Replies - 7152 Views - Last Post: 05 November 2010 - 08:03 PM

#1 jh4life  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 32
  • Joined: 25-April 08

JavaScript and HTML checkboxes event listeners submit gives answer not

Posted 01 November 2010 - 04:25 PM

I have been working on this problem for over 7 hours. I am supposed to take three check boxes, each with a change value. ( ie 49 39 29 cents). Using the check boxes I need to create an event listener for each check box and for the submit. Submit is supposed to return false to not send anything to server, but I can't figure out how to put it in the register of event handlers as my book is very vague on certain topics. Also I can't figure out how to pass the variable in the Javascript file to the html file. I have tried setting it as a return value and also as a global variable. I am just starting Javascript two weeks ago, so any help would be greatly appreciated.
<?xml version = "1.0" encoding = "utf-8" ?>

<!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" >
		
		<h1>
		<strong> Totals the cost of the fruit you want!!!! </strong>  
		</h1>
		
		<body>
		
		<form id = "myForm" action = "" onsubmit = "alert('Your total cost is $' + totalCost);">
		
		<label><input type = "checkbox" name = "fruitButton" id = ".59" value = ".59"  />
		Apples </label>
		
		
		<label><input type = "checkbox" name = "fruitButton" id = ".49" value = ".49" />
		Bananas </label>
		
		
		<label><input type = "checkbox" name = "fruitButton" id = ".39" value = ".39" />
		Oranges </label>
		
		<input type = "submit" name = "submit" onclick = submit; />

		</form>
		
     
	
			<script type = "text/javascript" src = "total2.js" >
			</script>
	   

		</body>
	</html>


//total.js
//

var totalCost = 0;

function total()
{
//Which buttons are checked plus costs

	var dom = document.getElementByID("myForm");

	for(var index = 0; index < dom.fruitButton.length; index++)
	{

		if(dom.fruitButton[index].checked)
		{
		totalCost = totalCost + dom.fruitButton[index].value;
		}
	

	

	}
	return totalCost;
	
 
}


//total2.js

var dom = document.getElementById("myForm");
dom.getElementById(".59").onclick = total;
dom.getElementById(".49").onclick = total;
dom.getElementById(".39").onclick = total;
dom.getElementById("myForm").onsubmit = total; 



Is This A Good Question/Topic? 0
  • +

Replies To: JavaScript and HTML checkboxes event listeners submit gives answer not

#2 jh4life  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 32
  • Joined: 25-April 08

Re: JavaScript and HTML checkboxes event listeners submit gives answer not

Posted 01 November 2010 - 04:41 PM

I cannot figure out how to set the return value of onsubmit to false in order to make it perform the calculations instead of send information to server.

Another problem is that I cannot figure out how to pass the totalCost to the HTML file.

Theses two are my main problems unless my total function does not work, but I think it should.
Was This Post Helpful? 0
  • +
  • -

#3 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3525
  • View blog
  • Posts: 10,170
  • Joined: 08-June 10

Re: JavaScript and HTML checkboxes event listeners submit gives answer not

Posted 02 November 2010 - 12:21 AM

there are several things (that should also show up in the error console):
- IDs must not start with a dot, allowed are letters and _
- getElementById() is a method of document, not of an HTML element
- Javascript is case sensitive, thus getElementByID() does not exist
- to suppress the submit you need to return false or cancel the default action (Event.preventDefault())
Was This Post Helpful? 0
  • +
  • -

#4 JMRKER  Icon User is offline

  • D.I.C Addict

Reputation: 128
  • View blog
  • Posts: 826
  • Joined: 25-October 08

Re: JavaScript and HTML checkboxes event listeners submit gives answer not

Posted 05 November 2010 - 12:12 PM

View Postjh4life, on 01 November 2010 - 03:41 PM, said:

I cannot figure out how to set the return value of onsubmit to false in order to make it perform the calculations instead of send information to server.
...


Use this for the 'onsubmit' problem.
<form ..... onsubmit="return false">


Other parts of <form> tag are defined by you, ie; name=..., action=..., etc.
Was This Post Helpful? 0
  • +
  • -

#5 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3525
  • View blog
  • Posts: 10,170
  • Joined: 08-June 10

Re: JavaScript and HTML checkboxes event listeners submit gives answer not

Posted 05 November 2010 - 02:25 PM

View PostJMRKER, on 05 November 2010 - 07:12 PM, said:

Other parts of <form> tag are defined by you, ie; name=..., action=..., etc.

er, if you donít set a name, the form has none Ö and action is a required attribute.
Was This Post Helpful? 0
  • +
  • -

#6 JMRKER  Icon User is offline

  • D.I.C Addict

Reputation: 128
  • View blog
  • Posts: 826
  • Joined: 25-October 08

Re: JavaScript and HTML checkboxes event listeners submit gives answer not

Posted 05 November 2010 - 05:08 PM

View PostDormilich, on 05 November 2010 - 01:25 PM, said:

View PostJMRKER, on 05 November 2010 - 07:12 PM, said:

Other parts of <form> tag are defined by you, ie; name=..., action=..., etc.

er, if you donít set a name, the form has none Ö and action is a required attribute.

er, yourself. That's what I was referring to in the '...' portion of the tag!
I don't know what name or actions they wish to use.
Was This Post Helpful? 0
  • +
  • -

#7 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3525
  • View blog
  • Posts: 10,170
  • Joined: 08-June 10

Re: JavaScript and HTML checkboxes event listeners submit gives answer not

Posted 05 November 2010 - 06:40 PM

View PostJMRKER, on 06 November 2010 - 12:08 AM, said:

er, yourself. That's what I was referring to in the '...' portion of the tag!
I don't know what name or actions they wish to use.

oh, er, I definitely misread that part somehow.
Was This Post Helpful? 0
  • +
  • -

#8 JMRKER  Icon User is offline

  • D.I.C Addict

Reputation: 128
  • View blog
  • Posts: 826
  • Joined: 25-October 08

Re: JavaScript and HTML checkboxes event listeners submit gives answer not

Posted 05 November 2010 - 08:03 PM

View PostDormilich, on 05 November 2010 - 05:40 PM, said:

View PostJMRKER, on 06 November 2010 - 12:08 AM, said:

er, yourself. That's what I was referring to in the '...' portion of the tag!
I don't know what name or actions they wish to use.

oh, er, I definitely misread that part somehow.


Not a problem.
I can not say I have not done that myself once or twice. :blush:
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1