Implementing submit event in a form - javascript

How do I get the data of a form upon clicking the a submit type button like so:
var x = form_submit.username;
var y = form_submit.password;
var z = form_submit.full_name;
and also stop the form from disappearing upon clicking the "Submit" button with the code below?
<form id="form_submit">
<input type="text" id="username" name="username" required>
<table>
<tr>
<th align="left">Full Name</th><td><input type="text" id="full_name" required></td>
</tr>
<!--<tr>
<th align="left">Username</th><td><input type="text" id="username" required></td>
</tr>-->
<tr>
<th align="left">Password</th><td><input type="password" id="full_name" required></td>
</tr>
<tr>
<th align="left">Confirm Password</th><td><input type="password" id="confirm_password" required></td>
</tr>
<tr>
<th align="left">Department</th><td><input type="text" id="department" required></td>
</tr>
<tr>
<th align="left">Supervisor</th>
<td>
<select id="supervisor">
<? for(var i in supervisors){ ?>
<option value="<?=supervisors[i] ?>"><?=supervisors[i]?></option>
<?}?>
</select>
</td>
</tr>
<tr>
<th align="left">E-mail Address</th><td><input type="email" id="email" required></td>
</tr>
<tr>
<td colspan="2" align="right"><input type="submit" value="Create Account" id='btn_create'></td>
</tr>
</table>
</form>
<?!= HtmlService.createHtmlOutputFromFile('CSS').getContent(); ?>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#form_submit').submit(function(e){
e.preventDefault();
var username = $('input[name="username"]', this).val();
alert(username);
});
});
}
</script>
I'm guessing that I should be using the "event.preventDefault()" method but I don't know where to place it.
P.S. I am using Google Sites, if it would make any difference. Thank you.
P.P.S.
Edited my post to show the right answer.

How about something as simple as that - it seems to be working - perhaps it will fit your needs
update:
From what I checked you can address the form children easily if you give them id. for example you can currently do form_submit.children.username and get the value. if you will put IDs also on all the other tags like table, tr, th, etc. you will be able to dig deeper
var form_submit = document.getElementById("form_submit");
var username = form_submit.children.username.value;
update 2:
I`ve moved the script to the bottom of the body tag so I could get refernce to the submit button. Once got the button I registered to the "click" event using addEventListener. Now the PreventDefault method worked
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form id="form_submit">
<input type="text" id="username" name="username" required/>
<table>
<tr>
<th align="left">Full Name</th>
<td>
<input type="text" id="full_name" required/>
</td>
</tr>
<tr>
<th align="left">Password</th>
<td>
<input type="password" id="full_name" required/>
</td>
</tr>
<tr>
<th align="left">Confirm Password</th>
<td>
<input type="password" id="confirm_password" required/>
</td>
</tr>
<tr>
<th align="left">Department</th>
<td>
<input type="text" id="department" required/>
</td>
</tr>
<tr>
<th align="left">Supervisor</th>
</tr>
<tr>
<th align="left">E-mail Address</th>
<td>
<input type="email" id="email" required/>
</td>
</tr>
<tr>
<td colspan="2" align="right">
<input type="submit" value="Create Account" id='btn_create'/>
</td>
</tr>
</table>
</form>
<script>
var button = document.getElementById("btn_create");
if (button)
button.addEventListener('click', createAccount, false);
function createAccount(evt){
var form_submit = document.getElementById("form_submit");
var isValid = form_submit.checkValidity();
alert('isValid: ' + isValid);
var username = form_submit.children.username.value;
evt.preventDefault();
return false;
}
</script>
</body>
</html>

To prevent the form to actually been submitted and process the data, you must cancel the event by returning false in your called function, pay special attention that you need to use the return statement in your onClick parameter.
onclick="createAccount(this.parentNode)"
=>
onclick="return createAccount(this.parentNode)"
function createAccount(frmData){
alert(document.getElementById("form_submit").elements.namedItem("username").value);
return false;
}

Related

Unable to fetch the input values from the form in jquery

I am fetching the values from the form page and then validating it. I am using jquery to handle the input objects and fetch the values which are entered by the user.
My HTML code is:
<form id="userDetails">
<table class="containFormTable" cellspacing="8">
<tr>
<td class="detail">Name:</td>
<td>
<input name="name" type="text" id="name" />
</td>
</tr>
<tr>
<td class="detail">Email-Id:</td>
<td>
<input name="emailId" type="text" id="emailId">
</td>
</tr>
<tr>
<td class="detail">Phone-No:</td>
<td>
<input name="phoneNo" type="text" id="phoneNo">
</td>
</tr>
<tr>
<td colspan="2" style="padding-top: 50px">
<input type="button" value="Submit" id="submit">
</td>
</tr>
</table>
</form>
My javascript file code which is fetching the data is:
$(document).ready(function() {
$('#submit').click(function() {
var name = $('#name').find('input[name="name"]').val();
var emailId = $('#emailId').find('input[name="emailId"]').val();
var phoneNo = $('#phoneNo').find('input[name="phoneNo"]').val();
});
});
The result I am getting in the variable name or any other is "undefined".
Where am I going wrong in it?
All you need to do is get the value from the elements, like this:
var name = $('#name').val();
var emailId = $('#emailId').val();
var phoneNo = $('#phoneNo').val();
Your code was getting a reference to the form fields, then looking for child elements (which input elements don't have, hence undefined) that were the same as the element that you already found and then trying to get the value of that.
Just remove .find('input[name="name"]') from each selector
$(document).ready(function(){
$('#submit')
.click(
function() {
var name = $('#name').val();
var emailId = $('#emailId').val();
var phoneNo = $('#phoneNo').val();
console.log(name);
console.log(emailId);
console.log(phoneNo);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="userDetails">
<table class="containFormTable" cellspacing="8">
<tr>
<td class="detail">Name:</td>
<td><input name="name" type="text" id="name"/></td>
</tr>
<tr>
<td class="detail">Email-Id:</td>
<td><input name="emailId" type="text" id="emailId"></td>
</tr>
<tr>
<td class="detail">Phone-No:</td>
<td><input name="phoneNo" type="text" id="phoneNo"></td>
</tr>
<tr >
<td colspan="2" style="padding-top: 50px"><input type="button" value="Submit" id="submit"></td>
</tr>
</table>
</form>

Hide/Display Form Section

I have a table in which five fields have upload rows.Each time, I submit a row,the pages refreshes. However, I want to hide all the 4 rows, when the first submit button is clicked, then it should show the next row, and hide the previous row. This should continue till the last one. I have tried the following, but not working. ie all the rows are displaying. I need assitance on how to achieve this feat.
<script>
$("#othBtn1").click(function(){
$("#oth2").show();
$("#oth1").hide();
$("#oth3").hide();
$("#oth4").hide();
$("#oth5").hide();
});
$("#othBtn2").click(function(){
$("#oth3").show();
$("#oth1").hide();
$("#oth2").hide();
$("#oth4").hide();
$("#oth5").hide();
});
</script>
This will continue till the last button. See the HTML below:
<table width="96%" border="0" style="margin-top:10px;" align="left" id="tableRec"class="table table-bordered">
<tr id="oth1">
<th width="26%">Other Request (1):<small> (Attachment Required) <i> Attach each other request per line</i></small></th>
<td width="33%">Description:<input type="text" name="tdesc1" value="" placeholder="Enter the Description" class="form-control"></td><td width="12%">Amount:<input type="text" name="tamt1" value="" placeholder="Enter Amount and click Add to Request Button" class="form-control" /></td>
<td>File(1):<input type="file" name="jfile1"/></td>
<td width="29%"><input type="submit" name="othBtn1" id="othBtn1" value="Add to Request" class="btn btn-success" /> </td>
</tr>
<tr id="oth2">
<th width="26%">Other Request (2):<small> (Attachment Required) <i> Attach each other request per line</i></small></th>
<td width="33%">Description:<input type="text" name="tdesc2" value="" placeholder="Enter the Description" class="form-control"></td><td width="12%">Amount:<input type="text" name="tamt2" value="" placeholder="Enter Amount and click Add to Request Button" class="form-control" /></td>
<td>File(2):<input type="file" name="jfile2"/></td>
<td width="29%"><input type="submit" name="othBtn2" id="othBtn2" value="Add to Request" class="btn btn-success" /></td>
</tr>
<tr id="oth3">
<th width="26%">Other Request (3):<small> (Attachment Required) <i> Attach each other request per line</i></small></th>
<td width="33%">Description:<input type="text" name="tdesc3" value="" placeholder="Enter the Description" class="form-control"></td><td width="12%">Amount:<input type="text" name="tamt3" value="" placeholder="Enter Amount and click Add to Request Button" class="form-control" /></td>
<td>File(3):<input type="file" name="jfile3"/></td>
<td width="29%"><input type="submit" name="othBtn3" id="othBtn3" value="Add to Request" class="btn btn-success" /> </td>
</tr>
<tr id="oth4">
<th width="26%">Other Request (4):<small> (Attachment Required) <i> Attach each other request per line</i></small></th>
<td width="33%">Description:<input type="text" name="tdesc4" value="" placeholder="Enter the Description" class="form-control"></td><td width="12%">Amount:<input type="text" name="tamt4" value="" placeholder="Enter Amount and click Add to Request Button" class="form-control" /></td>
<td>File(4):<input type="file" name="jfile4"/></td>
<td width="29%"><input type="submit" name="othBtn4" id="othBtn4"value="Add to Request" class="btn btn-success" /> </td>
</tr>
<tr id="oth5">
<th width="26%">Other Request (5):<small> (Attachment Required) <i> Attach each other request per line</i></small></th>
<td width="33%">Description:<input type="text" name="tdesc5" value="" placeholder="Enter the Description" class="form-control"></td><td width="12%">Amount:<input type="text" name="tamt5" value="" placeholder="Enter Amount and click Add to Request Button" class="form-control" /></td>
<td>File(5):<input type="file" name="jfile5"/></td>
<td width="29%"></td>
</tr>
</table>
You have a couple of issues.
You are missing a opening bracket for your table <.
You are missing the # in your selector.
Change,
table width="96%" border="0" style="margin-top:10px;" align="left" id="tableRec"class="table table-bordered">
to,
<table width="96%" border="0" style="margin-top:10px;" align="left" id="tableRec"class="table table-bordered">
and change,
$("#othBtn1").click(function() {
$("#oth2").show();
$("oth1").hide();
$("oth3").hide();
$("oth4").hide();
$("oth5").hide();
});
$("#othBtn2").click(function() {
$("#oth3").show();
$("oth1").hide();
$("oth2").hide();
$("oth4").hide();
$("oth5").hide();
});
to,
$("#othBtn1").click(function() {
$("#oth2").show();
$("#oth1").hide();
$("#oth3").hide();
$("#oth4").hide();
$("#oth5").hide();
});
$("#othBtn2").click(function() {
$("#oth3").show();
$("#oth1").hide();
$("#oth2").hide();
$("#oth4").hide();
$("#oth5").hide();
});
In your example you missed the # in front of the id selectors.
And you can simple combine everything to a single event listener. No need for doing it manually for each button.
$("#tableRec input[id^=othBtn]").click(function() {
$("#tableRec tr").hide();
$(this).closest("tr").next().show();
});
tr {
display: none;
}
tr:first-child {
display: table-row;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableRec">
<tr>
<td>1</td>
<td><input type="submit" id="othBtn1" value="Add to Request" /></td>
</tr>
<tr>
<td>2</td>
<td><input type="submit" id="othBtn2" value="Add to Request" /></td>
</tr>
<tr>
<td>3</td>
<td><input type="submit" id="othBtn3" value="Add to Request" /></td>
</tr>
<tr>
<td>4</td>
<td><input type="submit" id="othBtn4" value="Add to Request" /></td>
</tr>
<tr>
<td>5</td>
<td>table end</td>
</tr>
</table>

Use href to submit into a php file

I want to make a login form which should provide 2 ways to submit , one through the login button which should submit the info into the login.php and another through the href (Forgot password) which should redirect the user and submit the info to the forgotpassword.php file. So far I have tried this code but it doesn't work:
<script type="text/javascript">
function forgotpassword()
{
document.getElementById("ee").action="project_forgotpassword.php";
document.getElementById("ee").submit();
}
</script>
<form id="ee" method="POST" action="login.php">
<table>
<tr>
<th>Username</th>
<td><input type="text" name="username"></td>
</tr>
<tr>
<th>Password</th>
<td><input type="password" name="password"></td>
</tr>
<tr>
<th>Forgot Password</th>
</tr>
<tr>
<td></td>
<td>
<input type="submit" name="submit" value="Submit">
</td>
</tr>
</table>
</form>
First issue as I have commented was the typo mistake.
Second issue is submit button name. Refer to following post.
JSFiddle
Code
function forgotpassword() {
var form = document.getElementById("ee");
form.action = "project_forgotpassword.php";
console.log(form)
form.submit();
}
<form id="ee" method="POST" action="login.php">
<table>
<tr>
<th>Username</th>
<td>
<input type="text" name="username">
</td>
</tr>
<tr>
<th>Password</th>
<td>
<input type="password" name="password">
</td>
</tr>
<tr>
<th>Forgot Password
</th>
</tr>
<tr>
<td></td>
<td>
<input type="submit" name="btnSubmit" value="Submit">
</td>
</tr>
</table>
</form>
Changes
<input type="submit" name="btnSubmit" value="Submit">
When calling the javascript function you can omit the javascript: from the onclick handler. You might wish to use that syntax when invoking the function from a standard hyperlink, such as <a href='javascript:func()'>link</a> but that is not common.
In the amended forgotpassword function I use setAttribute rather than trying to call the attribute directly - I think it is more reliable that way. Also, unless in the js function, you prevent the default action of the hyperlink it will simply try to go to the value in the href attribute.
<script type="text/javascript">
/*
function forgotpassword(){
document.getElementById("ee").action="project_forgotpassword.php";
document.getElementById("ee").submit();
}
*/
/* I would tend to use this approach to setting an attribute */
function forgotpassword(){
var form=document.getElementById("ee");
form.setAttribute('action','project_forgotpassword.php');
form.submit();
}
</script>
<form id="ee" method="POST" action="login.php">
<table>
<tr>
<th>Username</th>
<td><input type="text" name="username"></td>
</tr>
<tr>
<th>Password</th>
<td><input type="password" name="password"></td>
</tr>
<tr>
<th>Forgot Password</th>
</tr>
<tr>
<td></td>
<td>
<input type="submit" name="subform" value="Submit">
</td>
</tr>
</table>
</form>
One final thing - change the name of the submit button ~ it shouldn't be called submit - especially when trying to invoke form submission using javascript.
Try this,
$('#forgetpassword').click(function(){
$("form[name='form_name']").attr("action", "project_forgotpassword.php");
$("form[name='form_name']").submit();
});
Change the forget Password link as below,
<a id="forgetpassword">Forgot Password</a>

Validate a form at the client side

I wish to validate a form at the client side (before submit to server). I have a script to search for special characters (~!##) etc. If at least one exists, form should not be submitted until the user corrects the error(s). Here is my form:
<form id="setUp" method="post" action="Usercontact.php">
<table id="contact">
<tbody>
<tr>
<th class="cdtl">Name of user:</td>
<td><input type="text" name='username' required /></td>
</tr>
<tr>
<th class="cdtl">Course</td>
<td><input type="text" name='useraddy1' required /></td>
</tr>
<tr>
<th class="cdtl">Telephone</td>
<td><input type="text" name='userfone' required /></td>
</tr>
<tr>
<th class="cdtl">e-mail Address</td>
<td><input type="email" name='schemail' required /></td>
</tr>
</tbody>
</table>
<br>
<input id="postform" type="submit" onclick="err()" value="Submit form">
</form>
Below is the script
<script>
function err() {
var tbl = document.getElementById("contact");
var name = tbl.rows[0].cells[1].getElementsByTagName("input")[0].value;
var addy = tbl.rows[1].cells[1].getElementsByTagName("input")[0].value;
var fone = tbl.rows[2].cells[1].getElementsByTagName("input")[0].value;
var email = tbl.rows[3].cells[1].getElementsByTagName("input")[0].value;
var namepos = name.lastIndexOf("~`!##$%^&*)(+=}{][|\:;'.'/"',>?<");
var addypos = addy.lastIndexOf("~`!##$%^&*)(+=}{][|\:;'.'/"',>?<");
var fonepos = fone.lastIndexOf("~`!##$%^&*)(+=}{][|\:;'.'/"',>?<");
var emailpos = name.lastIndexOf("~`!##$%^&*)(+=}{][|\:;'.'/"',>?<");
if (namepos !== -1 || addypos !== -1 || fonepos !== -1 || emailpos !==
-1) {
document.getElementById("postform").addEventListener("click",
function(event){
event.preventDefault()
});
}
}
</script>
Please why is this script not working. The form is submitted even when there are special characters in any of the input fields. Appreciate
This line:
var namepos = name.lastIndexOf("~`!##$%^&*)(+=}{][|\:;'.'/"',>?<");
is checking for the entire string ("~`!##$%^&*)(+=}{][|:;'.'/"',>?<"), not each character.
As suggested in the comments, you could use the HTML5 pattern attribute:
<input name="name" pattern="[A-Za-z]{3,12}">
This would require the name to include only letters and range in length from 3 to 12 characters.
To use a regular expression to test for all the characters you listed, you could use:
var re=/[~`!##$%^&*)(+=}{\]\[|\:;'.'\"',>?<]/
var str="this#that";
if (re.test(str)) {
console.log('The string has one of the characters');
} else {
console.log('The string does not have any of the characters');
}
You need to include event. PreventDefault().. This will prevent the form from submitting if you find characters you are checking for or anything else you might be checking for.
Following suggestions above, I have now a working doc as follows:
<form id="setUp" method="post" action="Usercontact.php">
<table id="contact">
<tbody>
<tr>
<th class="cdtl">Name of user:</td>
<td><input type="text" name='username' required pattern="[A-Za-z0-9.-_]
{5,12}"/></td>
</tr>
<tr>
<th class="cdtl">Course</td>
<td><input type="text" name='useraddy1' required pattern="[A-Za-z0-9]{5,15}"
/></td>
</tr>
<tr>
<th class="cdtl">Telephone</td>
<td><input type="text" name='userfone' required pattern="[0-9.-_]{6,15}" />
</td>
</tr>
<tr>
<th class="cdtl">e-mail Address</td>
<td><input type="email" name='schemail' required pattern="[A-Za-z0-9.-_#]"
/></td>
</tr>
</tbody>
</table>
<br>
<input id='submit' type="submit" value="Submit form">
</form>
The script was removed as there is no need for it.

Add input from a form to a table in the same page without reloading

Im trying to make the input from the user in a html form be added to a table that adds up the total price of all the products in the same page all of this without reloading.
here is my html form and table code
Thank you in advance
<h1>Instructions</h1>
<section>
<p>Please enter the desired product/services in the following table to create an order.</p>
<section style="width:300px; margin-left:20px">
<form action="" name="order" method="POST" autocomplete="off">
<table width="300" border="0" cellspacing="5" cellpadding="2">
<tr>
<td>
<label for="product">Product:</label>
</td>
<td>
<input name="product" id="product" required pattern="[a-zA-Z ]*$" title="Please enter only alphabetic characters" type="text" placeholder="Product name" size="28" />
</td>
</tr>
<tr>
<td>
<label for="quantity">Quantity:</label>
</td>
<td>
<input name="quantity" id="quantity" required type="number" title="Enter item quantity" placeholder="Product quantity" width="196px" />
</td>
</tr>
<tr>
<td>
<label for="price">Price:</label>
</td>
<td>
<input name="price" id="price" required pattern="[0-9]" title="Please enter only numeric characters" placeholder="Product price" size="28" />
</td>
</tr>
</table>
<br>
<div id="buttons">
<input type="reset" name="reset" id="resetbtn" class="resetbtn" value="Reset">
<input type="submit" name="submit" id="submitbtn" class="submitbtn" tabindex="7" value="Submit this!" onclick="">
<br style="clear:both;">
</div>
</form>
</section>
</section>
<table width="416" border="0" cellspacing="5" cellpadding="2">
<tr>
<th width="115" scope="col">Products</th>
<th width="112" scope="col">Quantity</th>
<th width="92" scope="col">Price</th>
<th width="56"></th>
</tr>
<tr>
<td scope="col"> </th>
<td scope="col">
</th>
<td scope="col"> </th>
<th>Total</th>
</tr>
</table>
This is a simple update to what you have that works. Part of your question was to avoid page reloading, so you will notice the FORM no longer does a POST action and your SUBMIT BUTTON is no longer an input but a standard button with an onClick action. This will allow everything to execute without navigating away from the page. For the sake of time I put the results addition in a separate table, feel free to style how you wish.
<html>
<head>
<title>Order</title>
<script type="text/javascript">
var qtyTotal = 0;
var priceTotal = 0;
function updateForm() {
var product = document.getElementById("product").value;
var qty = document.getElementById("quantity").value;
qtyTotal = qtyTotal + parseInt(qty);
document.getElementById("qtyTotals").innerHTML=qtyTotal;
var price = document.getElementById("price").value;
priceTotal = priceTotal + parseInt(price);
document.getElementById("priceTotals").innerHTML=priceTotal;
var table=document.getElementById("results");
var row=table.insertRow(-1);
var cell1=row.insertCell(0);
var cell2=row.insertCell(1);
var cell3=row.insertCell(2);
cell1.innerHTML=product;
cell2.innerHTML=qty;
cell3.innerHTML=price;
}
</script>
</head>
<body>
<form name="order" id="order">
<table>
<tr>
<td>
<label for="product">Product:</label>
</td>
<td>
<input id="product" name="product" title="Please enter only alphabetic characters" type="text" size="28" />
</td>
</tr>
<tr>
<td>
<label for="quantity">Quantity:</label>
</td>
<td>
<input id="quantity" name="quantity" title="Enter item quantity" width="196px" />
</td>
</tr>
<tr>
<td>
<label for="price">Price:</label>
</td>
<td>
<input id="price" name="price" title="Please enter only numeric characters" size="28" />
</td>
</tr>
</table>
<input type="reset" name="reset" id="resetbtn" class="resetbtn" value="Reset" />
<button type="button" onClick="updateForm();"/>Add To Table</button>
</form>
<br>
<table id="results" width="360">
<thead>
<tr>
<th scope="col" width="120">Products</th>
<th scope="col" width="120">Quantity</th>
<th scope="col" width="120">Price</th>
</tr>
</thead>
</table>
<table id="resultTotals" width="360">
<tr>
<td scope="col" width="120">Totals</td>
<td scope="col" width="120"><div id="qtyTotals"></div></td>
<td scope="col" width="120"><div id="priceTotals"></div></td>
</tr>
</table>
</body></html>
Here is JS Fiddle Example of above code.
<section>
<p>Please enter the desired product/services in the following table to create an order.</p>
<section style="width:300px; margin-left:20px">
<form action="" name="order" method="POST" autocomplete="off">
<table id="cart" width="300" border="0" cellspacing="5" cellpadding="2">
<tr>
<td>
<label for="product">Product:</label>
</td>
<td>
<input name="product" required pattern="[a-zA-Z ]*$" title="Please enter only alphabetic characters" type="text" placeholder="Product name" size="28" />
</td>
</tr>
<tr>
<td>
<label for="quantity">Quantity:</label>
</td>
<td>
<input name="quantity" required type="number" title="Enter item quantity" placeholder="Product quantity" width="196px" />
</td>
</tr>
<tr>
<td>
<label for="price">Price:</label>
</td>
<td>
<input name="price" required pattern="[0-9]" title="Please enter only numeric characters" placeholder="Product price" size="28" />
</td>
</tr>
</table>
<br>
<div id="buttons">
<input type="reset" name="reset" id="resetbtn" class="resetbtn" value="Reset">
<input type="submit" name="submit" id="submitbtn" class="submitbtn" tabindex="7" value="Submit this!" onclick="">
<br style="clear:both;">
</div>
</form>
</section>
</section>
<table width="416" border="0" cellspacing="5" cellpadding="2" id="cart">
<tr>
<th width="115" scope="col">Products</th>
<th width="112" scope="col">Quantity</th>
<th width="92" scope="col">Price</th>
<th width="56"></th>
</tr>
<tr>
<td id="items">
</td>
</tr>
<tr>
<td scope="col"> </th>
<td scope="col">
</th>
<td scope="col"> </th>
<th>Total</th>
<td id="total">0</td>
</tr>
</table>
<script>
$(document).ready(function(){
var form = document.order;
var $checkout = $('#cart');
// Listen for form submit
$(form).on('submit', function(e){
// Prevent browser from sending form
e.preventDefault();
// this is a row thats nt yet attached to the document
var $row = $('<tr class="item">');
/*
* Loop through fields and add 'product','quantity','price'
* to $row. we store the data on the node as well
*/
$.each(['product','quantity','price'],function(index, key){
var $td = $('<td>');
var value = form[key].value;
$td.addClass(key).text(value);
$row.data(key, value);
$row.append($td);
});
// Attach the $row to the document
$('#items').append($row);
// Update the totals
$checkout.trigger('change');
});
// Update totals when cart changes
$checkout.on('change',function(){
var total = 0;
$(this).find('.item').each(function(){
var quant = parseFloat($(this).data('quantity'));
var price = parseFloat($(this).data('price'));
total = total + (quant * price);
});
$('#total').text(total);
});
});
</script>

Categories