how hide and show <tr> table using jQuery - javascript

I have a table that I want to show and hide some use jquery, but it's not working.
$(document).ready(function() {
$("#a").hide();
$("#b").show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<table class="table ">
<tbody>
<div id="a">
<tr>
<th scope="row"> name </th>
<td>
<input id="name" type="text" class="form-control #error('name') is-invalid #enderror" name="name" required autocomplete="name" autofocus>
</td>
</tr>
<tr>
<th scope="row"> email </th>
<td>
<input id="email" type="text" class="form-control #error('email') is-invalid #enderror" name="email" required autocomplete="email" autofocus>
</td>
</tr>
</div>
<div id="b">
<tr>
<th scope="row"> Adress </th>
<td>
<input id="adressem" type="text" class="form-control #error('adressem') is-invalid #enderror" name="adressem" required autocomplete="adressem" autofocus>
</td>
</tr>
</div>
<tr>
<td>
<div class="pull-right">
<button type="submit" class="btn btn-warning btn-sm" value="modifier">modifier</button>
</div>
</td>
</tr>
</tbody>
</table>

Related

Im having trouble getting data from a html table

Im having trouble getting data from a html table all the other tutorials have text inside the td tag but I have a textfield and a textarea which I want to get the value of
I have tried
<script>
$(document).ready(function() {
//click on table body
$(".rubric_table tbody tr").on("click", function() {
var tableData = $(this).children("td").map(function() {
return $.trim($(this).text());
}).get();
var td = tableData[0]+'*'+tableData[1]+'*'+tableData[2]+'*'+tableData[3]+'*'+tableData[4];
})
})
</script>
And this is my table
<table class="rubric_table" id="rubricTable">
<thead>
<tr class="header-row">
<th>
<span>Criteria</span>
</th>
<th class="grading_scale">
<span>Grading scale</span>
</th>
<th style="width: 60px;">
<span>Pts</span>
</th>
</tr>
<tbody></tbody>
<tbody>
<tr class="rubric_row">
<td class="rubric_row_title">
<div class="rubric_row_relative">
<input type="text" placeholder="Add Title" class="rubric_title no_border_input">
<div class="rubric_row_details">
<textarea placeholder="Add Description" style="overflow: hidden; height: 32px;" class="no_border_input_textarea"></textarea>
</div>
</div>
</td>
<td>
<table class="grading-table">
<tbody>
<tr>
<td class="grading-wrapper">
<div class="grading-item first_grading_item">
<input type="text" class="no_border_input" value="4">
<textarea class="no_border_input_textarea">Excellent</textarea>
</div>
</td>
<td class="grading-wrapper">
<div class="grading-item">
<input type="text" class="no_border_input" value="4">
<textarea class="no_border_input_textarea">Excellent</textarea>
</div>
</td>
<td class="grading-wrapper">
<div class="grading-item">
<input type="text" class="no_border_input" value="4">
<textarea class="no_border_input_textarea">Excellent</textarea>
</div>
</td>
<td class="grading-wrapper">
<div class="grading-item">
<input type="text" class="no_border_input" value="4">
<textarea class="no_border_input_textarea">Excellent</textarea>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td class="rubric-row-pts">
<div class="rubric_points">
<input type="text" class="no_border_input" value="40">
</div>
</td>
</tr>
</tbody>
</thead>
</table>
I expected that my code would alert the values of the textfield and textarea but it doesn't.
Thanks

If you wan to get the values of the input, you can:
$(".rubric_table>tbody>tr") you have to use this selector in
adding click event. You have a table inside the table (I dont think
is ideal). To make sure you are only adding event on the direct tr
of .rubric_table
You have to loop thru each input of th and get their values.
$(".rubric_table>tbody>tr").on("click", function() {
var tableData = $(this).children("td").map(function() {
return $(this).find('input').map(function() {
return this.value;
}).get();
}).get();
console.log(tableData);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="rubric_table" id="rubricTable">
<thead>
<tr class="header-row">
<th>
<span>Criteria</span>
</th>
<th class="grading_scale">
<span>Grading scale</span>
</th>
<th style="width: 60px;">
<span>Pts</span>
</th>
</tr>
<tbody></tbody>
<tbody>
<tr class="rubric_row">
<td class="rubric_row_title">
<div class="rubric_row_relative">
<input type="text" placeholder="Add Title" class="rubric_title no_border_input">
<div class="rubric_row_details">
<textarea placeholder="Add Description" style="overflow: hidden; height: 32px;" class="no_border_input_textarea"></textarea>
</div>
</div>
</td>
<td>
<table class="grading-table">
<tbody>
<tr>
<td class="grading-wrapper">
<div class="grading-item first_grading_item">
<input type="text" class="no_border_input" value="4">
<textarea class="no_border_input_textarea">Excellent</textarea>
</div>
</td>
<td class="grading-wrapper">
<div class="grading-item">
<input type="text" class="no_border_input" value="4">
<textarea class="no_border_input_textarea">Excellent</textarea>
</div>
</td>
<td class="grading-wrapper">
<div class="grading-item">
<input type="text" class="no_border_input" value="4">
<textarea class="no_border_input_textarea">Excellent</textarea>
</div>
</td>
<td class="grading-wrapper">
<div class="grading-item">
<input type="text" class="no_border_input" value="4">
<textarea class="no_border_input_textarea">Excellent</textarea>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td class="rubric-row-pts">
<div class="rubric_points">
<input type="text" class="no_border_input" value="40">
</div>
</td>
</tr>
</tbody>
</thead>
</table>

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();

Two Tables Moving when Hide row in one table?

When I select a drop down I want to hide specific rows in one table without the other one moving. How can I make the table fixed so it does not move once something is hidden? I am trying to add spacer on the bottom left table but it is still moving in Chrome/IE 10. Need it to work for both browsers.
Here is the fiddle: http://jsfiddle.net/xha4tb74/4/
I am calling the change of rows when the database field is selected.
onchange="database_details();"

Do you just want the table to stay aligned at the top? If so you can just set the valign attribute on the td.
Code below and updated fiddle here: http://jsfiddle.net/xha4tb74/6/
<body>
<form action="GenerateTDE" method="post" id="inputForm" class="pure-form h5-defaults pure-form-stacked">
<table align="center" style="width:1300px;">
<td valign="top">
<table>
<tr>
<th colspan="2" style="background-color: #0072bc;"><span style="color: white;">Database Details</span>
</th>
</tr>
<tr>
<th>* Database</th>
<th class="th_background">
<select id="database" class="form-control" name="database" onchange="database_details()">
<option value="oracle" selected="selected"><b>Oracle</b>
</option>
<option value="mssql"><b>Sql Server</b>
</option>
<option value="teraData"><b>TeraData</b>
</option>
<option value="epic"><b>Generic ODBC(Chronicles)</b>
</option>
<option value="sas"><b>SAS</b>
</option>
</select>
</th>
</tr>
<tr>
<th colspan="2" style="background-color: #0072bc;"></th>
</tr>
<tr class="servicerow">
<th>* Service ID</th>
<th class="th_background">
<input type="text" id="sidText" name="sid" class="form-control" style="width: 100%" placeholder="Enter SID">
</th>
</tr>
<tr class="portrow">
<th>* Port</th>
<th class="th_background">
<input type="text" id="portText" name="port" class="form-control" style="width: 30%" value="1521" placeholder="Enter port">
</th>
</tr>
<tr class="dbNamerow">
<th>* DB Name</th>
<th class="th_background">
<input type="text" id="dbText" name="dbName" style="width: 100%" class="form-control" placeholder="Enter database name">
</th>
</tr>
<tr class="dbdnsrow">
<th>* DB DNS Name</th>
<th class="th_background">
<input type="text" id="dnsText" name="url" style="width: 100%" class="form-control" placeholder="Enter DNS">
</th>
</tr>
<tr class="librefsrow">
<th>* Lib Refs</th>
<th class="th_background">
<input type="text" id="librefs" name="librefs" style="width: 100%" class="form-control" placeholder="Enter Librefs">
</th>
</tr>
<tr class="hostrow">
<th>* Host</th>
<th class="th_background">
<input type="text" id="hostText" name="host" style="width: 100%" class="form-control" placeholder="Enter host Name">
</th>
</tr>
<tr class="userrow">
<th>* Database User</th>
<th class="th_background">
<input type="text" id="userText" name="user" style="width: 100%" class="form-control" placeholder="Enter user Name">
</th>
</tr>
<tr class="passwordrow">
<th>* Database Password</th>
<th class="th_background">
<input type="password" id="passwordText" style="width: 100%" name="password" class="form-control" placeholder="Enter database password">
</th>
</tr>
<tr>
<th colspan="2" style="background-color: #0072bc;"><span style="color: white;">* Name of TDE File</span><span data-toggle="tooltip" title="TDE Name should be unique for a site and project"><i class="fa fa-question-circle"></i></span>
</th>
</tr>
<tr>
<th>Enter new TDE Name
<br>Or
<br>Select from already existing TDEs</th>
<th class="th_background">
<input type="text" id="tdeNameText" onclick="resetTDENameDropdown();" onblur="validateTdeName();" name="tdeName" style="width: 100%" class="form-control" placeholder="Enter TDE Name">Or
<br>
<select id="tdeNameDropDown" class="form-control" name="tdeNameDropDown" onchange="clearTDEName();">
<label for="tdeNameDropDown"></label>
<option value="">---Select TDE Name---</option>
</select>
</th>
</tr>
<tr>
<th colspan="2" style="background-color: #0072bc;"><span style="color: white;"></span>
</th>
</tr>
<tr>
<th>* Job Name <span data-toggle="tooltip" title="Job name should be unique for a user"><i class="fa fa-question-circle"></i></span>
</th>
<th class="th_background">
<input type="text" id="jobName" name="jobName" class="form-control" placeholder="Enter Job Name" style="width: 100%" required onblur="validateJobName();">
</th>
</tr>
<tr>
<th colspan="2" style="background-color: #0072bc;"><span style="color: white;"><input type="checkbox"
name="scheduler" id="scheduler" value="yes"
onclick="hide_time();"> Schedule TDE Generation Job </span>
</th>
</tr>
<tr>
<th>* Schedule List</th>
<th class="th_background">
<select id="cronSchedule" class="form-control" name="cronSchedule" disabled>
<label for="cronSchedule"></label>
<option value="">---Select Schedule</option>
</select> <a href="/TableauDataExtractApp-1/scheduleMainPage.jsp">Create
Schedule</a>
</th>
</tr>
<tr id="filler" style="border-bottom: #d8d8d8 .1px solid;">
<th style="height: 49px;visibility: hidden;">filler</th>
</tr>
</table>
</td>
<td>
<table style="margin-top:6px !important;">
<tr>
<th colspan="2" style="background-color: #0072bc;"><span style="color: white;">TDE Refresh Options</span>
</th>
</tr>
<tr>
<th class="th_background">
<input type="radio" name="refreshTde" value="yes" checked> <span data-toggle="tooltip" title="This option creates new TDE or replaces existing TDE file with full data.">Full
Refresh <i class="fa fa-question-circle"></i></span>
</th>
<th class="th_background">
<input type="radio" name="refreshTde" value="no"> <span data-toggle="tooltip" title="This option appends existing TDE. Should have same data items in the SQL.">Incremental
Refresh <i class="fa fa-question-circle"></i></span>
</th>
</tr>
<tr>
<th colspan="2" style="background-color: #0072bc;"><span style="color: white;">* SQL Query to Generate TDE</span>
</th>
</tr>
<tr>
<th class="th_background">
<input type="radio" id="query_upload" name="group1" onclick="sql_toggle();">Upload SQL File</th>
<th class="th_background">
<input type="radio" id="query_radio" name="group1" onclick="sql_toggle();">SQL Query</th>
</tr>
<tr class="uploadSQL">
<th class="th_background" colspan="2">
<input type="file" style="display: inline;" name="queryUpload" id="upload_querys">
<input type="button" onclick="formatSQL();" id="formatButton" value="Format SQL"></input>
</th>
</tr>
<tr class="textSQL">
<th colspan="2" style="background-color: #0072bc;">
<textarea rows="29" style="width: 100% !important;" id="query" placeholder="Enter query" name="query" required></textarea>
</th>
</tr>
</table>
</td>
</tr>
<tr style="
border-bottom: none;
">
<th colspan="4">
<center>
<input type="submit" class="pure-button pure-button-primary" value="Generate TDE">
<input type="button" value=" Reset " class="pure-button pure-button-primary" onclick="resets();">
</center>
</th>
</tr>
</table>
</form>

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