ionezation Posted January 6, 2014 Share Posted January 6, 2014 <h1>CALCULATOR FOR SHOP</h1> <form id="theform" method="post"> <fieldset> <label>Quantity</label> <input type="number" name="quantity" id="quantity" value="1" min="1" required> <label>Price per unit</label> <input type="number" name="price" id="price" value="1" min="1" required> <label>Tax Rate(%)</label> <input type="text" name="tax" id="tax" value="0.0" required> <label>Discount</label> <input type="text" name="discount" id="discount" value="0.0" required> <label>Total</label> <input type="text" name="total" id="total" value="0.00"> <button>Calculate</button> </fieldset> </form> This is my HTML function calculate(){ 'use strict'; var total; var quantity = document.getElementById('quantity').value; var price = document.getElementById('price').value; var tax = document.getElementById('tax').value; var discount = document.getElementById('discount').value; total = quantity * price; tax = tax/1000; tax = tax + 1; total = total * tax; total -= discount; document.getElementById('total').value = total; return false; }; // end of calculate() function function init(){ 'use stric'; var theform = document.getElementById('theform'); theform.onsubmit = calculate; }; window.onload = init; This is CSS ! this is not working and i am not getting it why :s Link to comment Share on other sites More sharing options...
ionezation Posted January 6, 2014 Author Share Posted January 6, 2014 but what i have in Source code is different and it is working... I am using Dreamweaver CS6 .. It doesnt show onSubmit() function of window object. Link to comment Share on other sites More sharing options...
ionezation Posted January 6, 2014 Author Share Posted January 6, 2014 i even attach the js file in different ways but it dint work at all Link to comment Share on other sites More sharing options...
HartleySan Posted January 6, 2014 Share Posted January 6, 2014 The window object does not have the onsubmit event. The onsubmit event only exists for form elements, and it only fires when an input element of the type "submit" is clicked/activated. Looking at your HTML though, you have no submit input elements, thus the event will never fire for your form. That's the first thing I noticed with your code. There may, of course, be other issues as well, but I'd start with that. Link to comment Share on other sites More sharing options...
Jaepee Posted January 8, 2014 Share Posted January 8, 2014 Ionezation your code worked in my browser.. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Submit</title> <meta name="generator" content="TextMate http://macromates.com/"> <meta name="author" content="Jp"> <!-- Date: 2014-01-07 --> <script> function calculate(){ 'use strict'; var total; var quantity = document.getElementById('quantity').value; var price = document.getElementById('price').value; var tax = document.getElementById('tax').value; var discount = document.getElementById('discount').value; total = quantity * price; tax = tax/1000; tax = tax + 1; total = total * tax; total -= discount; document.getElementById('total').value = total; return false; }; // end of calculate() function function init(){ 'use stric'; var theform = document.getElementById('theform'); theform.onsubmit = calculate; }; window.onload = init; </script> </head> <body> <h1>CALCULATOR FOR SHOP</h1> <form id="theform" method="post"> <fieldset> <label>Quantity</label> <input type="number" name="quantity" id="quantity" value="1" min="1" required> <label>Price per unit</label> <input type="number" name="price" id="price" value="1" min="1" required> <label>Tax Rate(%)</label> <input type="text" name="tax" id="tax" value="0.0" required> <label>Discount</label> <input type="text" name="discount" id="discount" value="0.0" required> <label>Total</label> <input type="text" name="total" id="total" value="0.00"> <input type="submit" value="Submit" /> </fieldset> </form> </body> </html> 1 Link to comment Share on other sites More sharing options...
ionezation Posted January 14, 2014 Author Share Posted January 14, 2014 Thanks for correction and giving me more knowledge Jaepee and HartleySen. one mistake i am making everytime is function init(){ 'use stric'; var theform = document.getElementById('theform'); theform.onsubmit = calculate; }; window.onload = init; misspelling of Strict [ 'use stric' ], even jaypee dint notced that. Link to comment Share on other sites More sharing options...
angelsonearth Posted December 9, 2014 Share Posted December 9, 2014 Thank you so very much for the excellent posts! Please kindly note that I'm trying the above method, but I can't get my alerts to show up in the following code during the onsubmit process! Here is my code (although I think I may have used and declared too many unnecessary variables): function validateFormOnSubmit() { var firstName; var firstNameValue var regExFirstName var finalRegExpressBooleanFirstName firstName = document.getElementById("firstName"); firstNameValue = firstName.value; regExFirstName = /^[A-Za-z'\.]+\s*[A-Za-z'\.]*$/; finalRegExpressBooleanFirstName = regExFirstName.test("firstNameValue"); if (finalRegExpressBooleanFirstName == true) { alert("You Awesome Coder!"); } else { alert("You Code Like Toodles"); }}//Start code for init() taken from http://www.larryullman.com/forums/index.php?/topic/2870-the-form-on-submit/function init(){ var theform = document.getElementById('registerForm'); theform.onsubmit = validateFormOnSubmit;};window.onload = init; on my form I just have the id (I got rid of method and any link to a php file, as I wanted to focus on the Javascript). Here is my form structure for the relevant fields: <form id="registerForm" > <fieldset> <legend>Register</legend> <p>A * represents a required field.</p> <div class="field"> <label for="firstName">*First Name:</label> <input type="text" name="firstName" id="firstName" required="required" autofocus="autofocus"> </div> Does anyone know why my code isn't working? (By the way, Larry Ullman is the ultimate teacher of regular expressions, isn't he for sure?) Thank you! Link to comment Share on other sites More sharing options...
HartleySan Posted December 9, 2014 Share Posted December 9, 2014 angel, what errors, if any, are showing up in your browser console? Thanks. Link to comment Share on other sites More sharing options...
angelsonearth Posted December 10, 2014 Share Posted December 10, 2014 Thank you so very much for responding, Hartley San! You give such awesome feedback, as I've been privileged to experience. Here is what the error messages said that I could retrieve File not found There are no scripts, but the page is still loading Check the file name for capitalization or other typing errors.Check to see if the file was moved, renamed or deleted. Here is the name of my file: <script type="text/javascript" src="js/formValidationRegister.js"></script> My file is located in a folder js that is in the top folder. The HTML is in the top folder as well. Link to comment Share on other sites More sharing options...
angelsonearth Posted December 10, 2014 Share Posted December 10, 2014 It also says, "window" is undefined where I have window.onload = init Link to comment Share on other sites More sharing options...
HartleySan Posted December 10, 2014 Share Posted December 10, 2014 If window is undefined, then there is definitely some really weird stuff going on. Unfortunately, without more knowledge of your code and setup, it's hard to help. My guess though, is that an error farther up the script is causing the script to shut down midstream. Link to comment Share on other sites More sharing options...
angelsonearth Posted December 10, 2014 Share Posted December 10, 2014 Thanks, HartleySan! Your feedback is always appreciated very much! Link to comment Share on other sites More sharing options...
Recommended Posts