3 Replies - 1699 Views - Last Post: 21 February 2013 - 11:20 PM

#1 warriorvx  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 21-February 13

JavaScript and HTML checkboxes event listeners submit gives nothing

Posted 21 February 2013 - 11:21 AM

Hi all. I'm having some issues finishing an exercise

Question:
Develop, test, and validate an HTML document that has checkboxes for apple ( 59 cents each), orange ( 49 cents each), and banana ( 39 cents each), along with a button. Each of the checkboxes should have its own onclick event handler. These handlers must add the cost of their fruit to a total cost. An event handler for the button must produce an alert window with the message , where is the total cost of the chosen fruit, including 5 percent sales tax. This handler must return false ( to avoid actual submission of the form data).

Any advise?


<!DOCTYPE html> 

<!-- Exercise 5.3.html 

	A document for Exercise 5.3.js --> 

<html lang = "en">


 <head> 

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

</head> 

<body> 



<form id = "myForm" action = "" "alert('Your total cost is $' + totalCost);" /> 

<label><input type = "checkbox" name = "fruitButton" id = "a" value = ".59"  />
		Apples </label>
<label><input type = "checkbox" name = "fruitButton" id = "b" value = ".49" />
		Bananas </label>
<label><input type = "checkbox" name = "fruitButton" id = "c" value = ".39" />
		Oranges </label>

<input type = "submit" name = "submit" onclick = submit; /> 

</form> 

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







 


 // total.js 
// This script illustrates using the focus event 
// to prevent the user from changing a text field


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 
// This script illustrates using the focus event 
// to prevent the user from changing a text field


var dom = document.getElementById("myForm");
dom.getElementById("a").onclick = total;
dom.getElementById("b").onclick = total;
dom.getElementById("c").onclick = total;
dom.getElementById("myForm").onsubmit = total; 

 


Is This A Good Question/Topic? 0
  • +

Replies To: JavaScript and HTML checkboxes event listeners submit gives nothing

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3560
  • View blog
  • Posts: 10,353
  • Joined: 08-June 10

Re: JavaScript and HTML checkboxes event listeners submit gives nothing

Posted 21 February 2013 - 11:30 AM

View Postwarriorvx, on 21 February 2013 - 07:21 PM, said:

This handler must return false ( to avoid actual submission of the form data).

Any advise?

out of the box - donít use a submit button, use a click button.

other than that, the question is how modern you can go. there are some nice methods you could use (e.g. document.querySelectorAll() with the :checked pseudo-class, Array.reduce(), Ö)

and one general advice: DOM element values are always strings, even if they represent numbers (and in case you havenít had it in class, the + operator does two different things).
Was This Post Helpful? 0
  • +
  • -

#3 warriorvx  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 21-February 13

Re: JavaScript and HTML checkboxes event listeners submit gives nothing

Posted 21 February 2013 - 12:43 PM

Hey. Thanks for clearing up a few things. I'm also sure I need to put a return false somewhere in the code. Not sure where to put that in. Also the alert should display and it doesn't. See anything else that could cause this?
Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3560
  • View blog
  • Posts: 10,353
  • Joined: 08-June 10

Re: JavaScript and HTML checkboxes event listeners submit gives nothing

Posted 21 February 2013 - 11:20 PM

View Postwarriorvx, on 21 February 2013 - 08:43 PM, said:

I'm also sure I need to put a return false somewhere in the code. Not sure where to put that in.

nowhere. default actions (like submitting a form) in Java​Script are cancelled via Event.preventDefault() and window.event.returnValue = false; (IE before IE9). unless you want to revert to very old coding practices.


View Postwarriorvx, on 21 February 2013 - 08:43 PM, said:

Also the alert should display and it doesn't. See anything else that could cause this?

sure, there is no alert defined anywhere.

This post has been edited by Dormilich: 21 February 2013 - 11:22 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1