Jump to content
Larry Ullman's Book Forums

The Form On Submit


Recommended Posts

<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

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

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>

  • Upvote 1
Link to comment
Share on other sites

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

  • 10 months later...

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

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

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

 Share

×
×
  • Create New...