Set up an Onclick event handler by HTML for undo link - javascript

I want to set up and write an onclick event handler by HTML for the undo link. Delete the last ordered item for every clicking of the undo link and update total quantity. And cancel the onclick event at the end of the event handler (i.e. clicking the link will not go to any destination, not even an internal link).
How should I modify my script to make these possible? Thanks!
<div id="Sushi" class="tabcontent">
<form action="#" method="get">
<table border="0" style="width:100%">
<tr>
<td>
<img src="sushi-1.jpg" id="su1-img" title="Sushi Set A">
<input id="su1-qty" type="number" name="input" placeholder="1" style="width:50px; height:20px">
<input id="su1" type="submit" class="button" value="Add" name="Add" style="width:55px; height:25px">
</td>
<td>
<img src="sushi-2.jpg" id="su2-img" title="Sushi Set B">
<input id="su2-qty" type="number" name="input" placeholder="1" style="width:50px; height:20px">
<input id="su2" type="submit" class="button" value="Add" name="Add" style="width:55px; height:25px">
</td>
<td>
<img src="sushi-3.jpg" id="su3-img" title="Sushi Set C" width="125" height="135">
<input id="su3-qty" type="number" name="input" placeholder="1" style="width:50px; height:20px">
<input id="su3" type="submit" class="button" value="Add" name="Add" style="width:55px; height:25px">
</td>
</tr>
<tr>
<td rowspan="3">
<img src="sushi-4.jpg" id="su4-img" title="Sushi Set D">
<input id="su4-qty" type="number" name="input" placeholder="1" style="width:50px; height:20px">
<input id="su4" type="submit" class="button" value="Add" name="Add" style="width:55px; height:25px">
</td>
</tr>
</table>
</form>
</div>
<div id="Drinks" class="tabcontent">
<form action="#" method="get">
<table border="0" style="width:100%">
<tr>
<td>
<img src="drink-1.jpg" id="dr1-img" title="Guava juice">
<input id="dr1-qty" type="number" name="input" placeholder="1" style="width:50px; height:20px">
<input id="dr1" type="submit" class="button" value="Add" name="Add" style="width:55px; height:25px">
</td>
<td>
<img src="drink-2.jpg" id="dr2-img" title="Lemonade">
<input id="dr2-qty" type="number" name="input" placeholder="1" style="width:50px; height:20px">
<input id="dr2" type="submit" class="button" value="Add" name="Add" style="width:55px; height:25px">
</td>
<td>
<img src="drink-3.jpg" id="dr3-img" title="Orange juice" width="125" height="135">
<input id="dr3-qty" type="number" name="input" placeholder="1" style="width:50px; height:20px">
<input id="dr3" type="submit" class="button" value="Add" name="Add" style="width:55px; height:25px">
</td>
</tr>
</table>
</form>
</div>
<div id="Dessert" class="tabcontent">
<form action="#" method="get">
<table border="0" style="width: 100%;">
<tr>
<td>
<img src="dessert-1.jpg" id="de1-img" title="Raspberry cheese cake" width="140" height="125">
<input id="de1-qty" type="number" name="input" placeholder="1" style="width:50px; height:20px">
<input id="de1" type="submit" class="button" value="Add" name="Add" style="width:55px; height:25px">
</td>
</tr>
</table>
</form>
</div>
<div style="border:0px;" id="order">
<center>
<h2><b>Ordered Items</b></h2>
14 Mar 2017 15:59
<br><br>
Table:4 - No. of Guests 3
<table class="nth-table" id="orderlist" border="1">
<thread>
<tr>
<th>Description</th>
<th>Qty</th>
</tr>
</thread>
<tbody>
<tr>
</tr>
</tbody>
<tfoot>
<tr>
<td align="left"><strong>Total</strong></td>
<td align="right" id="val"><strong></strong></td>
</tr>
</tfoot>
</table>
<br>
<div class="noPrint">
undo
</div>
</center>
<br>
</div>
<script>
var total = 0;
function registerHandlers() {
var buttons = document.querySelectorAll('.button');
[].slice.call(buttons).forEach(function(button) {
button.addEventListener('click', onClick, false);
});
}
function onClick(event) {
event.preventDefault();
var button = event.target;
var id = button.id;
var desc = document.getElementById(id + '-img').getAttribute('title');
var qty = document.getElementById(id + '-qty').value;
total += parseInt(qty)
addToTable(desc, qty);
}
function addToTable(desc, qty) {
var row = '<tr><td align="left">' + desc + '</td><td align="right">' + qty + '</td></tr>';
var tbody = document.querySelector('#orderlist tbody');
tbody.innerHTML = tbody.innerHTML + row;
document.getElementById("val").innerHTML = total;
}
registerHandlers();
</script>

The procedure for adding any event handler to any element is always the same.
There are three steps:
Grab the element
Declare the function
Attach the EventListener to the element, including the callback which references the declared function
Here is an example:
// GRAB THE ELEMENT
const myUndoLink = document.getElementsByClassName('my-undo-link')[0];
// DECLARE THE FUNCTION
const myUndoFunction = () => {
[... FUNCTION HERE...]
}
// ATTACH THE EVENT LISTENER TO THE ELEMENT
myUndoLink.addEventListener('click'), myUndoFunction, false);

Related

Delete dynamically created rows with jquery and bind / update cash totals

Not able to delete rows created dynamically. .add-row will create the dynamic row but the .delete will not remove it. the initial .item-row will however execute the click event and remove that row.
the click event never seems to fire on the added rows?
<form action="insert.php" id="testinsert" method="POST">
<input type="submit" value="Submit" />
</form>
<!--div class="font-effect-shadow-multiple">This is a font effect!<div-->
<div id="page-wrap">
<textarea id="header">INVOICE</textarea>
<div id="identity">
<div form ="testinsert" name="business-address" id="business-address">
<span id="cmtext">Fix it Guy </span><br>
43150 Your Drive<br>
Potomac City, MD 20901<br>
Phone: (301) 555-5580</div>
<div id="logo">
<div id="logoctr">
Change Logo
Save
|
Delete Logo
Cancel
</div>
<div id="logohelp">
<input id="imageloc" type="text" size="50" value="" /><br />
(max width: 540px, max height: 100px)
</div>
<img id="image" src="images/CM_LOGO.JPG" alt="logo" />
</div>
</div>
<div style="clear:both"></div>
<div id="customer">
<div class="container">
<div class="space"></div>
<!--
<textarea form ="testinsert" name="customer" id="customer-title">Customer Name</textarea>
-->
<textarea form ="testinsert" name="address" id="address-title">Customer Invoices</textarea>
<textarea form ="testinsert" name="address1" id="address-one"></textarea>
<!--
<textarea form ="testinsert" name="address2" id="address-two">..</textarea>
<textarea form ="testinsert" name="address3" id="address-three"></textarea>
-->
</div>
<img src="http://www.jeffbarclay.com/invoice/images/green-plus.png" class="lookup-cust-plus" id="look"/>
<table id="meta">
<tr>
<td class="meta-head">Invoice #</td>
<td><textarea form ="testinsert" id="invoice_num" name="invoice">20170130</textarea></td>
</tr>
<tr>
<td form ="testinsert" name="date" class="meta-head">Date</td>
<td><textarea id="date">Janruary 30, 1960</textarea></td>
</tr>
<tr>
<td class="meta-head">Amount Due</td>
<td><div class="due">$0.00</div></td>
</tr>
</table>
</div>
<table id="items">
<tr>
<th>Item</th> <th>Description</th> <th>Unit Cost</th> <th>Quantity</th> <th>Price</th>
</tr>
<tr class="item-row">
<td class="item-name"><div class="delete-wpr"><textarea form ="testinsert" name="item_name[]"></textarea>
<a class="delete" href="javascript:;" title="Remove row">X</a>
<a class="add-product" href="javascript:;" title="Add Product">A</a>
</div></td>
<td class="description"><textarea form ="testinsert" name="item_desc[]"></textarea></td>
<td><textarea class="cost" form ="testinsert" name="item_cost[]"></textarea></td>
<td><textarea class="qty" form ="testinsert" name="item_qty[]"></textarea></td>
<td><span class="price" form ="testinsert" name="item_price[]"></span></td>
</tr>
<tr id="hiderow">
<td colspan="5">
<img src="http://www.jeffbarclay.com/invoice/images/rows.png" width="30px" height="auto" id="addrow" href="javascript:;" title="Add a row"/>
<img src="http://www.jeffbarclay.com/invoice/images/products.png" width="30px" height="auto" href="javascript:;" id="fill-invoice" class="add-invoice" title="Add Invoice"/>
<img src="http://www.jeffbarclay.com/invoice/images/products.png" width="30px" height="auto" href="javascript:;" id="recall_product" class="recall-product" title="Recall Product"/>
</td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Subtotal</td>
<td class="total-value"><div id="subtotal">$0.00</div></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Total</td>
<td class="total-value"><div id="total">$0.00</div></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Amount Paid</td>
<td class="total-value"><textarea id="paid">$0.00</textarea></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line balance">Balance Due</td>
<td class="total-value balance"><div id="owed" class="due">$0.00</div></td>
</tr>
</table>
<input type="hidden" form ="testinsert" name="xdate" id="xdate"></input>
<input type="hidden" form ="testinsert" name="sales" id="sales"></input>
<input type="hidden" form ="testinsert" name="owed" id="owed"></input>
<input type="hidden" form ="testinsert" name="deducted" id="deducted"></input>
<input type="hidden" form ="testinsert" name="auto_num" id="auto_num"></input>
<div id="terms">
<h5>Terms</h5>
<textarea>NET 30 Days. Finance Charge of 1.5% will be made on unpaid balances after 30 days.</textarea>
</div>
</div>
<!--Contact Form -->
<div id="store_customer_div">
<form class="form" action="insert_customer.php" id="contact" method="POST">
<img src="images/button_cancel.png" class="img" id="cancel"/>
<h3>Store Customers</h3>
<hr/><br/>
<label>Customer Name: <span>*</span></label>
<br/>
<input type="text" id="name" placeholder="Name" name="customer"/><br/>
<br/>
<label>Email: <span>*</span></label>
<br/>
<input type="text" id="email" placeholder="Email" name="email"/><br/>
<br/>
<label>Contact No: <span></span></label>
<br/>
<input type="text" id="contactno" placeholder="10 digit Mobile no." name="contact"/><br/>
<br/>
<label>Address 1: <span></span></label>
<br/>
<input type="text" id="address1" placeholder="address1" name="address1"/><br/>
<br/>
<label>Address 2: <span></span></label>
<br/>
<input type="text" id="address2" placeholder="address2" name="address2"/><br/>
<br/>
<label>Address 3: <span></span></label>
<br/>
<input type="text" id="address3" placeholder="address3" name="address3"/><br/>
<br/>
<input type="button" id="send" value="Store Customer"/><br/>
</form>
</div>
<!--Product Form -->
<div id="store_product_div">
<form class="form" action="insert_products.php" id="form_product" method="POST">
<img src="images/button_cancel.png" class="img" id="p_cancel"/>
<h3>Store Products</h3>
<hr/><br/>
<label>Product Name: <span>*</span></label>
<br/>
<input type="text" id="p_name" placeholder="Product Name" name="product"/>
<br/>
<label>Rate: <span>*</span></label>
<br/>
<input type="text" id="p_rate" placeholder="Sales Price $" name="rate"/><br/>
<br/>
<label>Cost: <span>*</span></label>
<br/>
<input type="text" id="p_cost" placeholder="Cost" name="cost"/><br/>
<br/>
<label>Taxable: <span>*</span></label>
<br/>
<input type="text" id="p_tax" placeholder="Taxable" name="taxable"/><br/>
<br/>
<label>Description: <span>*</span></label>
<br/>
<input type="text" id="p_desc" placeholder="Description" name="desc"/><br/>
<br/>
<input type="submit" id="send" value="Store Product"/><br/>
</form>
</div>
<div id="customer_div">
<form class="form" action="customer_fill.php" id="contact" method="GET">
<img src="images/button_cancel.png" class="img" id="cancel"/>
<h2>Customer List</h2>
<ul id="dropdown" name="ddname"></ul>
</form>
</div>
<div id="product_div">
<form class="form" action="product_fill.php?action=fill" id="contact" method="GET">
<img src="images/button_cancel.png" class="img" id="cancel"/>
<h2>Product List</h2>
<ul id="ddproduct" name="ddproductname"></ul>
</form>
</div>
<div id="invoice_div">
<form class="form" action="invoice_fill.php" id="contact" method="GET">
<img src="images/button_cancel.png" class="img" id="cancel"/>
<h2>Invoice List</h2>
<ul id="ddinvoice" name="ddinvoicename"></ul>
</form>
</div>
JS:
see: https://jsfiddle.net/xzt1krqn/
$(".delete").on('click', function() {
$(this).parents('.item-row').remove();
update_total();
if ($(".delete").length < 2) $(".delete").hide();
});
You have to use document selector for selecting dynamically created elements.
$(document).on('click','.delete',function(){
$(this).parents('.item-row').remove();
update_total();
if ($(".delete").length < 2) $(".delete").hide();
});

How to Show Form Post data on same page Asynchronously (without refreshing page)?

i am working on small project.. In one module, i need to do some entries using multiple forms. and i need that added form data(respective table data) to be displayed in same page after adding each value.
So, that user will get to know what data he inserted.
Pls look at the code.
<div class="container">
<div class="row">
<br><br>
<h4> School Name: <?php echo $sn; ?>
</h4>
</div>
</div>
<div class="container col-md-offset-1 col-md-7">
<h3>Budget/Students Count:</h3>
<br>
<ul class="nav nav-tabs">
<li class="active">K6</li>
<li>K7</li>
<li>K8</li>
<li>K9</li>
<li>K10</li>
<li>K11 SC</li>
<li>K12 SC</li>
<li>K11 NSC</li>
<li>K12 NSC</li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<form name="add_name" id="add_name" class="col-md-5">
<table class="table" id="dynamic_field">
<tr>
<td><label style="font-size:10px;"></label></td>
<td><label style="font-size:10px;"></label></td>
<td><label style="font-size:12px;">Section</label></td>
<td><label style="font-size:12px;">#of students</label> </td>
<td><label style="font-size:10px;"></label></td>
</tr>
<tr>
<td> <input type="text" name="idref" id="idref" class="form-control input-xs" value="<?php echo $idk; ?>" style=" width:35px; height:20px; visibility: hidden;"> </td>
<td> K6: <input type="text" name="clas" id="clas" class="form-control input-xs" value="6" style=" width:35px; height:20px; visibility: hidden;"> </td>
<td> <input type="text" name="k[]" id="k" class="form-control k_list " style="width:45px; height:28px"> </td>
<td> <input type="text" name="name[]" id="name" class="form-control name_list" style="width:80px; height:28px"> </td>
<td> <button type="button" name="add" id="add" class="btn btn-success btn-xs">add</button> </td>
</tr>
</table>
<input type="submit" name="submit" id="submit" value="submit" class="btn-success btn-xs" style="margin-left:170px;">
<input type="reset" name="Reset" class="btn-success btn-xs">
</form>
</div>
<div id="menu1" class="tab-pane fade">
<form name="add_name1" id="add_name1" class="col-md-5">
<table class="table" id="dynamic_field1">
<tr>
<td><label style="font-size:10px;"></label></td>
<td><label style="font-size:10px;"></label></td>
<td><label style="font-size:12px;">Section</label></td>
<td><label style="font-size:12px;">#of students</label> </td>
</tr>
<tr>
<td> <input type="text" name="idref" id="idref" class="form-control input-xs" value="<?php echo $idk; ?>" style=" width:35px; height:20px; visibility: hidden;"> </td>
<td> K7: <input type="text" name="clas" id="clas" class="form-control input-xs" value="7" style=" width:35px; height:20px; visibility: hidden;"> </td>
<td> <input type="text" name="k[]" id="k" class="form-control k_list" style="width:45px; height:28px"> </td>
<td> <input type="text" name="name[]" id="name" class="form-control name_list" style="width:80px; height:28px"> </td>
<td> <button type="button" name="add" id="add1" class="btn btn-success btn-xs">add</button> </td>
</tr>
</table>
<input type="submit" name="submit" id="submit1" value="submit" class="btn-success btn-xs" style="margin-left:170px;">
<input type="reset" name="Reset" class="btn-success btn-xs">
</form>
</div>
<div id="menu2" class="tab-pane fade">
<form name="add_name2" id="add_name2" class="col-md-5">
<table class="table" id="dynamic_field2">
<tr>
<td><label style="font-size:10px;"></label></td>
<td><label style="font-size:10px;"></label></td>
<td><label style="font-size:12px;">Section</label></td>
<td><label style="font-size:12px;">#of students</label> </td>
</tr>
<tr>
<td> <input type="text" name="idref" id="idref" class="form-control input-xs" value="<?php echo $idk; ?>" style=" width:35px; height:20px; visibility: hidden;"> </td>
<td> K8: <input type="text" name="clas" id="clas" class="form-control input-xs" value="8" style="width:35px; height:20px; visibility: hidden;"> </td>
<td> <input type="text" name="k[]" id="k" class="form-control k_list" style="width:45px; height:28px"> </td>
<td> <input type="text" name="name[]" id="name" class="form-control name_list" style="width:80px; height:28px"> </td>
<td> <button type="button" name="add" id="add2" class="btn btn-success btn-xs">add</button> </td>
</tr>
</table>
<input type="submit" name="submit" id="submit2" value="submit" class="btn-success btn-xs" style="margin-left:170px;">
<input type="reset" name="Reset" class="btn-success btn-xs">
</form>
</div>
Script:
$(document).ready(function() {
$(".nav-tabs a").click(function(){
$(this).tab('show');
});
});
$(function() {
var i = 1;
$("#add").click(function() {
i++;
$('#dynamic_field').append('<tr id="row'+i+'"><td></td><td></td><td> <input type="text" name="k[]" id="k'+i+'" class="form-control name_list" style="width:35px; height:20px" > </td><td> <input type="text" name="name[]" id="name" class="form-control name_list" style="width:55px; height:20px"> </td><td> <button name="remove" id="'+i+'" class="btn btn-danger btn_remove btn-xs">X</button> </td></tr>');
});
$(document).on('click','.btn_remove', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
$("#add1").click(function() {
i++;
$('#dynamic_field1').append('<tr id="row'+i+'"><td></td><td></td><td> <input type="text" name="k[]" id="k'+i+'" class="form-control name_list" style="width:35px; height:20px" > </td><td> <input type="text" name="name[]" id="name" class="form-control name_list" style="width:55px; height:20px"> </td><td> <button name="remove" id="'+i+'" class="btn btn-danger btn_remove btn-xs">X</button> </td></tr>');
});
$(document).on('click','.btn_remove', function() {
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
$('#submit').click(function() {
$.ajax({
url: "section.php",
data: $('#add_name').serialize(),
success: function(data) {
alert(data);
$('#add_name')[0].reset();
}
});
});
$('#submit1').click(function() {
$.ajax({
url: "section.php",
data: $('#add_name1').serialize(),
success: function(data) {
alert(data);
$('#add_name1')[0].reset();
}
});
});
In section.php i have written sql query insertion.
Now what i need is, i need this entered data to be displayed in same page. and table should be updated every time when i add new value.
$.ajax({
type:"GET",
url:"path/to/file",
data: 'your data',
success:function(html){
$('.response').html(html); //this return response to your page
}
})

Cannot set property 'innerHTML' of null at validatename_degree

I have already seen the pages here for this error, but neither window.load nor putting script in the div block have solved it. If I write document.getElementById("fullname_error"), it is working, but it is not working with document.getElementById(ident) though the var ident is equal to the id of p , I have checked it.
<div class="most_page">
<div id="form_container" >
<form action="register.php" method="post" name="reg_doc">
<table class="table">
<tr>
<td>Full name</td>
<td><input type="text" name="fullname" value="Full name" ></td>
<td><p id="fullname_error" > hh</p></td>
</tr>
<tr>
<td>Address</td>
<td><input type="text" name="address" onkeypress='validatename_degree(fullname.value,fullname_error.id);' value="Address"></td>
</tr>
</table>
<button class="button" id="submitreg" ><input id="submit" type="submit" value="submit"></button>
<script type="text/javascript">
function validatename_degree(x,ident) {
var iden='"'+ident+'"';
document.getElementById(iden).innerHTML=iden;
}
</script>
</form>
</div>
</div>
You don't require var iden='"'+ident+'"'; just use var iden=ident;. Please try this.
<!DOCTYPE html>
<html>
<body>
<div class="most_page">
<div id="form_container">
<form action="register.php" method="post" name="reg_doc">
<table class="table">
<tr>
<td>Full name</td>
<td>
<input type="text" name="fullname" value="Full name">
</td>
<td>
<p id="fullname_error"> hh</p>
</td>
</tr>
<tr>
<td>Address</td>
<td>
<input type="text" name="address" onkeypress='validatename_degree(fullname.value,fullname_error.id);' value="Address">
</td>
</tr>
</table>
<button class="button" id="submitreg">
<input id="submit" type="submit" value="submit">
</button>
<script type="text/javascript">
function validatename_degree(x, ident) {
var iden = ident;
document.getElementById(iden).innerHTML = iden;
}
</script>
</form>
</div>
</div>
</body>
</html>
Just pass the parameter ident to the document.getElementById property and use the your existing code,below is a working snippet
<div class="most_page">
<div id="form_container" >
<form action="register.php" method="post" name="reg_doc">
<table class="table">
<tr>
<td>Full name</td>
<td><input type="text" name="fullname" value="Full name" ></td>
<td><p id="fullname_error" > hh</p></td>
</tr>
<tr>
<td>Address</td>
<td><input type="text" name="address" onkeypress='validatename_degree(fullname.value,fullname_error.id);' value="Address"></td>
</tr>
</table>
<button class="button" id="submitreg" ><input id="submit" type="submit" value="submit"></button>
<script type="text/javascript">
function validatename_degree(x,ident) {
console.log(""+ident)
var iden='"'+ident+'"';
document.getElementById(ident).innerHTML=iden;
}
</script>
</form>
</div>
</div>

How to get the user input from buttons to display in the text box using function (for-loop)?

How to get the numbers displayed in the display textbox when the user clicks the number buttons? I do not know what to put in my numInputF() function, I want to use a for-loop function, but I do not know how.
<script>
var initialMoney = 1000; //Customer's initial money is $1000
var display;
/* Set the "Type amount and select operation to blank." */
function setBlankF(){
document.getElementById("display").value = "";
}
/* Gets the user input when buttons are clicked. */
function numInputF(){
}
This is my body part. I know that I should put something on the onclick button, but I have not figured out how to make my function, which is why it is blank.
<table border="1">
<caption>ATM 360</caption>
<tr>
<td colspan="4">
<input type="text" id="display" value="Type amount and select operation" size="30" onclick="setBlankF()">
</td>
</tr>
<tr>
<td>
<input type="button" value="1" onclick="">
</td>
<td>
<input type="button" value="2" onclick="">
</td>
<td>
<input type="button" value="3" onclick="">
</td>
<td>
<input type="button" value="Withdrawal" id="withdraw" onclick="">
</td>
</tr>
<tr>
<td>
<input type="button" value="4" onclick="">
</td>
<td>
<input type="button" value="5" onclick="">
</td>
<td>
<input type="button" value="6" onclick="">
</td>
<td>
<input type="button" value="Deposit" id="deposit" onclick="">
</td>
</tr>
<tr>
<td>
<input type="button" value="7" onclick="">
</td>
<td>
<input type="button" value="8" onclick="">
</td>
<td>
<input type="button" value="9" onclick="">
</td>
<td>
<input type="button" value="Retype" id="retype" onclick="">
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="button" value="0" onclick="">
</td>
<td>
</td>
<td>
<input type="button" value="End" id="end" onclick="">
</td>
</tr>
</table>
Thank you in advance.
First attach the click event to all the buttons, so get all buttons elements with type=button using .querySelectorAll() then loop through them and pick one by one buttons[i] and attach the click event using .addEventListener this click will lead us to the function numInputF as defined in the passed arguments :
var buttons = document.querySelectorAll('[type="button"]');
for(var i=0;i<buttons.length;i++){
buttons[i].addEventListener("click", numInputF, false);
}
Then in your function you could get the value like :
function numInputF(){
alert(this.value);
}
Hope this helps.
var buttons = document.querySelectorAll('[type="button"]');
for(var i=0;i<buttons.length;i++){
buttons[i].addEventListener("click", numInputF, false);
}
function numInputF(){
alert(this.value);
}
<table border="1">
<caption>ATM 360</caption>
<tr>
<td colspan="4">
<input type="text" id="display" value="Type amount and select operation" size="30" onclick="setBlankF()">
</td>
</tr>
<tr>
<td>
<input type="button" value="1" onclick="">
</td>
<td>
<input type="button" value="2" onclick="">
</td>
<td>
<input type="button" value="3" onclick="">
</td>
<td>
<input type="button" value="Withdrawal" id="withdraw" onclick="">
</td>
</tr>
<tr>
<td>
<input type="button" value="4" onclick="">
</td>
<td>
<input type="button" value="5" onclick="">
</td>
<td>
<input type="button" value="6" onclick="">
</td>
<td>
<input type="button" value="Deposit" id="deposit" onclick="">
</td>
</tr>
<tr>
<td>
<input type="button" value="7" onclick="">
</td>
<td>
<input type="button" value="8" onclick="">
</td>
<td>
<input type="button" value="9" onclick="">
</td>
<td>
<input type="button" value="Retype" id="retype" onclick="">
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="button" value="0" onclick="">
</td>
<td>
</td>
<td>
<input type="button" value="End" id="end" onclick="">
</td>
</tr>
</table>

Storing text box values in temporary table

I have a form that contain ten text boxes for entering some data. That form has a submit button and a next button. When I click on the next button, it has to open again ten text boxes, and has to store previous information into a temporary table in a MySQL database or in any other way. And finally, if I click on the submit button, it has to store that complete information into another permanent MySQL database table.
How can I do this?
This is what I tried so far:
<form name="form2" action="addingstuden_data.jsp" method="POST">
<table align="center">
<th colspan="3" class="style30"><font size="5">Adding Students for<%=stream%>-<%=year3%></th>
</table>
<table align="center" border="1">
<tr>
<td class="heading" align="center" >SNo</td>
<td class="heading" align="center" >Student Id</td>
<td class="heading" align="center">Student Name</td>
</tr>
<%
int i;
for(i=0;i<62;i++)
{
%>
<tr>
<td><input type="text" name="SNo" value="<%=i%>" id="r2" size="1"> </td>
<td><input type="text" name="stdid" id="sid" size="4" value=""> </td>
<td><input type="text" name="stdname" id="sname" value=""> </td>
</tr>
<% } %>
</table>
<table width="100%" class="pos_fixed">
<tr>
<td align="center" class="border"><input type="submit" name="submit" value="submit"> </td>
</tr>
</table>
</form>
Try this, Style it according to your need
<form name="myform" method="POST" action="youraction">
<div id="forms">
<input type="text" name="feilds[]">
<input type="text" name="feilds[]">
<input type="text" name="feilds[]">
<input type="text" name="feilds[]">
<input type="text" name="feilds[]">
<input type="text" name="feilds[]">
<input type="text" name="feilds[]">
<input type="text" name="feilds[]">
<input type="text" name="feilds[]">
<input type="text" name="feilds[]">
</div>
<input type="button" name="next" value="next" onclick="next()">
<input type="submit" name="submit" value="Submit">
</form>
Javascript code
function next()
{
var ele = document.getElementById('forms');
for(var i=0;i<10;i++)
{
var name = document.createElement("input");
name.setAttribute('type',"text");
name.setAttribute('name',"feilds[]");
ele.appendChild(name);
}
}
On server side loop through feilds[] array and get all the values

Categories