How to Create a Loop Jquery

How to Create a Loop Jquery - javascript

I have this HTML + this JQuery.JS
The Script works like this. When you Press the Add Button a Form will appear over the Table, when you press the hide button it will hide it When you press the Edit button any text that you will add in the form input cases will be added to a new TR that will be created with the Submit button.
What I want to do now is. On each TD line, I want my ADD/HIDE/Edit buttons to reappear but this time when I push Edit. I want to edit the new text that is in the new TR.
For Example, I have in first TR a, a, a, a, a I press Edit I put b, b, b, b, b, Submit it a new TR will be created with the bbbbb and when I push the Edit button again that is on the bbbbb tr. I want it to edit the bbbbb Line. I don't know how to explain it better than this. I can reach via skype if you guys want idk.
$(document).ready(function () {
$('#submit').on('click', function () {
var valid = true,
message = '';
$('form input').each(function () {
var $this = $(this);
if (!$this.val()) {
var inputName = $this.attr('name');
valid = false;
message += 'Please enter your ' + inputName + '\n';
}
});
if (!valid) {
alert(message);
} else {
$('table').append('' +
'<tr>' +
'<td>' + $('#btd1').val() + '</td>' +
'<td>' + $('#btd2').val() + '</td>' +
'<td>' + $('#btd3').val() + '</td>' +
'<td>' + $('#btd4').val() + '</td>' +
'<td>' + $('#btd5').val() + '</td>' +
'</tr>' +
'');
for(var x = 1; x < $('input').length; x++) {
$('#btd' + x ).val('');
}
$('.buttons').attr('rowspan', $('tr').length);
}
});
$(".hide").click(function () {
$("form").hide();
});
$(".add").click(function () {
$("form").show();
});
$(".edit").click(function () {
$("form").show();
$.each($(this).parent().parent().find('td'), function (key, val) {
$("form input[type=text]").eq(key).val($(val).text());
})
});
$("#show").click(function () {
//$("form").show();
//$("#btd1").val("Vlad");
//$("#btd2").val("Andrei");
//$("#btd3").val("vTask");
// $("#btd4").val("Ceva");
//$("#btd5").val("Alceva");
});
});
<!DOCTYPE html>
<html >
<head >
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<title ></title >
</head >
<body >
<form class="a" action="" method="post" hidden>
<input type="text" name="nume" id="btd1" value="" >
<input type="text" name="prenume" id="btd2" value="" >
<input type="text" name="email" id="btd3" value="" >
<input type="text" name="telefon" id="btd4" value="" >
<input type="text" name="parola" id="btd5" value="" >
<input type="button" id="submit" value="Submit" name="submit" />
</form >
<table border="2" >
<tr >
<td >Vlad</td >
<td >Andrei</td >
<td >vTask</td >
<td >Ceva</td >
<td >Alceva</td >
<td class="buttons" style="vertical-align: top">
<button class="add" >Add</button >
<button class="hide" >Hide</button >
<button class="edit" >Edit</button >
</td >
</tr >
</table >
</body >
</html >
Thanks for the help in advance

My fellow romanian you need something like this:
$(document).ready(function () {
$('#submit').on('click', function () {
var valid = true,
message = '';
$('form input').each(function () {
var $this = $(this);
if (!$this.val()) {
var inputName = $this.attr('name');
valid = false;
message += 'Please enter your ' + inputName + '\n';
}
});
if (!valid) {
alert(message);
} else {
$('table').append('' +
'<tr>' +
'<td>' + $('#btd1').val() + '</td>' +
'<td>' + $('#btd2').val() + '</td>' +
'<td>' + $('#btd3').val() + '</td>' +
'<td>' + $('#btd4').val() + '</td>' +
'<td>' + $('#btd5').val() + '</td>' +
'<td class="buttons" style="vertical-align: top"><button class="add" >Add</button><button class="hide" >Hide</button><button class="edit">Edit</button></td >'+
'</tr>' +
'');
for(var x = 1; x < $('input').length; x++) {
$('#btd' + x ).val('');
}
}
});
$("body").on('click','.hide',function () {
$("form").hide();
});
$("body").on('click','.add',function () {
$("form").show();
});
$("body").on('click','.edit',function () {
$("form").show();
$.each($(this).closest('tr').find('td:not(".buttons")'), function (key, val) {
$("form input[type=text]").eq(key).val($(val).text());
})
});
$("#show").click(function () {
//$("form").show();
//$("#btd1").val("Vlad");
//$("#btd2").val("Andrei");
//$("#btd3").val("vTask");
// $("#btd4").val("Ceva");
//$("#btd5").val("Alceva");
});
});
<!DOCTYPE html>
<html >
<head >
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<title ></title >
</head >
<body >
<form class="a" action="" method="post" hidden>
<input type="text" name="nume" id="btd1" value="" >
<input type="text" name="prenume" id="btd2" value="" >
<input type="text" name="email" id="btd3" value="" >
<input type="text" name="telefon" id="btd4" value="" >
<input type="text" name="parola" id="btd5" value="" >
<input type="button" id="submit" value="Submit" name="submit" />
</form >
<table border="2" >
<tr >
<td >Vlad</td >
<td >Andrei</td >
<td >vTask</td >
<td >Ceva</td >
<td >Alceva</td >
<td class="buttons">
<button class="add" >Add</button >
<button class="hide" >Hide</button >
<button class="edit" >Edit</button >
</td >
</tr >
</table >
</body >
</html >

Related

without click append 3 rows, then click 1 row per click

I want to open 3 row defult after addrow and remove row and apply remove defult 3 row using javascript
please share valuable idea sir
I have need example:-
$(document).ready(function (){
$("body").on('click', '.btn-add-more', function (e) {
e.preventDefault();
var $sr = ($(".jdr1").length + 1);
var rowid = Math.random();
var $html = '<tr class="jdr1" id="' + rowid + '">' +
'<td><span class="btn btn-sm btn-default">' + $sr + '</span><input type="hidden" name="count[]" value="'+Math.floor((Math.random() * 10000) + 1)+'"></td>' +
'<td><input type="text" required="" class="form-control input-sm title" placeholder="Medicine" name="medicine[]"></td>' +
'<td><input type="text" name="medicine_qty[]" placeholder="Potency" class="form-control input-sm"></td>' +
'<td><input type="text" name="medicine_time[]" placeholder="Description" class="form-control input-sm"></td>' +
'<td><input type="text" name="remark[]" placeholder="Add/Note" class="form-control input-sm"></td>' + '<td><button class="btn btn-sm btn-warning btn-remove-detail-row"><i class="glyphicon glyphicon-remove">Remove</i></button> </td>'+
'</tr>';
$("#table-details").append($html);
});

You can wrap the function in a for loop and edit the for loop limit according to your needs.
$("body").on('click', '.btn-add-more', function (e) {
e.preventDefault();
var rows = $(".jdr1").length;
var limit = 1;
// In the first click append 3 rows, then 1 row per click
if (rows < 3) limit = 3;
for (let i=0; i<limit; i++) {
var $sr = ($(".jdr1").length + 1);
var rowid = Math.random();
var $html = '<tr class="jdr1" id="' + rowid + '">' +
'<td><span class="btn btn-sm btn-default">' + $sr + '</span><input type="hidden" name="count[]" value="'+Math.floor((Math.random() * 10000) + 1)+'"></td>' +
'<td><input type="text" required="" class="form-control input-sm title" placeholder="Medicine" name="medicine[]"></td>' +
'<td><input type="text" name="medicine_qty[]" placeholder="Potency" class="form-control input-sm"></td>' +
'<td><input type="text" name="medicine_time[]" placeholder="Description" class="form-control input-sm"></td>' +
'<td><input type="text" name="remark[]" placeholder="Add/Note" class="form-control input-sm"></td>' + '<td><button class="btn btn-sm btn-warning btn-remove-detail-row"><i class="glyphicon glyphicon-remove">Remove</i></button> </td>'+
'</tr>';
$("#table-details").append($html);
}
})
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<table id="table-details"></table>
<button class="btn-add-more">Add Rows</button>
</html>

Generate Serial Number on adding new line and adjust serial no when any line removed

I am cloning four field (sl no,stationery type ,quantity, Remove ) of a form by using java script.I can very well append or remove these field
I am not able to generate the serial no on the first column and if I delete any row in between this should also adjust the serial no.How can i achieve this My code is below
$(document).ready(function() {
$(document).on('click', '.add', function() {
var html = '';
html += '<tr>';
html += '<td><input type="text" name="item_name[]" class="form-control item_name" ></td>';
html += '<td><select name="item_unit[]" class="form-control item_unit" id="datalist"><option value="">Select Stationery Type</option><option value="A4 Green Ream">A4 Green Ream</option><option value="A4 Green Ream">A4 Green Ream</option><option value="Cellotape(Brown)">Cellotape(Brown)</option><option value="Cellotape(Transparent)">Cellotape(Transparent)</option><option value="Gluestick">Gluestick</option><option value="Highlighter">Highlighter</option><option value="Marker(Thick)">Marker(Thick)</option><option value="Marker(Thin)">Marker(Thin)</option><option value="Meeting Pen">Meeting Pen</option><option value="Normal Envelope">Normal Envelope</option></select></td>';
html += '<td><input type="text" name="item_quantity[]" class="form-control number_only item_quantity" /></td>';
html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';
$('#item_table').append(html);
});
$(document).on('click', '.remove', function() {
$(this).closest('tr').remove();
});
$('#insert_form').on('submit', function(event) {
event.preventDefault();
var error = '';
$('.item_name').each(function() {
var count = 1;
if ($(this).val() == '') {
error += "<p>Enter Item Name at " + count + " Row</p>";
return false;
}
count = count + 1;
});
$('.item_quantity').each(function() {
var count = 1;
if ($(this).val() == '') {
error += "<p>Enter Item Quantity at " + count + " Row</p>";
return false;
}
count = count + 1;
});
$('.item_unit').each(function() {
var count = 1;
if ($(this).val() == '') {
error += "<p>Select Unit at " + count + " Row</p>";
return false;
}
count = count + 1;
});
var form_data = $(this).serialize();
if (error == '') {
$.ajax({
url: "insert.php",
method: "POST",
data: form_data,
success: function(data) {
if (data == 'ok') {
$('#item_table').find("tr:gt(0)").remove();
$('#error').html('<div class="alert alert-success">Item Details Saved</div>');
}
}
});
} else {
$('#error').html('<div class="alert alert-danger">' + error + '</div>');
}
});
$(document).on('keypress', '.number_only', function(e) {
return isNumbers(e, this);
});
function isNumbers(evt, element) {
var charCode = (evt.which) ? evt.which : event.keyCode;
if (
(charCode != 46 || $(element).val().indexOf('.') != -1) && // “.” CHECK DOT, AND ONLY ONE.
(charCode < 48 || charCode > 57))
return false;
return true;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<br />
<div class="container" style="border: 2px solid #B22222;border-radius: 10px;margin-top: 25px;margin-bottom: 15px;>
<div class=" row ">
<div class="col-md-4 ">
</div>
<div class="col-sm-12 ">
<h4 align="center "><b><u>Add Stationery Stock<b></u></h4>
<br />
<form method="post " id="insert_form ">
<div class="col-sm-6 ">
<input type="text " name="Order No. " class="form-control " placeholder="Order NO "/>
</div>
<div class="col-sm-6 ">
<input type="date " name="Date " class="form-control " placeholder="Date " />
</div>
<div> </div>
<div> </div>
<div> </div>
<h4 align="center "><b><u>Stationery Details<b></u></h4>
<div> </div>
<div class="table-repsonsive ">
<span id="error "></span>
<table class="table table-bordered " id="item_table ">
<tr>
<th>Sl.No.</th>
<th>Select Stationery Type</th>
<th>Enter Quantity</th>
<th><button type="button " name="add " class="btn btn-success btn-sm add "><span class="glyphicon glyphicon-plus "></span></button></th>
</tr>
</table>
<div align="center ">
<input type="submit " name="submit " class="btn btn-info "style="margin-bottom:20px " value="Insert " />
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>

Using
html += '<td><input type="text" name="item_name[]" class="form-control item_name"></td>';
you can do
const renum = () => {
let cnt = 0;
$(".item_name").each(function() {
this.value = ++cnt;
})
};
when needed
I fixed your invalid HTML (u and b not correctly closed and a missing quote on the first inline style)
I ALSO remove the name="submit" - you never want to have name="submit" on a form you plan to submit using script
const renum = () => {
let cnt = 0;
$(".item_name").each(function() {
this.value = ++cnt;
})
};
$(function() {
$("#item_table").on('click', '.add', function() {
var html = '';
html += '<tr>';
html += '<td><input type="text" name="item_name[]" class="form-control item_name" ></td>';
html += '<td><select name="item_unit[]" class="form-control item_unit" id="datalist"><option value="">Select Stationery Type</option><option value="A4 Green Ream">A4 Green Ream</option><option value="A4 Green Ream">A4 Green Ream</option><option value="Cellotape(Brown)">Cellotape(Brown)</option><option value="Cellotape(Transparent)">Cellotape(Transparent)</option><option value="Gluestick">Gluestick</option><option value="Highlighter">Highlighter</option><option value="Marker(Thick)">Marker(Thick)</option><option value="Marker(Thin)">Marker(Thin)</option><option value="Meeting Pen">Meeting Pen</option><option value="Normal Envelope">Normal Envelope</option></select></td>';
html += '<td><input type="text" name="item_quantity[]" class="form-control number_only item_quantity" /></td>';
html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';
$('#item_table').append(html);
renum()
});
$(document).on('click', '.remove', function() {
$(this).closest('tr').remove();
renum()
});
$('#insert_form').on('submit', function(event) {
event.preventDefault();
var error = '';
$('.item_name').each(function() {
var count = 1;
if ($(this).val() == '') {
error += "<p>Enter Item Name at " + count + " Row</p>";
return false;
}
count = count + 1;
});
$('.item_quantity').each(function() {
var count = 1;
if ($(this).val() == '') {
error += "<p>Enter Item Quantity at " + count + " Row</p>";
return false;
}
count = count + 1;
});
$('.item_unit').each(function() {
var count = 1;
if ($(this).val() == '') {
error += "<p>Select Unit at " + count + " Row</p>";
return false;
}
count = count + 1;
});
var form_data = $(this).serialize();
if (error == '') {
$.ajax({
url: "insert.php",
method: "POST",
data: form_data,
success: function(data) {
if (data == 'ok') {
$('#item_table').find("tr:gt(0)").remove();
$('#error').html('<div class="alert alert-success">Item Details Saved</div>');
}
}
});
} else {
$('#error').html('<div class="alert alert-danger">' + error + '</div>');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<div class="container" style="border: 2px solid #B22222;border-radius: 10px;margin-top: 25px;margin-bottom: 15px;">
<div class="row">
<div class="col-md-4"></div>
<div class="col-sm-12">
<h4 align="center"><b><u>Add Stationery Stock</u></b></h4>
<form method="post" id="insert_form">
<div class="col-sm-6"><input type="text" name="Order No." class="form-control" placeholder="Order NO " /></div>
<div class="col-sm-6"><input type="date" name="Date" class="form-control" placeholder="Date" /></div>
<div> </div>
<div> </div>
<div> </div>
<h4 align="center"><b><u>Stationery Details</u></b></h4>
<div> </div>
<div class="table-repsonsive"><span id="error"></span>
<table class="table table-bordered" id="item_table">
<tr>
<th>Sl.No.</th>
<th>Select Stationery Type</th>
<th>Enter Quantity</th>
<th><button type="button" name="add" class="btn btn-success btn-sm add"><span class="glyphicon glyphicon-plus"></span></button></th>
</tr>
</table>
<div align="center"><input type="submit" class="btn btn-info" style="margin-bottom:20px" value="Insert" /></div>
</div>
</form>
</div>
</div>
</div>

Button for Update Table jquery

I am trying to make an update button for my Table Rows.
My Add button Open the Form Input Fields, My Hide button Hide it, The Edit Button edits the Table TR Fields.
The Submit Button Creates a new TR with the new text that I put in the Fields.
I want also an Update Button aside the Submit one. When I edit a TR Raw and put something else in them. When I press update to change that TR Text.
Help me to fix this.
Here is my current HTML/Jquery.js Script
<!DOCTYPE html>
<html >
<head >
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<title ></title >
</head >
<body >
<form class="a" action="" method="post" hidden>
<input type="text" name="nume" id="btd1" value="" >
<input type="text" name="prenume" id="btd2" value="" >
<input type="text" name="email" id="btd3" value="" >
<input type="text" name="telefon" id="btd4" value="" >
<input type="text" name="parola" id="btd5" value="" >
<input type="button" id="submit" value="Submit" name="submit" />
</form >
<table border="2" >
<tr >
<td >Vlad</td >
<td >Andrei</td >
<td >vTask</td >
<td >Ceva</td >
<td >Alceva</td >
<td class="buttons">
<button class="add" >Add</button >
<button class="hide" >Hide</button >
<button class="edit" >Edit</button >
</td >
</tr >
</table >
</body >
</html >
$(document).ready(function () {
$('#submit').on('click', function () {
var valid = true,
message = '';
$('form input').each(function () {
var $this = $(this);
if (!$this.val()) {
var inputName = $this.attr('name');
valid = false;
message += 'Please enter your ' + inputName + '\n';
}
});
if (!valid) {
alert(message);
} else {
$('table').append('' +
'<tr>' +
'<td>' + $('#btd1').val() + '</td>' +
'<td>' + $('#btd2').val() + '</td>' +
'<td>' + $('#btd3').val() + '</td>' +
'<td>' + $('#btd4').val() + '</td>' +
'<td>' + $('#btd5').val() + '</td>' +
'<td class="buttons" style="vertical-align: top"><button class="add" >Add</button><button class="hide" >Hide</button><button class="edit">Edit</button></td >'+
'</tr>' +
'');
for(var x = 1; x < $('input').length; x++) {
$('#btd' + x ).val('');
}
}
});
$("body").on('click','.hide',function () {
$("form").hide();
});
$("body").on('click','.add',function () {
$("form").show();
});
$("body").on('click','.edit',function () {
$("form").show();
$.each($(this).closest('tr').find('td:not(".buttons")'), function (key, val) {
$("form input[type=text]").eq(key).val($(val).text());
})
});
$("#show").click(function () {
//$("form").show();
//$("#btd1").val("Vlad");
//$("#btd2").val("Andrei");
//$("#btd3").val("vTask");
// $("#btd4").val("Ceva");
//$("#btd5").val("Alceva");
});
});

Check this code
Why dont you add other field for save and edit
<!DOCTYPE html>
<html >
<head >
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<title ></title >
</head >
<body >
<form class="a" action="" method="post" hidden>
<input type="text" name="nume" id="btd1" value="" >
<input type="text" name="prenume" id="btd2" value="" >
<input type="text" name="email" id="btd3" value="" >
<input type="text" name="telefon" id="btd4" value="" >
<input type="text" name="parola" id="btd5" value="" >
<input type="button" id="submit" value="Submit" name="submit" />
<input type="button" id="save" value="Save" style="display:none;" name="save" />
</form >
<table border="2" >
<tr>
<td >Vlad</td >
<td >Andrei</td >
<td >vTask</td >
<td >Ceva</td >
<td >Alceva</td >
<td class="buttons">
<button class="add">Add</button >
<button class="hide">Hide</button >
</td >
</tr >
</table >
</body >
</html >
Javascript Code
$(document).ready(function(){
$(".add").on("click",function(){
$(".a").show();
});
$(".hide").on("click",function(){
$(".a").hide();
});
$(document).on("click",".editEle",function(){
row = $(this).parents("tr")
var field1 = row.find("td:nth-child(1)").html();
var field2 = row.find("td:nth-child(2)").html();
var field3 = row.find("td:nth-child(3)").html();
var field4 = row.find("td:nth-child(4)").html();
var field5 = row.find("td:nth-child(5)").html();
update(field1,field2,field3,field4,field5);
});
var update = function(field1,field2,field3,field4,field5){
$("#btd1").val(field1);
$("#btd2").val(field2);
$("#btd3").val(field3);
$("#btd4").val(field4);
$("#btd5").val(field5);
$("#submit").hide();
$("#save").show();
};
$("#save").on("click",function(){
var val1 = $("#btd1").val();
var val2 = $("#btd2").val();
var val3 = $("#btd3").val();
var val4 = $("#btd4").val();
var val5 = $("#btd5").val();
row.find("td:nth-child(1)").html(val1);
row.find("td:nth-child(2)").html(val2);
row.find("td:nth-child(3)").html(val3);
row.find("td:nth-child(4)").html(val4);
row.find("td:nth-child(5)").html(val5);
});
$("#submit").on("click",function(){
var val1 = $("#btd1").val();
var val2 = $("#btd2").val();
var val3 = $("#btd3").val();
var val4 = $("#btd4").val();
var val5 = $("#btd5").val();
var ele = "<tr><td>"+val1+"</td><td>"+val2+"</td><td>"+val3+"</td><td>"+val4+"</td><td>"+val5+"</td><td><button class='editEle'>Edit</button></tr>";
$("table").append(ele);
});
});

JavaScript / JQuery html element append doesn't take attributes of parent - no PHP version

I am using a JQuery after method to append an HTML row to an existing row, but the attributes of the parent are not inherited. What am I doing wrong?
<html>
<head>
<title>AppendTest_min</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body bgcolor="Teal">
<div class="container">
<div class="form-group">
<div class="table-responsive">
<form name="budgetform" id="budgetform">
<table class="table" id="spreadsheet">
<tr id="row1">
<td id="inputtd">
<input type="text" id="descr1" name="descr[]" size="25" class="inputrow" style="font-weight:bold; background-color:Wheat">
<input type="text" id="dueday1" name="dueday[]" style="text-align: center; background-color:Ivory" size="6" class="inputrow">
<button type="button" name="add" id="add1" style="font-weight:bold; background-color:AntiqueWhite; font-size:7px" class="btn_add">+</button>
</td>
</tr>
</table>
</form>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function() {
$(document).on('click', '.btn_add', function() {
var button_id = $(this).attr("id");
// alert("HELLO");
// alert(button_id);
// get number part of ID
var nLen = button_id.length
var numsize = nLen - 3;
var nIdx = button_id.substr(3, 2);
var sIdx = nIdx.toString();
// alert(sIdx);
var sRowRef = "#row";
var sAddToThisRowRef = sRowRef + sIdx;
nIdx++;
sIdx = nIdx.toString();
var sRemIdx = "rem" + sIdx;
var sAddIdx = "add" + sIdx;
// var sNewRow = '<tr id="row'+nIdx+'"><td><input type="text" id="descr'+nIdx+'" name="descr[]" placeholder="Enter New Description" size = "25" class="inputrow" style="font-weight:bold; background-color:Wheat"/>';
var sNewRow = '<tr id="row' + nIdx + '"><td><input type="text" id="descr' + nIdx + '" name="descr[]" placeholder="Enter New Description" size = "25" class="inputrow" style="font-weight:bold; background-color:Wheat"/>';
sNewRow = sNewRow + '<input type="text" id="duedate' + nIdx + '" name="dueday[]" placeholder="Date Day" size = "6" class="inputrow"; background-color:Ivory" />';
sNewRow = sNewRow + '<button type="button" name="add" id=' + sAddIdx + ' style="font-weight:bold; background-color:AntiqueWhite; font-size:7px" class="btn_add">+</button></tr>';
$(sAddToThisRowRef).after(sNewRow);
// $(sAddToThisRowRef).append(sNewRow);
var sJustAddedRowRef = sRowRef + sIdx;
});
});
</script>
I am not seeing the cellspacing attribute inherited.
This one has had me stumped for a while... Thx!

The behavior you're seeing is because HTML compacts multiple whitespaces into one space character.
Whitespace is present between the <input> and <button> tags in the HTML, so a single space appears between the two input fields and the button in the first row. But no whitespace is present in the HTML constructed in your JavaScript code, so there is no space between those controls in subsequent rows.
The solution is to add a single space ( ) in between the controls as your code constructs them (see lines 2 and 3 below):
var sNewRow = '<tr id="row' + nIdx + '"><td><input type="text" id="descr' + nIdx + '" name="descr[]" placeholder="Enter New Description" size = "25" class="inputrow" style="font-weight:bold; background-color:Wheat"/>';
sNewRow = sNewRow + ' <input type="text" id="duedate' + nIdx + '" name="dueday[]" placeholder="Date Day" size = "6" class="inputrow"; background-color:Ivory" />';
sNewRow = sNewRow + ' <button type="button" name="add" id=' + sAddIdx + ' style="font-weight:bold; background-color:AntiqueWhite; font-size:7px" class="btn_add">+</button></tr>';

Use clone with insertAfter in your scenario. I think its best suited for what your doing.
For Example:
$("#car2").clone().insertAfter("div.car_well:last");
Or you can use try this as well:
$("div[id^='car']:last").after($('#car2').clone());

Javascript add multiple form fields dynamically

I am new in javascript and PHP. I am creating a form where I need an option that user clicks on add fields then some fields add.
I am using this script:
<script type="text/javascript">
var counter = 1;
var limit = 3;
function addInput(divName){
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
}
else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "Entry " + (counter + 1) + " <br><input type='text' name='myInputs[]'>";
document.getElementById(divName).appendChild(newdiv);
counter++;
}
}
</script>
Entry 1
and it's working but I need this code in the inner HTML
<label>Category <strong>*</strong></label>
<font id=catname>
<select name='catname'>
<option value='0'>============</option>
</select></font>
<label>Item<strong>*</strong></label><font id=itemname>
<select disabled='disabled' name='itemname'>
<option value='0'></option>
</select></font>
So how can I put these fields ?
Complete Code
<script type="text/javascript">
var counter = 1;
var limit = 3;
function addInput(divName){
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
}
else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "Entry " + (counter + 1) + " <br><input type='text' name='myInputs[]'>";
document.getElementById(divName).appendChild(newdiv);
counter++;
}
}
</script>
<div class="form-style-5" style="margin-left: 360px;">
<form name="form1" method="post" action="outgoingstocksave.php">
<fieldset>
<legend><span class="number"> </span> Outgoing Stocks Entry</legend>
<label>Ref. No.</label>
<input type="text" readonly="readonly" name="refno" value="<?php echo $refno; ?>">
<div id="dynamicInput">
<label>Category <strong>*</strong></label>
<font id=catname>
<select name='catname'>
<option value='0'>============</option>
</select></font>
<label>Item<strong>*</strong></label><font id=itemname>
<select disabled='disabled' name='itemname'>
<option value='0'></option>
</select></font>
<input type="number" name="quantity" maxlength="10" placeholder="ITEM QUANTITY *" required>
</div>
<input type="text" name="date" readonly="readonly" id="datepicker" placeholder="DATE *" required>
</fieldset>
<input type="submit" value="Save" />
</form>
</div>
<script language=Javascript>
function Inint_AJAX() {
try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) {} //IE
try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {} //IE
try { return new XMLHttpRequest(); } catch(e) {} //Native Javascript
alert("XMLHttpRequest not supported");
return null;
};
function dochange(src, val) {
var req = Inint_AJAX();
req.onreadystatechange = function () {
if (req.readyState==4) {
if (req.status==200) {
document.getElementById(src).innerHTML=req.responseText; //retuen value
}
}
};
req.open("GET", "itemsfill.php?data="+src+"&val="+val); //make connection
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=iso-8859-1"); // set Header
req.send(null); //send value
}
window.onLoad=dochange('catname', -1); // value in first dropdown
</script>

I did a test on something similar a couple years back. See if you can hack this up for your needs.
Script...
<script type = "text/javascript">
var cnt = 0;
function addFile() {
var div = document.createElement('DIV');
div.innerHTML = '<input id="file' + cnt + '" name="file' + '' + '" type="file" />' +
'<input id="Button' + cnt + '" type="button" ' + 'value="X" onclick="deleteFile(this)" />';
document.getElementById("uploadControls").appendChild(div);
cnt++;
buttonText();
}
function deleteFile(div) {
document.getElementById("uploadControls").removeChild(div.parentNode);
cnt--;
buttonText();
}
function buttonText() {
if (cnt > 0) {
document.myform.add_button.value = 'Add Another Attachment';
} else {
document.myform.add_button.value = 'Add Attachment';
}
}
</script>
HTML...
<form name="myform" action="<your thing>" method="post" enctype="multipart/form-data" style="display:inline;">
<input id="add_button" type="button" value="Add Attachment" onclick="addFile()" />
<br /><br />
<div id="uploadControls"></div>
<br/>
<input type="submit" value="Submit" name="action">
</form>

Develop Reference

JavaScript is the programming language of the Web.

How to Create a Loop Jquery - javascript

Related

without click append 3 rows, then click 1 row per click

Generate Serial Number on adding new line and adjust serial no when any line removed

Button for Update Table jquery

JavaScript / JQuery html element append doesn't take attributes of parent - no PHP version

Javascript add multiple form fields dynamically

Categories

Resources