javascript: Auto calculate price upon entering quantity in input box - javascript

In my program I am trying to auto calculate total price when user enter quantity in input box. For that I performed below script. but due to some error my script doesn't working as per expectation and when I enter quantity, total price doesn't get updated. Can anyone tell me what's wrong in my code. I want to perform this script without jquery.
code:
<!DOCTYPE html>
<html>
<head>
<title>form</title>
</head>
<body>
<form action="" method="POST" name="myForm" id="myForm">
<table bgcolor="pink" align="center" border="2px">
<tbody>
<tr>
<th> Category </th>
<th> Description </th>
<th> Unit Price </th>
<th> Quantity </th>
<th> Total Price</th>
</tr>
<tr>
<td rowspan="2">1</td>
<td> Paneer </td>
<td name="priceQ1"> $10 </td>
<td> <input type="text" size="4" id="q1" name="qty1" onkeyup="calculate()"> </td>
<td> <input type="text" id="total1" name="total1"> </td>
</tr>
<tr>
<td> Rice </td>
<td name="priceQ2"> $30 </td>
<td> <input type="text" size="4" id="q2" name="qty2" onkeyup="calculate()"> </td>
<td> <input type="text" id="total2" name="total2"> </td>
</tr>
<tr align="right">
<td colspan="4"> Subtotal $ </td>
<td> <input type="text" id="sub_total" name="sub_total"> </td>
</tr>
<tr>
<td rowspan="2">2</td>
<td> Chicken Palak </td>
<td name="priceQ3"> $20 </td>
<td> <input type="text" size="4" id="q3" name="qty3" onkeyup="calculate()"> </td>
<td> <input type="text" id="total3" name="total3"> </td>
</tr>
<tr>
<td> Aloo Tikki </td>
<td name="priceQ4 "> $14 </td>
<td> <input type="text" size="4" id="q4" name="qty4" onkeyup="calculate()"> </td>
<td> <input type="text" id="total4" name="total4"> </td>
</tr>
<tr align="right">
<td colspan="4"> Subtotal $ </td>
<td> <input type="text" id="sub_total2" name="sub_total2"> </td>
</tr>
</tbody>
</table>
<p align="center">
<input type="submit" value="Submit">
<input type="reset">
</p>
</form>
<script>
function calculate() {
var f = document.forms['myForm'];
for(var i=0;i<4;i++){
var qty = document.getElementByName('qty'+i);
document.getElementById('total'+i).value = newValue;
}
}
</script>
</body>
</html>


There is no document.getElementsById, you should name your different quantities and total price fields with distinct names and traverse thru them using document.getElementById('qty'+i);

Related

Copy button not working on HTML template

Can I please ask for assistance, im new to html and css i barely know this things though im trying to learn, here's what i made so far but i cant seem to get the copy button fixed .. can someone help me out please
im trying to create a template, im sorry im really trying hard to learn but im clueless..
<form id="tickettemplate" name="tickettemplate">
<table width="700">
<tbody>
<tr>
<td colspan="4" align="center">
<div align="center">
<p style="font-size: 14pt;" align="center">
<strong>Shin's Template</strong>
</p>
</div>
</td>
</tr>
</tbody>
</table>
<table style="font-size: 12pt; height: 164px;" width="697">
<tbody>
<tr>
<td valign="middle">
D/SESA
</td>
<td>
<input id="callername_singleuser" name=
"callername_singleuser" size="50" type="text" />
</td>
</tr>
<tr>
<td valign="middle">
Caller’s name:
</td>
<td>
<input id="Email" name="Email" size="50" type="text" />
</td>
</tr>
<tr>
<td valign="middle">
Callback number:
</td>
<td>
<input id="WinId_singleuser0" name="WinId_singleuser0"
size="50" type="text" />
</td>
</tr>
<tr>
<td valign="top">
E-mail address:
</td>
<td>
<input id="ctystate0" name="E-mail Address" size="50"
type="text" />
</td>
</tr>
<tr>
<td valign="middle">
Related case#s (history):
</td>
<td>
<input id="phonenumber_singleuser" name=
"phonenumber_singleuser" size="50" type="text" />
</td>
</tr>
<tr>
<td valign="top">
Location,remote/hotel/office:
</td>
<td>
<input id="client1" name="client1" size="50" type=
"text" />
</td>
</tr>
</tbody>
</table><br />
<div>
<br />
<table style=
"font-size: 12pt; border: 0px solid gray; height: 44px;" width=
"758" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="middle">
Application name:
</td>
<td>
<input id="WinId_singleuser0" name="WinId_singleuser0"
size="50" type="text" />
</td>
</tr>
<tr>
<td valign="top">
Number of Users Affected:
</td>
<td>
<select id="Number of Users Affected:0" name=
"Number of Users Affected:" size="1">
<option value="Single User">
Single User
</option>
<option value="Less than 5 users">
Less than 5 users
</option>
<option value="5 or more users">
5 or more users
</option>
</select>
</td>
</tr>
</tbody>
</table><br />
<table style="font-size: 12pt; height: 255px;" width="604">
<tbody>
<tr>
<td valign="middle">
What is the problem:
</td>
<td>
<p>
<input id="callername_singleuser" name=
"callername_singleuser" size="50" type="text" />
</p>
</td>
</tr>
<tr>
<td valign="middle">
When did the issue/problem begin:
</td>
<td>
<input id="Email" name="Email" size="50" type="text" />
</td>
</tr>
<tr>
<td valign="middle">
Logon id: :
</td>
<td>
<input id="WinId_singleuser0" name="WinId_singleuser0"
size="50" type="text" />
</td>
</tr>
<tr>
<td valign="top">
Error message (if any):
</td>
<td>
<input id="ctystate0" name="Error message (if any):"
size="50" type="text" />
</td>
</tr>
<tr>
<td valign="middle">
When was the last time it worked properly:
</td>
<td>
<input id="phonenumber_singleuser" name=
"phonenumber_singleuser" size="50" type="text" />
</td>
</tr>
<tr>
<td valign="top">
Have there been any changes to your PC since the last
time it worked properly:
</td>
<td>
<input id="client1" name="client1" size="50" type=
"text" />
</td>
</tr>
<tr>
<td valign="middle">
Have you changed your password recently:
</td>
<td>
<input id="callername_singleuser" name=
"callername_singleuser" size="50" type="text" />
</td>
</tr>
</tbody>
</table><br />
<table style="font-size: 12pt;">
<tbody>
<tr>
<td valign="middle">
Trouble shooting steps (Detailed):
<textarea cols="50" rows="2">
</textarea>
</td>
</tr>
<tr>
<td valign="middle">
Additional Detail (links, screenshots etc...):
<textarea cols="50" rows="2">
</textarea>
</td>
</tr>
</tbody>
</table>
<div>
<br />
<table style=
"font-size: 12pt; border: 1px solid gray; height: 92px;"
width="612" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top">
Problem:
</td>
<td>
<input id="client1" name="client1" size="50" type=
"text" />
</td>
</tr>
<tr>
<td valign="top">
Cause:
</td>
<td>
<input id="client1" name="client1" size="50" type=
"text" />
</td>
</tr>
<tr>
<td valign="top">
Action:
</td>
<td>
<input id="client1" name="client1" size="50" type=
"text" />
</td>
</tr>
<tr>
<td valign="top">
Resolution:
</td>
<td>
<input id="client1" name="client1" size="50" type=
"text" />
</td>
</tr>
<tr>
<td align="right" width="150">
<input name="Reset" type="reset" value=
"Clear Template" />
</td>
<td align="right" width="450">
<input name="copyform" type="button" value=
"Copy" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
</form>

Here is a solution that uses a few lines of JS.
HTML
<p id="p1">Text</p>
<button onclick="copyToClipboard('#p1')">Copy TEXT</button>
JS
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}

input boxes value of table should not be greater then input box outside of table

Hello I have developed a form where input boxes value of table should not be greater then input box outside of table.
<form>
<div class="form-group">
<label class="label1 col-md-4">Total number of sanctioned seats
<span class="required"> * </span>
</label>
<div class="col-md-7">
<input type="text" class="form-control" id="sanctionedSeatsSummary">
</div>
</div>
<table class="eduleveles table table-bordered table-hover">
<thead>
<th></th>
<th>Faculty</th>
<th>Enter sanctioned seats</th>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
</tbody>
</table>
</form>
in above jsfiddle all ENTER SANCTIONED SEATS sum will not be greater then "Enter total number of sanctioned seats" in onchange.

You need to use jquery keyup event as I mentioned in fiddle.
Please check this fiddle
Here I just made textbox value blank if sum of three sanctioned seats are greater than total.
Also i have cleare 3 textbox if you chane total textbox
Open this link : https://jsfiddle.net/5y6na3wr/7/

$(document).ready(function(){
$(".seats").on('keyup',function(){
var total = parseInt(0) ;
$( ".seats" ).each(function( index ) {
if($(this).val()){
total = total + parseInt($(this).val());
}
});
if(total > $("#sanctionedSeatsSummary").val()){
alert("total sanctioned Seats are greater then given sanctioned Seats");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
<div class="form-group">
<label class="label1 col-md-4">Total number of sanctioned seats
<span class="required"> * </span>
</label>
<div class="col-md-7">
<input type="text" class="form-control" id="sanctionedSeatsSummary">
</div>
</div>
<table class="eduleveles table table-bordered table-hover">
<thead>
<th></th>
<th>Faculty</th>
<th>Enter sanctioned seats</th>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
</tbody>
</table>
</form>

check below snippet
$(document).ready(function(){
var ttl, val;
$("input[name=seats]").on('keyup', function(){
val = 0;
$("input[name=seats]").each(function(){
if(parseInt($(this).val().trim()) > 0)
val += parseInt($(this).val().trim());
});
ttl = parseInt($("#sanctionedSeatsSummary").val().trim());
if(val > ttl)
alert("your alert");
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="form-group">
<label class="label1 col-md-4">Total number of sanctioned seats
<span class="required"> * </span>
</label>
<div class="col-md-7">
<input type="text" class="form-control" id="sanctionedSeatsSummary">
</div>
</div>
<table class="eduleveles table table-bordered table-hover">
<thead>
<th></th>
<th>Faculty</th>
<th>Enter sanctioned seats</th>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
</tbody>
</table>
</form>

How can I hide/show a form when a button is clicked using javascript?

I actually need help to correct my code. I have watched a video from youtube but in that video, he use checkbox instead of button. so i'm having problem with the if else statement of the javascript. i have already checked the previous post that have same problem but couldn't find the one that can solve my problem. please help me. Thank you so much.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/tabMenu.css" rel="stylesheet" type="text/css" />
<style>
.hidden {
display:none;}
</style>
<script type="text/javascript">
function showHide()
{
var button = document.getElementById("butt");
var hiddeninput = document.getElementByClassName("hidden");
if(button.click)
{
hiddeninput.style.display = "block";
}
else
{
hiddeninput.style.display = "none";
}
}
</script>
</head>
<body>
<div id="navbar">
<div id="holder">
<ul>
<li>Employer Database</li>
<li>Company Presence</li>
<li>Company Promotion</li>
</ul>
</div><!--end of holder div -->
</div><!--end of navbar div -->
</br>
<p id="p1"><u>Employer List</u></p>
</br>
<table width="1345" height="113" border="1" id="table1">
<tr id="tr1">
<th width="46" height="35" scope="col">No.</th>
<th width="93" scope="col">Title</th>
<th width="157" scope="col">First Name</th>
<th width="171" scope="col">Last Name</th>
<th width="128" scope="col">Position</th>
<th width="130" scope="col">Sector</th>
<th width="178" scope="col">Company Name</th>
<th width="107" scope="col">Country</th>
<th width="97" scope="col">Email</th>
<th width="78" scope="col">Phone</th>
<th width="84" scope="col">Action</th>
</tr>
<tr>
<td height="34"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td height="34"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<br/>
<input name="addbutton" type="button" value="Add Employer" id="butt" onclick="showHide()"/>
<br/>
<br/>
<br/>
<form id="form1" action="add_employer.php" method="post" class="hidden">
<p align="left"><u><strong>Add Employer Detail</strong></u></p>
<br/>
<br/>
<TABLE cellpadding="5" cellspacing="2" align="center">
<TR>
<td><strong>Title </strong></td>
<td><strong>:
<input name="title" value="" type="text" size="50" maxlength="50">
</strong></td>
</TR>
<TR>
<td><strong>First Name </strong></td>
<td><strong>:
<input name="first_name" value="" type="text" size="50" maxlength="50">
</strong></td>
</TR>
<TR>
<td><strong>Last Name</strong></td>
<TD><strong>:
<input name="last_name" value="" type="text" size="50" maxlength="50">
</strong></TD>
</TR>
<TR>
<td><strong>Position</strong></td>
<TD><strong>:
<input name="position" value="" type="text" size="50" maxlength="50">
</strong></TD>
</TR>
<TR>
<td><strong>Sector</strong></td>
<TD><strong>:
<input name="sector" value="" type="text" size="50" maxlength="50">
</strong></TD>
</TR>
<TR>
<td><strong>Company Name</strong></td>
<TD><strong>:
<input name="company_name" value="" type="text" size="50" maxlength="50">
</strong></TD>
</TR>
<TR>
<td><strong>Country</strong></td>
<TD><strong>:
<input name="country" value="" type="text" size="50" maxlength="50">
</strong></TD>
</TR>
<TR>
<td><strong>Email</strong></td>
<TD><strong>:
<input name="email" value="" type="text" size="50" maxlength="50">
</strong></TD>
</TR>
<TR>
<td><strong>Phone</strong></td>
<TD><strong>:
<input name="phone" value="" type="text" size="50" maxlength="50">
</strong></TD>
</TR>
<TR>
<td><strong>Action</strong></td>
<TD><strong>:
<input name="action" value="" type="text" size="50" maxlength="50">
</strong>
<input name="addbutton" type="button" value="Add Employer"/>
<input name="clear" type="button" value="Clear"/>
</TD>
</TR>
</TABLE>
<br/>
<br/>
</form>
</body>
</html>

You can target the form using id and add remove class to show hide the form.
<style>
.hidden {
display:none;}
</style>
<script type="text/javascript">
function showHide() {
var hiddeninput = document.getElementById("form1");
if (hiddeninput.classList.contains("hidden")) {
hiddeninput.classList.remove("hidden");
}
else {
hiddeninput.classList.add("hidden");
}
}
</script>

Given that you're hiding the element with a class, you can show and hide it by removing and re-adding the class. The classList.toggle method* will do that:
function hide(id) {
var el = document.getElementById(id);
if (el && el.classList) {
el.classList.toggle('hidden');
}
}
<style type="text/css">
.hidden {
display: none;
}
</style>
<body>
<input id="foo"><br>
<button onclick="hide('foo')">Hide input</button>
</body>
* Note that the reference to MDN includes a polyfill for Element.classList to support older browsers.

how about this... ??
function showHide() {
var button = document.getElementById("butt");
var hiddeninput = document.getElementsByClassName("hidden");
var form1 = document.getElementById("form1");
if (form1 && form1.style.display=="none") {
form1.style.display = "block";
} else {
form1.style.display = "none";
}
}
<div id="navbar">
<div id="holder">
<ul>
<li>Employer Database
</li>
<li>Company Presence
</li>
<li>Company Promotion
</li>
</ul>
</div>
<!--end of navbar div -->
</br>
<p id="p1"><u>Employer List</u>
</p>
</br>
<table width="1345" height="113" border="1" id="table1">
<tr id="tr1">
<th width="46" height="35" scope="col">No.</th>
<th width="93" scope="col">Title</th>
<th width="157" scope="col">First Name</th>
<th width="171" scope="col">Last Name</th>
<th width="128" scope="col">Position</th>
<th width="130" scope="col">Sector</th>
<th width="178" scope="col">Company Name</th>
<th width="107" scope="col">Country</th>
<th width="97" scope="col">Email</th>
<th width="78" scope="col">Phone</th>
<th width="84" scope="col">Action</th>
</tr>
<tr>
<td height="34"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td height="34"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<br/>
<input name="addbutton" type="button" value="Add Employer" id="butt" onclick="showHide()" />
<br/>
<br/>
<br/>
<form id="form1" action="add_employer.php" method="post" style="display: none;">
<p align="left"><u><strong>Add Employer Detail</strong></u>
</p>
<br/>
<br/>
<TABLE cellpadding="5" cellspacing="2" align="center">
<TR>
<td><strong>Title </strong>
</td>
<td><strong>:
<input name="title" value="" type="text" size="50" maxlength="50">
</strong>
</td>
</TR>
<TR>
<td><strong>First Name </strong>
</td>
<td><strong>:
<input name="first_name" value="" type="text" size="50" maxlength="50">
</strong>
</td>
</TR>
<TR>
<td><strong>Last Name</strong>
</td>
<TD><strong>:
<input name="last_name" value="" type="text" size="50" maxlength="50">
</strong>
</TD>
</TR>
<TR>
<td><strong>Position</strong>
</td>
<TD><strong>:
<input name="position" value="" type="text" size="50" maxlength="50">
</strong>
</TD>
</TR>
<TR>
<td><strong>Sector</strong>
</td>
<TD><strong>:
<input name="sector" value="" type="text" size="50" maxlength="50">
</strong>
</TD>
</TR>
<TR>
<td><strong>Company Name</strong>
</td>
<TD><strong>:
<input name="company_name" value="" type="text" size="50" maxlength="50">
</strong>
</TD>
</TR>
<TR>
<td><strong>Country</strong>
</td>
<TD><strong>:
<input name="country" value="" type="text" size="50" maxlength="50">
</strong>
</TD>
</TR>
<TR>
<td><strong>Email</strong>
</td>
<TD><strong>:
<input name="email" value="" type="text" size="50" maxlength="50">
</strong>
</TD>
</TR>
<TR>
<td><strong>Phone</strong>
</td>
<TD><strong>:
<input name="phone" value="" type="text" size="50" maxlength="50">
</strong>
</TD>
</TR>
<TR>
<td><strong>Action</strong>
</td>
<TD><strong>:
<input name="action" value="" type="text" size="50" maxlength="50">
</strong>
<input name="addbutton" type="button" value="Add Employer" />
<input name="clear" type="button" value="Clear" />
</TD>
</TR>
</TABLE>
<br/>
<br/>
</form>

You can use jQuery for that.
For hiding do that in the onClick event on the button.
$( ".target" ).hide();
For showing
$( ".target" ).show();

Adding a row into my table which contain a select won't work

I want to add a row to my table to allow to the user to add data which will be inserted then into the data base.
I have imbricated tables (the coed given present just first row to simplify but it’s a long form given as a table).
My first problem is when I add the select to my getElementById it won’t work?
My second problem I don’t know if I can recuperate the fields added by the user and inserted them to my database?
I found the example that I have followed in ( Add table row in jQuery )
<html>
<head>
<script type="text/javascript">
function displayResult() {
document.getElementById("tabsalaire").insertRow(-1).innerHTML = '<td><input name="salaireparstatut4" id="salaireparstatut4" /></td>';
document.getElementById("tabtitulaire").insertRow(-1).innerHTML = '<td><input name="nbtitulaire4" id="nbtitulaire4" /></td>';
document.getElementById("tabfemale").insertRow(-1).innerHTML = '<td><input name="nbfemale4" id="nbfemale4" /></td>';
document.getElementById("tabsommeparstatut").insertRow(-1).innerHTML = '<td><input name="sommeparstatut4" id="sommeparstatut4" /></td>';
document.getElementById("selectstatus").insertRow(-1).innerHTML = '<td><select name="statutselect4" required> < option value = "" > choisir < /option> < option value = "Professeur" > Professeur < /option> < option value = "Assistant" > Assistant < /option> < /select> < input type = "hidden"
name = "EnseignementSuperieur"
value = "EnseignementSuperieur" / > < /td>';
}
</script>
</head>
<body>
<form method="post" action="processform.php">
<table border="1">
<tr>
<th>Add</th>
<th>Salaire annuel</th>
<th>nombre titulaire</th>
<th>Nombre femme</th>
<th>Somme</th>
<th>Statut</th>
<th>Type</th>
</tr>
<td>
<table>
<tr>
<td>
<button type="button" onClick="displayResult()">Insert new row</button>
</td>
</tr>
</table>
</td>
<td>
<table id="tabsalaire">
<tr>
<td>
<input name="salaireparstatut1" id="salaireparstatut1" />
</td>
</tr>
<tr>
<td>
<input name="salaireparstatut2" id="salaireparstatut2" />
</td>
</tr>
<tr>
<td>
<input name="salaireparstatut3" id="salaireparstatut3" />
</td>
</tr>
</table>
</td>
<td>
<table id="tabtitulaire">
<tr>
<td>
<input name="nbtitulaire1" id="nbtitulaire1" />
</td>
</tr>
<tr>
<td>
<input name="nbtitulaire2" id="nbtitulaire2" />
</td>
</tr>
<tr>
<td>
<input name="nbtitulaire3" id="nbtitulaire3" />
</td>
</tr>
</table>
</td>
<td>
<table id="tabfemale">
<tr>
<td>
<input name="nbfemale1" id="nbfemale1" />
</td>
</tr>
<tr>
<td>
<input name="nbfemale2" id="nbfemale2" />
</td>
</tr>
<tr>
<td>
<input name="nbfemale3" id="nbfemale3" />
</td>
</tr>
</table>
</td>
<td>
<table id="tabsommeparstatut">
<tr>
<td>
<input name="sommeparstatut1" id="sommeparstatut1" /> </td>
</tr>
<tr>
<td>
<input name="sommeparstatut2" id="sommeparstatut2" />
</td>
</tr>
<tr>
<td>
<input name="sommeparstatut3" id="sommeparstatut3" />
</td>
</tr>
</table>
</td>
<td>
<table id="selectstatus">
<tr>
<td>
<select name="statutselect1" required>
<option value="">choisir</option>
<option value="Professeur">Professeur</option>
<option value="Assistant">Assistant</option>
</select>
<input type="hidden" name="designationtypecadre1" value="EnseignementSuperieur" /> </td>
</tr>
<tr>
<td>
<select name="statutselect2">
<option value="">choisir</option>
<option value="Professeur">Professeur</option>
<option value="Assistant">Assistant</option>
</select>
<input type="hidden" name="designationtypecadre2" value="EnseignementSuperieur" /> </td>
</tr>
<tr>
<td>
<select name="statutselect3">
<option value="">choisir</option>
<option value="Professeur">Professeur</option>
<option value="ProfesseurConf">ProfesseurConf</option>
<option value="Assistant">Assistant</option>
</select>
<input type="hidden" name="designationtypecadre3" value="EnseignementSuperieur" /> </td>
</tr>
<tr></tr>
</table>
</td>
<th>
EnseignementSuperieur </th>
</tr>
<td> </td>
<td>
<input name="SubSommenbTitulaireTypeCadre" id="SubSommenbTitulaireProfChercheur" />
</td>
<td>
<input name="SubSommenbFemaleTypeCadre" id="SubSommenbFemaleProfChercheur" />
</td>
<td>
<input name="SubSommeNbProfTypeCadre" id="SubSommeNbProfChercheur" />
</td>
<td>
<input name="SubSommeSalaireAnnuelTypeCadre" id="SubSommeSalaireAnnuelProfChercheur" />
</td>
<th>Somme SUB</th>
<tr>
</tr>
<tr>
<td>
<input type="submit" name="Validate" value="Validate" />
</td>
</tr>
</table>
</body>
</html>

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