Jump to content
Larry Ullman's Book Forums

Search the Community

Showing results for tags 'onsubmit'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Single Editions
    • Modern Javascript: Develop and Design
    • The Yii Book
    • Effortless Flex 4 Development
    • Building a Web Site with Ajax: Visual QuickProject
    • Ruby: Visual QuickStart Guide
    • C++ Programming: Visual QuickStart Guide
    • C Programming: Visual QuickStart Guide
    • Adobe AIR: Visual QuickPro Guide
  • PHP and MySQL for Dynamic Web Sites: Visual QuickPro Guide
    • PHP and MySQL for Dynamic Web Sites: Visual QuickPro Guide (5th Edition)
    • PHP and MySQL for Dynamic Web Sites: Visual QuickPro Guide (4th Edition)
    • PHP 6 and MySQL 5 for Dynamic Web Sites: Visual QuickPro Guide (3rd Edition)
    • PHP and MySQL for Dynamic Web Sites: Visual QuickPro Guide (2nd Edition)
    • PHP and MySQL for Dynamic Web Sites: Visual QuickPro Guide (1st Edition)
  • PHP for the Web: Visual QuickStart Guide
    • PHP for the Web: Visual QuickStart Guide (5th Edition)
    • PHP for the Web: Visual QuickStart Guide (4th Edition)
    • PHP for the Web: Visual QuickStart Guide (3rd Edition)
    • PHP for the World Wide Web: Visual QuickStart Guide (2nd Edition)
    • PHP for the World Wide Web: Visual QuickStart Guide (1st Edition)
  • Effortless E-commerce with PHP and MySQL
    • Effortless E-Commerce with PHP and MySQL (2nd Edition)
    • Effortless E-Commerce with PHP and MySQL
  • PHP Advanced: Visual QuickPro Guide
    • PHP Advanced and Object-Oriented Programming: Visual QuickPro Guide (3rd Edition)
    • PHP 5 Advanced: Visual QuickPro Guide (2nd Edition)
    • PHP Advanced: Visual QuickPro Guide
  • MySQL: Visual QuickStart Guide
    • MySQL: Visual QuickStart Guide (2nd Edition)
    • MySQL: Visual QuickStart Guide (1st Edition)
  • Other
    • Announcements
    • Newsletter, Blog, and Other Topics
    • Forum Issues
    • Social

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Found 1 result

  1. Hi everyone I am working through the book again and am really having trouble getting my head round the shopping calculator (shopping.html, page 103), so would be grateful if you would review my comments to say if I have understood it correctly:....... *****MY COMMENTS ARE LIKE THIS************* -------------------------------------------------------------------------------------------------------------------------------------- *****THIS IS LARRY'S HTML - 'shopping.html'********* <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Shopping Calculator</title> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <link rel="stylesheet" href="css/styles.css"> </head> <body> <!-- shopping.html --> *****THE COMMAND '<form action=' WILL SEND AN ARRAY, ON SUBMITTING OF THE FORM, OF THE 5 VARIABLES, EACH WITH ITS VARIABLE NAME (E.G. "quantity, 4") BY METHOD "POST" WHICH WILL BE "INTERCEPTED" BY THE JS SCRIPT********** <form action="" method="post" id="theForm"> <fieldset> <p>Use this form to calculate the order total.</p> <div><label for="quantity">Quantity</label><input type="number" name="quantity" id="quantity" value="1" min="1" required></div> <div><label for="price">Price Per Unit</label><input type="text" name="price" id="price" value="1.00" required></div> <div><label for="tax">Tax Rate (%)</label><input type="text" name="tax" id="tax" value="0.0" required></div> <div><label for="discount">Discount</label><input type="text" name="discount" id="discount" value="0.00" required></div> <div><label for="total">Total</label><input type="text" name="total" id="total" value="0.00"></div> <div><input type="submit" value="Calculate" id="submit"></div> </fieldset> </form> ****NOW CALL THE JAVASCRIPT******** <script src="js/shopping1.js"></script> </body> </html> ******THIS IS NOT THE JS USED BY THE HTML BUT IS ESSENTALLY IDENTICAL EXCEPT WITH MORE OF LARRY'S COMMENTS.************* // Script 4.2 - shopping.js // This script calculates an order total. // Function called when the form is submitted. // Function performs the calculation and returns false. ******THIS STARTS THE FUNCTION THAT WILL BE CALLED AT THE END BY THE VARIABLE 'theForm' (MORE ABOUT THAT LATER).********** function calculate() { 'use strict'; // For storing the order total: ******'total' IS A SIMPLE VARIABLE TO STORE THE DECIMAL NUMBER THAT WILL RESULT FROM THE CALCULATION*********** var total; ******MOVE THE VARIABLES FROM "POST" TO JS*************** // Get references to the form values: var quantity = document.getElementById('quantity').value; var price = document.getElementById('price').value; var tax = document.getElementById('tax').value; var discount = document.getElementById('discount').value; // Add validation here later! // Calculate the initial total: total = quantity * price; // Make the tax rate easier to use: tax /= 100; tax++; // Factor in the tax: total *= tax; // Factor in the discount: total -= discount; // Display the total: document.getElementById('total').value = total; // Return false to prevent submission: return false; } // End of calculate() function. *****NOW WRITE THE LISTENER********* // Function called when the window has been loaded. // Function needs to add an event listener to the form. function init() { 'use strict'; // Add an event listener to the form: *****AND THIS IS WHERE I HAVE A PROBLEM........WHY ARE WE CALLING ALL OF THE DATA AGAIN BY WAY OF 'theForm'? IS 'document.getElementById('theForm')' CALLING THE WHOLE POST ARRAY AND WHY? var theForm = document.getElementById('theForm'); *****CALL THE "calculate" FUNCTION***** theForm.onsubmit = calculate; } // End of init() function. *****THIS CALLS THE "init" FUNCTION WHEN THE WINDOW LOADS****** // Assign an event listener to the window's load event: window.onload = init; --------------------------------------------------------------------------------------------------- The only other possibility that I can think of is that "var theForm = document.getElementById('theForm');" calls an array from POST that includes all of the variables stated above, and then passes them to the "calculate" function as required. To put the question another way, is the variable e.g. "quantity" - the actual number - received directly from POST or secondarily from the array "theForm"? I imagine the variable "the.Form" to look like this: quantity,4 price,45.67 tax,20 discount,10.00 total,0.00 Any comments and advice would be greatly appreciated. Regards Max
×
×
  • Create New...