JQuery validations not working empty data is inserted into table rows

JQuery validations not working empty data is inserted into table rows - javascript

I've a text field in table with id name .
I have added a validation on it.
But its not working
<td>Name:</td>
<td>
<input type="text" id="name" class="required"/>(required)
</td>
$("#name").focusout(function(){
if (!$(this).val()) {
alert("This field is required");
$(this).focus();
}
});
I have complete code on jsfiddle .
Please check link

Just make sure to put it inside document ready and it'll work just fine:
$(function () {
$("#name").focusout(function () {
if (!$(this).val()) {
alert("This field is required");
$(this).focus();
}
});
});
jsfiddle DEMO
Edit: full page requested by OP:
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Book Library</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script>
var count = 1;
var rating;
function addRow() {
var myName = document.getElementById("name");
var auther = document.getElementById("auther");
var publish = document.getElementById("publish");
var ratings = document.getElementsByName("rating");
for (var i = 0; i < ratings.length; i++) {
if (ratings[i].checked) {
rating = ratings[i];
}
}
var table = document.getElementById("myTableData");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML = count;
row.insertCell(1).innerHTML = myName.value;
row.insertCell(2).innerHTML = auther.value;
row.insertCell(3).innerHTML = publish.value;
row.insertCell(4).innerHTML = rating.value;
count = count + 1;
}
function load() {
console.log("Page load finished");
}
$(function() {
$("#name").focusout(function () {
console.log('bla');
if (!$(this).val()) {
alert("This field is required");
$(this).focus();
}
});
});
</script>
</head><body onload="load()">
<div id="mydata">
<b>Current data in the system ...</b>
<table id="myTableData" border="1" style="width:100%">
<tr id="templateRow">
<th>ID</th>
<th>Name</th>
<th>Authers</th>
<th>Published</th>
<th>Ratings</th>
</tr>
</table>
<br/>
</div>
<div id="myform">
<b>Simple form with name and age ...</b>
<table style="width:100%">
<tr>
<td>Name:</td>
<td>
<input type="text" id="name">
</td>
</tr>
<tr>
<td>Auther:</td>
<td>
<input type="text" id="auther">
</td>
</tr>
<tr>
<td>Published:</td>
<td>
<input type="date" id="publish">
</td>
</tr>
<tr>
<td>Rating:</td>
<td>
<input type="radio" value="1" id="rating" name="rating">1
<input type="radio" value="2" id="rating2" name="rating">2
<input type="radio" value="3" id="rating3" name="rating">3
<input type="radio" value="4" id="rating4" name="rating">4
<input type="radio" value="5" id="rating5" name="rating">5</td>
</tr>
</table>
<br>
<input type="button" id="add" value="Add" onclick="Javascript:addRow()">
</div>
</body>
</html>

Related

Unable to clear the form after submitting

I tried a project which has a form to submit the employee expenses. I got everything working but unable to clear the form (entered details in the text fields) after clicking on submit.
Getting Error: (After entering the details and clicking the submit button)
Uncaught ReferenceError: d is not defined at HTMLInputElement.onclick (index.html:63:42)
Here is my code:
document.getElementById("submit").addEventListener("click", (e) => {
e.preventDefault();
// Form validation
function validate() {
if (document.myForm.empId.value == "") {
alert("Please provide your Employee ID!");
document.myForm.empId.focus();
return false;
}
if (document.myForm.empName.value == "") {
alert("Please provide your Name!");
document.myForm.empName.focus();
return false;
}
if (document.myForm.PaymentMode.value == "") {
alert("Select your Payment Mode!");
document.myForm.PaymentMode.focus();
return false;
}
if (document.myForm.Date.value == "") {
alert("Please provide the Date!");
document.myForm.Date.focus();
return false;
}
if (document.myForm.Bill.value == "") {
alert("Please provide your Bill Amount!");
document.myForm.Bill.focus();
return false;
}
return true;
}
let id = document.getElementById("id").innerText;
let empId = document.getElementById("empID").value;
let name = document.getElementById("name").innerText;
let empName = document.getElementById("empname").value;
let using = document.getElementById("using").innerText;
let mode = document.getElementById("payment-mode").value;
let day = document.getElementById("day").innerText;
let date = document.getElementById("date").value;
let amount = document.getElementById("amount").innerText;
let bill = document.getElementById("bill").value;
let form = document.getElementById("forReset");
let array = [
[id, empId],
[name, empName],
[using, mode],
[day, date],
[amount, bill],
];
let expenseList = Object.fromEntries(array);
const expenseTable = document.getElementById("expenseTable");
function output() {
if (validate()) {
for (let i = 0; i < Object.keys(expenseList).length; i++) {
expenseTable.innerHTML += `
<tr>
<td>${expenseList[id]}</td>
<td>${expenseList[name]}</td>
<td>${expenseList[using]}</td>
<td>${expenseList[day]}</td>
<td>$${expenseList[amount]}</td>
<td><a class="deleteButton">Delete</td>
</tr>
`;
for (let i = 0; i < expenseTable.children.length; i++) {
expenseTable.children[i]
.querySelector(".deleteButton")
.addEventListener("click", function () {
this.parentNode.parentNode.remove();
});
}
break;
}
} else {
return false;
}
}
output();
function d() {
form.reset();
}
d();
});
.table {
border: 1px solid black;
width: 100%;
}
th {
border-right: 1px solid black;
}
.table td {
border: 1px solid black;
text-align: center;
}
.deleteButton {
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Expense Tracker Project</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<div class="employee-info">
<form
id="forReset"
class="expenesesForm"
name="myForm"
onsubmit="return(validate());"
method="POST"
action=""
>
<table>
<tr>
<td id="id">Employee ID:</td>
<td>
<input id="empID" name="empId" type="text" placeholder="Employee ID" />
</td>
</tr>
<tr>
<td id="name">Name:</td>
<td>
<input id="empname" type="text" placeholder="Name" name="empName" />
</td>
</tr>
<tr>
<td id="using">Payment Mode:</td>
<td>
<select id="payment-mode" name="PaymentMode">
<option class="" value="" selected disabled>
Select from the list
</option>
<option class="mode" value="card">Card</option>
<option class="mode" value="cheque">Cheque</option>
<option class="mode" value="cash">Cash</option>
<option class="mode" value="other">Other</option>
</select>
</td>
</tr>
<tr>
<td id="day">Date of Transaction:</td>
<td><input id="date" type="date" name="Date" /></td>
</tr>
<tr>
<td id="amount">Amount:</td>
<td><input id="bill" type="number" name="Bill" /></td>
</tr>
<tr>
<td>
<br />
<input
id="submit"
type="submit"
value="Submit"
onclick="javascript:d();"
/>
<input id="reset" type="reset" value="Cancel" />
</td>
</tr>
</table>
</form>
<br />
<table class="table">
<thead>
<tr>
<th>Employee Id</th>
<th>Name</th>
<th>Mode of Transaction</th>
<th>Date of Transaction</th>
<th>Amount</th>
</tr>
</thead>
<tbody id="expenseTable"></tbody>
</table>
</div>
<script src="./script.js"></script>
</body>
</html>
Expected output:
After clicking the submit button, entered form details should get cleared.

Here is a simple method,
click reset button automatically after submit
You could reuse the <input type="reset">
cancel icon to clear form values
https://www.w3schools.com/tags/att_input_type_reset.asp
Also, you can hide reset input using display:none, if it is not necessary in your screen
An alternative method is clear each input value by setting an empty value in it
function formReset () {
document.getElementById("empID").value = '';
document.getElementById("name").innerText = '';
document.getElementById("empname").value = '';
}
Here is a working example
document.getElementById("submit").addEventListener("click", (e) => {
e.preventDefault();
// Form validation
function validate() {
if (document.myForm.empId.value == "") {
alert("Please provide your Employee ID!");
document.myForm.empId.focus();
return false;
}
if (document.myForm.empName.value == "") {
alert("Please provide your Name!");
document.myForm.empName.focus();
return false;
}
if (document.myForm.PaymentMode.value == "") {
alert("Select your Payment Mode!");
document.myForm.PaymentMode.focus();
return false;
}
if (document.myForm.Date.value == "") {
alert("Please provide the Date!");
document.myForm.Date.focus();
return false;
}
if (document.myForm.Bill.value == "") {
alert("Please provide your Bill Amount!");
document.myForm.Bill.focus();
return false;
}
return true;
}
let id = document.getElementById("id").innerText;
let empId = document.getElementById("empID").value;
let name = document.getElementById("name").innerText;
let empName = document.getElementById("empname").value;
let using = document.getElementById("using").innerText;
let mode = document.getElementById("payment-mode").value;
let day = document.getElementById("day").innerText;
let date = document.getElementById("date").value;
let amount = document.getElementById("amount").innerText;
let bill = document.getElementById("bill").value;
let array = [
[id, empId],
[name, empName],
[using, mode],
[day, date],
[amount, bill],
];
let expenseList = Object.fromEntries(array);
const expenseTable = document.getElementById("expenseTable");
function output() {
if (validate()) {
for (let i = 0; i < Object.keys(expenseList).length; i++) {
expenseTable.innerHTML += `
<tr>
<td>${expenseList[id]}</td>
<td>${expenseList[name]}</td>
<td>${expenseList[using]}</td>
<td>${expenseList[day]}</td>
<td>$${expenseList[amount]}</td>
<td><a class="deleteButton">Delete</td>
</tr>
`;
for (let i = 0; i < expenseTable.children.length; i++) {
expenseTable.children[i]
.querySelector(".deleteButton")
.addEventListener("click", function () {
this.parentNode.parentNode.remove();
});
}
break;
}
} else {
return false;
}
}
output();
function clearData() {
document.getElementById("reset").click();
}
clearData();
});
.table {
border: 1px solid black;
width: 100%;
}
th {
border-right: 1px solid black;
}
.table td {
border: 1px solid black;
text-align: center;
}
.deleteButton {
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Expense Tracker Project</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<div class="employee-info">
<form
id="forReset"
class="expenesesForm"
name="myForm"
onsubmit="return(validate());"
method="POST"
action=""
>
<table>
<tr>
<td id="id">Employee ID:</td>
<td>
<input id="empID" name="empId" type="text" placeholder="Employee ID" />
</td>
</tr>
<tr>
<td id="name">Name:</td>
<td>
<input id="empname" type="text" placeholder="Name" name="empName" />
</td>
</tr>
<tr>
<td id="using">Payment Mode:</td>
<td>
<select id="payment-mode" name="PaymentMode">
<option class="" value="" selected disabled>
Select from the list
</option>
<option class="mode" value="card">Card</option>
<option class="mode" value="cheque">Cheque</option>
<option class="mode" value="cash">Cash</option>
<option class="mode" value="other">Other</option>
</select>
</td>
</tr>
<tr>
<td id="day">Date of Transaction:</td>
<td><input id="date" type="date" name="Date" /></td>
</tr>
<tr>
<td id="amount">Amount:</td>
<td><input id="bill" type="number" name="Bill" /></td>
</tr>
<tr>
<td>
<br />
<input
id="submit"
type="submit"
value="Submit"
/>
<input id="reset" type="reset" value="Cancel" />
</td>
</tr>
</table>
</form>
<br />
<table class="table">
<thead>
<tr>
<th>Employee Id</th>
<th>Name</th>
<th>Mode of Transaction</th>
<th>Date of Transaction</th>
<th>Amount</th>
</tr>
</thead>
<tbody id="expenseTable"></tbody>
</table>
</div>
<script src="./script.js"></script>
</body>
</html>

Is there a way to add the total of a div?

I am having trouble trying to add the total of a div from an array. I am trying to add the total miles for the input and put it in a table. I want to just add the miles together, not the flight numbers. I would also like to have an id set for it so that I can call on to the total miles in another section.
var FlightNumber = new Array();
var Miles = new Array();
function insert() {
var FlightNumberValue = document.getElementById('FlightNumber').value;
var MilesValue = document.getElementById('Miles').value;
FlightNumber[FlightNumber.length] = FlightNumberValue;
Miles[Miles.length] = MilesValue;
}
function showFlightNumber() {
var content = "<b></b><br>";
for (var i = 0; i < FlightNumber.length; i++) {
content += FlightNumber[i] + "<br>";
}
document.getElementById('display').innerHTML = content;
}
function showMiles() {
var content = "<b></b><br>";
for (var i = 0; i < Miles.length; i++) {
content += Miles[i] + "<br>";
}
document.getElementById('display2').innerHTML = content;
}
table,
th,
td {
border: 1px solid black;
text-align: center;
border-collapse: collapse;
}
<form id="form">
<h1>Find out what Flight Class Member you are!</h1>
<p>To use, please input the flight number and number of miles.
<p>
<br>
<label for="FlightNumber">Flight Number</label> <input id="FlightNumber" type="text" />
<br>
<label for="Miles">Miles</label><input id="Miles" type="text" />
<br>
<br>
<input type="button" value="Save" onclick="insert();">
<input type="button" value="Show flight number" onclick="showFlightNumber();"> <br>
<input type="button" value="Show miles" onclick="showMiles();"> <br>
<hr>
</form>
<table style="width:100%">
<tr>
<th>Flight Number</th>
<th>Miles</th>
</tr>
<tr>
<td>
<div id="display">
</div>
</td>
<td>
<div id="display2">
</div>
</td>
</tr>
<td>Total Miles:</td>
<td></td>
</table>

I was able to get the miles to total by putting an id on the total column. Then I was able to use the Miles array you created and just parse the string value to an int and total those values.
Please note this code is not very clean. When you insert a new flight you should really be inserting a new row, not break lines. There are javascript frameworks out there that make it really easy to iterate over arrays, e.g. AngularJs / Angular / React / Vue.js.
<html>
<head>
<title>Member Info</title>
<style>
table, th, td {
border: 1px solid black;
text-align: center;
border-collapse: collapse;
}
</style>
<script type="text/javascript">
var FlightNumber=new Array();
var Miles=new Array();
function insert(){
var FlightNumberValue = document.getElementById('FlightNumber').value;
var MilesValue = document.getElementById('Miles').value;
FlightNumber[FlightNumber.length]=FlightNumberValue;
Miles[Miles.length]=MilesValue;
}
function showFlightNumber() {
var content="<b></b><br>";
for(var i = 0; i < FlightNumber.length; i++) {
content +=FlightNumber[i]+"<br>";
}
document.getElementById('display').innerHTML = content;
}
function showMiles() {
var content="<b></b><br>";
for(var i = 0; i < Miles.length; i++) {
content +=Miles[i]+"<br>";
}
document.getElementById('display2').innerHTML = content;
// new code
var total=0;
for(var i = 0; i < Miles.length; i++) {
total += Number.parseInt(Miles[i]);
}
document.getElementById('total-miles').innerHTML = total;
}
</script>
</head>
<body>
<form id="form">
<h1>Find out what Flight Class Member you are!</h1>
<p>To use, please input the flight number and number of miles.<p>
<br>
<label for="FlightNumber">Flight Number</label> <input id="FlightNumber" type="text" />
<br>
<label for="Miles">Miles</label><input id="Miles" type="text" />
<br>
<br>
<input type="button" value="Save" onclick="insert();">
<input type="button" value="Show flight number" onclick="showFlightNumber();"> <br>
<input type="button" value="Show miles" onclick="showMiles();"> <br>
<hr>
</form>
<table style="width:100%">
<tr>
<th>Flight Number</th>
<th>Miles</th>
</tr>
<tr>
<td><div id="display">
</div></td>
<td><div id="display2">
</div></td>
</tr>
<td>Total Miles:</td>
<td id="total-miles"></td>
</table>
</body>
</html>

How to add Edit and delete button in each row using javascript/jquery

I want to add edit and delete button in each row and want to edit and delete row using javascript. How should I do this. Please check the below jsfiddle.
First Name:<br>
<input type="text" id="fName" /><br>
Last Name: <br>
<input type="text" id="lName" /><br>
Gender: <br>
<input type="text" id="gender" /><br>
Age: <br>
<input type="text" id ="age" /> <br>
<input type="button" id ="display" value="Display" /><br>
<table id= "table" border="1">
<tr>
<th>Name</th>
<th>Gender</th>
<th>Age</th>
</tr>
</table>
javascript
(function setup() {
"use strict";
var fNameElem = document.getElementById("fName");
var lNameElem = document.getElementById("lName");
var genderElem = document.getElementById("gender");
var ageElem = document.getElementById("age");
var tableElem = document.getElementById("table");
document.getElementById("display").addEventListener("click", function () {
var newRow = tableElem.insertRow(-1);
var newCell = newRow.insertCell(0);
var newText = document.createTextNode(lNameElem.value + ", " + fNameElem.value);
newCell.appendChild(newText);
newCell = newRow.insertCell(1);
newText = document.createTextNode(genderElem.value);
newCell.appendChild(newText);
newCell = newRow.insertCell(2);
newText = document.createTextNode(ageElem.value);
newCell.appendChild(newText);
fNameElem.value = "";
lNameElem.value = "";
ageElem.value = "";
tableElem.value = "";
});
})();
http://jsfiddle.net/xnWSV/

Ended up using jQuery, if you click edit the fields get repopulated and then you click 'Display' again to solve the problem. This is a very simple implementation of this, but I would recommended using Angular or some kind of templating libary if you were going to expand on this.
http://jsbin.com/jevejetofo/edit?html,js,console,output
JavaScript:
(function setup() {
var selectedRow = null;
var keys = ["fName","lName","gender","age"];
function resetValues(fName,lName,gender,age){
forEachInput(function(key){
$("#"+key).val('');
});
}
function forEachInput(callback){
for(var i = 0; i < keys.length; i++) {
callback(keys[i]);
}
}
function createRow(){
var row = $(".tr_clone").clone()
var newRow = row.appendTo("table").removeClass("tr_clone").fadeIn(1000);
forEachInput(function(key){
newRow.find("."+key).text($("#"+key).val());
});
resetValues();
selectedRow = null;
}
function applyValues(row){
forEachInput(function(key){
row.find("."+key).text($("#"+key).val());
});
}
function editRow(row){
forEachInput(function(key){
$("#"+key).val(row.find("."+key).text());
});
selectedRow = row;
}
$("#display").on("click", function () {
if(selectedRow === null){
createRow();
resetValues();
} else {
applyValues(selectedRow);
resetValues();
selectedRow = null;
}
});
$("table").delegate("button").on("click",function(e){
e.preventDefault();
if($(e.target).hasClass('edit')){
editRow($(e.target).parent("td").parent("tr"));
} else {
$(e.target).parent("td").parent("tr").fadeOut(1000).remove();
}
});
})();
HTML
<script src="https://code.jquery.com/jquery-2.0.3.js"></script>First Name:<br>
<input type="text" id="fName" /><br>
Last Name: <br>
<input type="text" id="lName" /><br>
Gender: <br>
<input type="text" id="gender" /><br>
Age: <br>
<input type="text" id ="age" /> <br>
<input type="button" id="display" value="Display" /><br>
<table id= "table" border="1">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Gender</th>
<th>Age</th>
</tr>
<tr class="tr_clone" style="display:none;">
<td class="fName"></td>
<td class="lName"><input type="text" autofocus placeholder="location" name="location" ></td>
<td class="gender"><input type="text" placeholder="Start Date" name="datepicker_start" class="datepicker"></td>
<td class="age"><input type="text" placeholder="End Date" name="datepicker_end" class="datepicker"></td>
<td class="buttons"><button class="delete">Delete</button> | <button class="edit">Edit</button></td>
</tr>
</table>

How to insert value on dynamic input field in a table with remove table row functionality

I have designed a html table where table rows with data are dynamically generated.In each table row tr, i set 1 table data td for html select tag and 1 table data td for html input tag.So i want to insert the selected option value into its adjacent input field.Also i want to keep a Remove functionality to remove each table row.
Here is my code:
$(document).on('change', '#mySelect', function() {
if ($(this).val != 0) {
$('.amount').val($(this).val());
} else {
$('.amount').val('');
}
});
$('#remScnt').live('click', function() {
if( i > 2 ) {
$(this).parent('tr').remove();
i--;
}
return false;
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style>
table, th, td {
border-collapse: collapse;
margin: 10px auto;
}
</style>
<script>
function addMore() {
var table = document.getElementById("myTable");
var row = table.insertRow(-1);
var cell1 = row.insertCell(-1);
var cell2 = row.insertCell(-1);
var x = document.getElementById("myTable").rows[1].cells;
cell1.innerHTML = x[0].innerHTML;
cell2.innerHTML = x[1].innerHTML;
}
function removeLast() {
document.getElementById("myTable").deleteRow(-1);
}
function removeRowNo() {
var index = document.getElementById('value').value
document.getElementById("myTable").deleteRow(index);
}
</script>
</head>
<body>
<form action="testlist.php" method="post">
<table id="myTable">
<tr>
<th>Items</th>
<th>Amount</th>
</tr>
<tr>
<td >
Remove
<select id="mySelect" name="DESCRP[]" >
<option disabled="" selected="">Select</option>
<option value="100">Item-1</option>
<option value="200">Item-2</option>
<option value="300">Item-3</option>
<option value="400">Item-4</option>
<option value="500">Item-5</option>
</select>
</td>
<td> <input type="text" class="amount" name="ALAMT[]"></td>
</tr>
</table>
<table>
<tr>
<td><input type="submit" /> </td>
</tr>
</table>
</form>
<br>
<table>
<tr>
<td><button onclick="addMore()">Add More</button></td>
<td><button onclick="removeLast()">Remove Last Row</button></td>
</tr>
<tr>
<td><input type="text" maxlength="3" name="value" id='value'></td>
<td><button onclick="removeRowNo()">Remove By Row No.</button></td>
</tr>
</table>
</body>
</html>
So the problem is all inputs are taking same option values. i think it is due to lack of uniqueness of each input tag as i use class instead of id.Also Remove hyperlink not working.please help.

Like said, you should use class instead of id, and look closely on change event handler i make, same goes to remove functionality, see following code :
$('#myTable').on('change', '.mySelect', function() {
// you can use .closest() to find
// particular input on same row with select
$(this).closest('tr').find('.amount').val($(this).val());
});
$('#myTable').on('click','.remScnt', function(e) {
e.preventDefault();
// find the tr element of remove link
// which is a parent
$(this).closest('tr').remove()
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style>
table, th, td {
border-collapse: collapse;
margin: 10px auto;
}
</style>
<script>
function addMore() {
var table = document.getElementById("myTable");
var row = table.insertRow(-1);
var cell1 = row.insertCell(-1);
var cell2 = row.insertCell(-1);
var x = document.getElementById("myTable").rows[1].cells;
cell1.innerHTML = x[0].innerHTML;
cell2.innerHTML = x[1].innerHTML;
}
function removeLast() {
var tableTr = document.getElementById("myTable").rows.length;
if ( tableTr > 1 )
document.getElementById("myTable").deleteRow(-1);
}
function removeRowNo() {
var index = document.getElementById('value').value
document.getElementById("myTable").deleteRow(index);
}
</script>
</head>
<body>
<form action="testlist.php" method="post">
<table id="myTable">
<tr>
<th>Items</th>
<th>Amount</th>
</tr>
<tr>
<td >
Remove
<select class="mySelect" name="DESCRP[]" >
<option disabled="" selected="">Select</option>
<option value="100">Item-1</option>
<option value="200">Item-2</option>
<option value="300">Item-3</option>
<option value="400">Item-4</option>
<option value="500">Item-5</option>
</select>
</td>
<td> <input type="text" class="amount" name="ALAMT[]"></td>
</tr>
</table>
<table>
<tr>
<td><input type="submit" /> </td>
</tr>
</table>
</form>
<br>
<table>
<tr>
<td><button onclick="addMore()">Add More</button></td>
<td><button onclick="removeLast()">Remove Last Row</button></td>
</tr>
<tr>
<td><input type="text" maxlength="3" name="value" id='value'></td>
<td><button onclick="removeRowNo()">Remove By Row No.</button></td>
</tr>
</table>
</body>
</html>

How to show temp data and delete in html table?

I have three input box and below one button
when I click that button I want input data should come into html table and sholud able to delete that record
Kindly help me out
advance thanks

I did the same with one input box. So making it for three shouldn't be an issue. You must be looking out for this code:
$("table").on("click", "tbody tr td a", function () {
$(this).closest("tr").remove();
return false;
});
You can either press Enter or click on the button to insert temp data. Okay, just heads up, as you didn't put enough code, you can do it this way:
$(function () {
$("#tempInsert").keyup(function (e) {
if (e.keyCode == 13)
insertRow();
});
$("#tempBtn").click(function () {
insertRow();
});
$("table").on("click", "tbody tr td a", function () {
$(this).closest("tr").remove();
return false;
});
});
function insertRow() {
if ($("#tempInsert").val().length > 0)
$("table tbody").append('<tr><td>' + $("#tempInsert").val() + '</td><td><a href="#">×</td></tr>');
$("#tempInsert").val("");
}
* {font-family: 'Segoe UI'; text-decoration: none;}
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<input type="text" id="tempInsert" />
<input type="button" id="tempBtn" value="Add" />
<table width="100%">
<thead>
<tr>
<th width="85%">Stuff</th>
<th width="15%">Action</th>
</tr>
</thead>
<tbody></tbody>
</table>

I supposed that you are absolutely new and I wrote a simple example for you, just to get the idea of how to do.
HTML
<table style="border: 1px solid red; width: 200px; height: 80px; ">
<tr>
<td id="nm"></td>
</tr>
<tr>
<td id="fnm"></td>
</tr>
<tr>
<td id="ag"></td>
</tr>
</table>
Name : <input type="text" id="n"><br />
F/Name: <input type="text" id="fn"><br />
Age : <input type="text" id="age"><br />
<button>Click</button>
SCRIPT
$(function(){
$('button').click(function(event) {
$('#nm').text($('#n').val());
$('#fnm').text($('#fn').val());
$('#ag').text($('#age').val());
$('#n').val('');
$('#fn').val('');
$('#age').val('');
});
});

$('#submitBtn').click(function(){
var input1 = $('#input1').val();
var input2 = $('#input2').val();
var input3 = $('#input3').val();
$('#td1').html(input1);
$('#td2').html(input2);
$('#td3').html(input3);
});
<table>
<tr>
<td id="td1"></td>
<td id="td2"></td>
<td id="td3"></td>
</tr>
</table>

Try this Demo
function Add() {
var tbl = document.getElementById("tbl");
var fname = document.getElementById("FName").value;
var lname = document.getElementById("LName").value;
var city = document.getElementById("City").value;
if (fname == "" && lname == "" && city == "")
alert("Enter Text in input box");
else {
var tblcount = tbl.rows.length;
var row = tbl.insertRow(tblcount);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = fname;
cell2.innerHTML = lname;
cell3.innerHTML = city;
}
}
#tbl tr td {
padding: 0 10px;
}
<input id="FName" type="text"></input>
<input id="LName" type="text"></input>
<input id="City" type="text"></input>
<button id="btnAdd" onclick="Add();">Add</button>
<table id="tbl">
<tr>
<td>Fisrt Name</td>
<td>Last Name</td>
<td>City</td>
</tr>
</table>

We Keep Coding

JavaScript is the programming language of the Web.

JQuery validations not working empty data is inserted into table rows - javascript

Related

Unable to clear the form after submitting

Is there a way to add the total of a div?

How to add Edit and delete button in each row using javascript/jquery

How to insert value on dynamic input field in a table with remove table row functionality

How to show temp data and delete in html table?

Categories

Resources