Jump to content
Larry Ullman's Book Forums
Sign in to follow this  
ionezation

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

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
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. 

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...