We Keep Coding

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

Send data out of visible form only

I have two divs containing same input fields. When I enter the vales in both the div fields, all the values get submitted. what I want is, only the value of selected div (using radio button) should pass. Any help will be appreciated :-)
$(document).ready(function() {
console.log('called');
$('input[type=radio][name=cancel_policy]').change(function() {
if (this.value == '0') {
$("#fixedPolicyDiv").css("display", "block");
$("#percentagePolicyDiv").css("display", "none");
$("#percentagePolicyDiv").get(0).reset();
} else if (this.value == '1') {
$("#fixedPolicyDiv").css("display", "none");
$("#fixedPolicyDiv").get(0).reset();
$("#percentagePolicyDiv").css("display", "block");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label class="custom-control custom-control-primary custom-radio">
<input class="custom-control-input" type="radio" name="cancel_policy" value="0"> <span class="custom-control-indicator"></span>
<span class="custom-control-label">Fixed price</span>
</label>
<label class="custom-control custom-control-primary custom-radio">
<input class="custom-control-input" type="radio" name="cancel_policy" value="1"> <span class="custom-control-indicator"></span>
<span class="custom-control-label">Percentage wise</span>
</label>
<div id="fixedPolicyDiv" style="display:none;">
<div class="form-group">
<div class="col-lg-11 col-lg-offset-1">
<div class="table-responsive">
<table class="table" id='cancel_tbl'>
<tr>
<td width='30%'>Days</td>
<td width='30%'>Amount</td>
<td> </td>
</tr>
<tr>
<td>
<input type="number" name="cancel_policy_days[]" class="form-control" placeholder="days" value="<?= set_value('cancel_policy_days[]') ?>" required="required" />
</td>
<td>
<input type="number" name="cancel_policy_amount[]" class="form-control" placeholder="cancellation amount" value="<?= set_value('cancel_policy_amount[]') ?>" required="required" />
</td>
<td> </td>
</tr>
<tr>
<td colspan="6" align="center">
<input type="button" value="Add More" id="cancel_addmorebtn1" class="btn btn-outline-info">
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div id="percentagePolicyDiv" style="display:none;">
<div class="form-group">
<div class="col-lg-11 col-lg-offset-1">
<div class="table-responsive">
<table class="table" id='cancel_tb2'>
<tr>
<td width='30%'>Days</td>
<td width='30%'>Percentage</td>
<td> </td>
</tr>
<tr>
<td>
<input type="number" name="cancel_policy_days[]" class="form-control" placeholder="days" value="<?= set_value('cancel_policy_days[]') ?>" required="required" />
</td>
<td>
<input type="number" name="cancel_policy_amount[]" class="form-control" placeholder="cancellation percentage" value="<?= set_value('cancel_policy_amount[]') ?>" required="required" />
</td>
<td> </td>
</tr>
<tr>
<td colspan="6" align="center">
<input type="button" value="Add More" id="cancel_addmorebtn2" class="btn btn-outline-info">
</td>
</tr>
</table>
</div>
</div>
</div>
</div>

You can add the disabled property to the inputs you do not want to sent.
for exemple :
$("#percentagePolicyDiv").find('input').prop('disabled');

If reset() is not only JS method you accept, we can make it with setting value of input fields such way:
$(document).ready(function() {
console.log('called');
$('input[type=radio][name=cancel_policy]').change(function() {
if (this.value == '0') {
$("#percentagePolicyDiv").find('input').val('');
$("#fixedPolicyDiv").css("display", "block");
$("#percentagePolicyDiv").css("display", "none");
} else if (this.value == '1') {
$("#fixedPolicyDiv").find('input').val('');
$("#fixedPolicyDiv").css("display", "none");
$("#percentagePolicyDiv").css("display", "block");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label class="custom-control custom-control-primary custom-radio">
<input class="custom-control-input" type="radio" name="cancel_policy" value="0"> <span class="custom-control-indicator"></span>
<span class="custom-control-label">Fixed price</span>
</label>
<label class="custom-control custom-control-primary custom-radio">
<input class="custom-control-input" type="radio" name="cancel_policy" value="1"> <span class="custom-control-indicator"></span>
<span class="custom-control-label">Percentage wise</span>
</label>
<div id="fixedPolicyDiv" style="display:none;">
<div class="form-group">
<div class="col-lg-11 col-lg-offset-1">
<div class="table-responsive">
<table class="table" id='cancel_tbl'>
<tr>
<td width='30%'>Days</td>
<td width='30%'>Amount</td>
<td> </td>
</tr>
<tr>
<td>
<input type="number" name="cancel_policy_days[]" class="form-control" placeholder="days" value="<?= set_value('cancel_policy_days[]') ?>" required="required" />
</td>
<td>
<input type="number" name="cancel_policy_amount[]" class="form-control" placeholder="cancellation amount" value="<?= set_value('cancel_policy_amount[]') ?>" required="required" />
</td>
<td> </td>
</tr>
<tr>
<td colspan="6" align="center">
<input type="button" value="Add More" id="cancel_addmorebtn1" class="btn btn-outline-info">
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div id="percentagePolicyDiv" style="display:none;">
<div class="form-group">
<div class="col-lg-11 col-lg-offset-1">
<div class="table-responsive">
<table class="table" id='cancel_tb2'>
<tr>
<td width='30%'>Days</td>
<td width='30%'>Percentage</td>
<td> </td>
</tr>
<tr>
<td>
<input type="number" name="cancel_policy_days[]" class="form-control" placeholder="days" value="<?= set_value('cancel_policy_days[]') ?>" required="required" />
</td>
<td>
<input type="number" name="cancel_policy_amount[]" class="form-control" placeholder="cancellation percentage" value="<?= set_value('cancel_policy_amount[]') ?>" required="required" />
</td>
<td> </td>
</tr>
<tr>
<td colspan="6" align="center">
<input type="button" value="Add More" id="cancel_addmorebtn2" class="btn btn-outline-info">
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
Otherwise you should implement desired ID to <form> elements.
formObject.reset() is JS method of FORM-object

Access the element before the current element in jQuery

I have the following HTML table.
<table id="sample_editable_1" role="grid" aria describedby="sample_editable_1_info">
<tbody>
<tr role="row" class="odd">
<td class="sorting_1">
<input type="text" class="form-control" value=""> </td>
<td>
<input type="text" class="form-control" value=""> </td>
<td>
<input type="text" class="form-control" value=""> </td>
<td class="center">
<button id="sample_editable_1_new" class="btn green"> <i class="fa fa-plus"></i> </button>
</td>
</tr>
</tbody>
</table>
When I click on the button with class "btn green", I generate a new row by making use of a delegated event handler as follows.
$('#sample_editable_1').on('click', ".btn green", function() {
$(".odd:last").after('<<tr role="row" class="odd"><td class="sorting_1"> <input type="text" class="form-control" value=""> </td><td> <input type="text" class="form-control" value=""> </td><td> <input type="text" class="form-control" value=""> </td><td class="center"><button id="sample_editable_1_new" class="btn green"> <i class="fa fa-plus"></i> </button></td></tr>');
});
However, When I create a new row, I need the "add new" button of the previous row to vanish. I can use the hide() function in jQuery, but how do I access the previous row? The following is not working.
$( row ).prev()

Can't you just hide the button which has just been clicked i.e.
$('#sample_editable_1').on('click', ".btn green", function() {
$(".odd:last").after('<<tr role="row" class="odd"><td class="sorting_1"> <input type="text" class="form-control" value=""> </td><td> <input type="text" class="form-control" value=""> </td><td> <input type="text" class="form-control" value=""> </td><td class="center"><button id="sample_editable_1_new" class="btn green"> <i class="fa fa-plus"></i> </button></td></tr>');
$(this).hide();
});

You can hide() the button which is clicked using this context. Also your selector is incorrect it should be ".btn.green" instead of ".btn green"
$('#sample_editable_1').on('click', ".btn.green", function() {
$(this).hide();
//Rest of the code
});
$('#sample_editable_1').on('click', ".btn.green", function() {
$(this).hide();
$(".odd:last").after('<tr role="row" class="odd"><td class="sorting_1"> <input type="text" class="form-control" value=""> </td><td> <input type="text" class="form-control" value=""> </td><td> <input type="text" class="form-control" value=""> </td><td class="center"><button id="sample_editable_1_new" class="btn green"> <i class="fa fa-plus"></i> Add</button></td></tr>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="sample_editable_1" role="grid" aria describedby="sample_editable_1_info">
<tbody>
<tr role="row" class="odd">
<td class="sorting_1">
<input type="text" class="form-control" value="">
</td>
<td>
<input type="text" class="form-control" value="">
</td>
<td>
<input type="text" class="form-control" value="">
</td>
<td class="center">
<button id="sample_editable_1_new" class="btn green"> <i class="fa fa-plus">Add</i>
</button>
</td>
</tr>
</tbody>
</table>

I am found something can you try this one,For more Read This one
$("#addrows").click(function () {
$("#mytable").each(function () {
var tds = '<tr>';
jQuery.each($('tr:last td', this), function () {
tds += '<td>' + $(this).html() + '</td>';
});
tds += '</tr>';
if ($('tbody', this).length > 0) {
$('tbody', this).append(tds);
} else {
$(this).append(tds);
}
});
});

Try like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="sample_editable_1" role="grid" aria describedby="sample_editable_1_info">
<tbody>
<tr role="row" class="odd">
<td class="sorting_1">
<input type="text" class="form-control" value="">
</td>
<td>
<input type="text" class="form-control" value="">
</td>
<td>
<input type="text" class="form-control" value="">
</td>
<td class="center">
<button id="sample_editable_1_new" class="btn green"> <i class="fa fa- plus">Add</i>
</button>
</td>
</tr>
</tbody>
</table>
Jquery:
$('#sample_editable_1').on('click', ".btn.green", function() {
$(this).hide();
$(".odd:last").after('<tr role="row" class="odd"><td class="sorting_1"> <input type="text" class="form-control" value=""> </td><td> <input type="text" class="form-control" value=""> </td><td> <input type="text" class="form-control" value=""> </td><td class="center"><button id="sample_editable_1_new" class="btn green"> <i class="fa fa-plus"></i> Add</button></td></tr>');
});
jsfiddle: https://fiddle.jshell.net/f4ux0bcs/

how to move previous page and show values in fields?

i make two web page,i want to get data from first page on second page,if user click edit message then move first page and show the entered data of user,here is my code:
first.php
<h1>Compose Message</h1>
<script type="text/javascript" src="<?=MURL?>/js/ckeditor/ckeditor.js"></script>
<script src="//ticket_inspector_new.com/js/tooltip.js" type="text/javascript"> </script>
<form action="" method="post" id="form" enctype="multipart/form-data">
<table class="form">
<tr class="heading">
<th style="width: 25%;">Recipients</th>
<th style="width: 75%;"> </th>
</tr>
<tr>
<td>
<label for="campaigns">Campaigns</label>
</td>
<td>
<select name="events[]" multiple size="10" >
<?
$select = sprintf ("SELECT event_id,event_name
FROM `events`
WHERE (`user_id` = '%s') order by event_name",
$GLOBALS ['mysqli']->real_escape_string ($_SESSION['user_id']));
$res = $GLOBALS ['mysqli']->query ($select) or die ($GLOBALS ['mysqli']->error . __LINE__);
if ($res->num_rows > 0)
{
while($row = $res->fetch_assoc ())
{
?>
<option value="<?=$row['event_id']?>"><?=$row['event_name']?></option>
<?
}
}
?>
</select>
</td>
</tr>
<tr>
<td style="padding-left:95px;">
<label for="fromdate">Registrants From</label>
</td>
<td style="padding-left:10px;">
<input name="fromdate" type="text" value="" class="calendar time" id="fromdate" size="30" />
<label for="todate">To</label>
<input name="todate" type="text" value="" class="calendar time" id="todate" size="30" />
</td>
</tr>
<tr>
<td>
<label for="upload">Upload CSV</label>
<span class="helptip">
Select CSV file for upload.
</span>
</td>
<td>
<input name="uploadcsv" type="file" />
</td>
</tr>
<tr class="heading">
<th style="width: 25%;">Message</th>
<th style="width: 75%;"> </th>
</tr>
<tr>
<td>
<label for="description">Description(optional)</label>
</td>
<td>
<input name="description" type="text" value="" id="description" size="35" />
</td>
</tr>
<tr>
<td>
<label for="subject">Subject</label>
</td>
<td>
<input name="subject" type="text" value="" id="subject" size="35" />
</td>
</tr>
<tr>
<td>
<label for="fromname">From Name</label>
</td>
<td>
<input name="fromname" type="text" value="" id="fromname" size="27" />
</td>
</tr>
<tr>
<td>
<label for="replyto">Reply To</label>
</td>
<td>
<input name="replyto" type="text" value="" id="replyto" size="27" />
</td>
</tr>
<tr>
<td>
<label for="senddatetime">Send Date/Time</label>
<span class="helptip">
Click the calender to select the date you wish ans select time zone from select box.
</span>
</td>
<td>
<input name="senddatetime" type="text" value="" class="calendar time" id="senddatetime" size="30" />
<select name="timezone" id="timezone">
<option value="Pacific/Honolulu">Hawaii-Aleutian Time (Honolulu, no DST)
</option><option value="America/Anchorage">Alaska Time (Anchorage)</option><option value="America/Los_Angeles"
selected="selected">Pacific Time (Los Angeles)</option><option value="America/Denver">Mountain Time (Denver)</option><option
value="America/Phoenix">Mountain Time (Phoenix, no DST)</option><option value="America/Chicago">Central Time (Chicago)
</option><option value="America/Regina">Central Time (Regina, no DST)</option><option value="America/New_York">Eastern Time
(New York)</option><option value="America/Halifax">Atlantic Time (Halifax)</option>
</select>
<script>
var list = document.getElementById('timezone');
var selval = "0";
for(var i = 0; i < list.options.length; ++i)
{
if(list.options[i].value==selval)
{
list.options[i].selected = true;
i=list.options.length;
}
}
</script>
</td>
</tr>
<tr>
<td>
<label for="message">Message</label>
</td>
<td colspan="2">
<textarea name="message" class="ckeditor" id="message" cols="90" rows="15" style="width: 100%;"></textarea>
</td>
</tr>
</table>
<table class="form">
<tr class="heading">
<th style="width:100%; background-color:#C4C4FE; font-size:10px; font-weight:normal;">Emails can take upto 30 minutes to Send.We have zero tolerance for spam messages.Every message sent out is reviewed for spam.Any spam messages sent will result in termination of account.</th>
</tr>
</table>
<p class="center_align">
<input type="submit" class="button arrow" name="submit_skip" value="Continue" />
</p>
</form>
and here is my second page:
<h1>Confirm Message</h1>
<?
$recepients=0;
$count=count($_POST['events']);
?>
<input type="button" class="button edit" name="submit_skip" value="Edit Message" />
<input type="submit" class="button email" name="submit_email" value="Send Message" />
i want when user click on edit massage it moves previous page and values shown in fields
?>

Since you want to send form to a two different scripts I suggest that you use 2 forms:
<form action="formfilling.php">
<?php
//prepare the recived POST to send back:
foreach( $_POST as $key => $value ){
if( is_array($_POST[$key]) ){ //if post is array e.g. your events[]
foreach( $_POST[$key] as $subvalue ){
echo '<input type="hidden"'
.' name="'.htmlspecialchars($key).'[]"'
.' value="'.htmlspecialchars($subvalue).'">'."\n";
}
} else{
echo '<input type="hidden"'
.' name="'.htmlspecialchars($key).'"'
.' value="'.htmlspecialchars($value).'">'."\n";
}
}
?>
<input type="submit" class="button edit" name="submit_skip" value="Edit Message" />
</form>
<form action="submitemail.php">
<?php //possibly show message? ?>
<input type="submit" class="button email" name="submit_email" value="Send Message" />
</form>
And then in formfilling check if input is not empty if not => echo its value
if( !empty($_POST['inputName']) ) echo htmlspecialchars($_POST['inputName']);
And for the array something like
if( !empty($_POST['inputName']) ){
foreach( $_POST['inputName'] as $val ){
//Test if the current option has the value of $val if so:
echo /*OPTION with SELECTED*/;
}
}
ALWAYS USE HTML ESCAPING when printing/echoing $_POST/$_GET
=> dont trust the users!
=> in PHP there is a htmlspecialchars() function

go to the previous page with javascript
window.history.go(-1)

How to generate the rows automatically based on input values?

<label class="col-lg-1 control-label" id="pd">Mode:</label>
<div class="col-lg-3">
<div class="row">
<div class="col-lg-4">
<input type="number" id="follow_Date" placeholder="Mode" name="TMode" class="form-control input-xs Mode">
</div>
</div>
</div>
This is input text box code in view page......
<table class='table table-hover table-bordered table-striped table-xxs' id="cartGrid">
<thead>
<tr>
<th></th>
<th>Sno</th>
<th >Date</th>
<th >Amount</th>
<th >Bank Name</th>
<th >Chqamt</th>
<th >Payable</th>
<th>Bank1</th>
<th >Chqamt1</th>
<th >Payable1</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href='javascript:void(0);' class='remove1'><span class='glyphicon glyphicon-remove'></span></a></td>
<td ><input style="width:50px" type="text" class="form-control" name="Sno[]" id="Sno"></td>
<td><input style="width:50px" type="text" class="form-control" name="Date[]" id="Date"></td>
<td> <input style="width:90px" type="text" class="form-control" name="Amount[]" id="Amount"></td>
<td ><input style="width:80px" type="text" class="form-control" name="Bankname[]" id="Bankname"></td>
<td ><input style="width:80px" type="text" class="form-control" name="Chqamt[]" id="Chqamt"></td>
<td ><input style="width:80px" type="text" class="form-control" name="Payable[]" id="Payable"></td>
<td ><input style="width:80px" type="text" class="form-control" name="Bank1[]" id="Bank1"></td>
<td ><input style="width:80px" type="text" class="form-control" name="Chqamt1[]" id="Chqamt1"></td>
<td ><input style="width:80px" type="text" class="form-control" name="Payable1[]" id="Payable1"></td>
</tr>
</tbody>
</table>
This is my table code.... in view page
<script type="text/javascript">
$('#cartGrid').on('keydown','input', function (e) {
var keyCode = e.keyCode;
if (keyCode !== 9) return;
var $this = $(this),
$lastTr = $('tr:last', $('#cartGrid')),
$lastTd = $('td:last', $lastTr);
if (($(e.target).closest('td')).is($lastTd)) {
var cloned = $lastTr.clone();
cloned.find('input').val('');
$lastTr.after(cloned);
}
});
</script>
<script>
$(document).on('click', '.remove1', function() {
var trIndex = $(this).closest("tr").index();
if(trIndex>0) {
$(this).closest("tr").remove();
} else {
alert("Sorry!! Can't remove first row!");
}
});
</script>
This is javascript for automatic cell creation.
My problem is how to create a automatic rows by giving input into input fields.
And the sno is automatically generate(i.e 1,2... based on the input values).
please help to solve this issue.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<label class="col-lg-1 control-label" id="pd">Mode:</label>
<div class="col-lg-3">
<div class="row">
<div class="col-lg-4">
<input type="number" id="follow_Date" placeholder="Mode" name="TMode" class="form-control input-xs Mode">
</div>
</div>
</div>
<label class="col-lg-1 control-label" id="pd">Due Start:</label>
<div class="col-lg-3">
<div class="row">
<div class="col-lg-4">
<input type="text" class="form-control input-xs datepicker-dates Dues" placeholder="Due Start Date…" id="txtDate" name="TDDate" value="">
</div>
</div>
</div>
</div>
<div class="container">
<table class='table table-hover table-bordered table-striped table-xxs' id="cartGrid">
<thead>
<tr>
<th></th>
<th>Sno</th>
<th >Date</th>
<th >Amount</th>
<th >Bank Name</th>
<th >Chqamt</th>
<th >Payable</th>
<th>Bank1</th>
<th >Chqamt1</th>
<th >Payable1</th>
</tr>
</thead>
<tbody id="appendRows">
<tr>
<td><a href='javascript:void(0);' class='remove1'><span class='glyphicon glyphicon-remove'></span></a></td>
<td ><input style="width:50px" type="text" class="form-control" name="Sno[]" id="Sno" value="1"></td>
<td><input style="width:50px" type="text" class="form-control" name="Date[]" id="Date"></td>
<td> <input style="width:90px" type="text" class="form-control" name="Amount[]" id="Amount"></td>
<td ><input style="width:80px" type="text" class="form-control" name="Bankname[]" id="Bankname"></td>
<td ><input style="width:80px" type="text" class="form-control" name="Chqamt[]" id="Chqamt"></td>
<td ><input style="width:80px" type="text" class="form-control" name="Payable[]" id="Payable"></td>
<td ><input style="width:80px" type="text" class="form-control" name="Bank1[]" id="Bank1"></td>
<td ><input style="width:80px" type="text" class="form-control" name="Chqamt1[]" id="Chqamt1"></td>
<td ><input style="width:80px" type="text" class="form-control" name="Payable1[]" id="Payable1"></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<script type="text/javascript">
$('#cartGrid').on('keydown','input', function (e) {
var keyCode = e.keyCode;
if (keyCode !== 9) return;
var $this = $(this),
$lastTr = $('tr:last', $('#cartGrid')),
$lastTd = $('td:last', $lastTr);
if (($(e.target).closest('td')).is($lastTd)) {
var cloned = $lastTr.clone();
cloned.find('input').val('');
$lastTr.after(cloned);
}
});
</script>
<script>
$(document).on('click', '.remove1', function() {
var trIndex = $(this).closest("tr").index();
if(trIndex>0) {
$(this).closest("tr").remove();
} else {
alert("Sorry!! Can't remove first row!");
}
});
</script>
<script type="text/javascript">
$(function(){
$("body").on("focusout",".Mode",function(){
var trLength=$('body #appendRows tr').length;
for (var i = 1; i <trLength; i++) {
$('#appendRows tr:nth-child(2)').remove();
}
var val = $(this).val();
var i=0;
for(i==0;i<val;i++){
var html = $("#appendRows tr:first-child").clone();
html.find("input").val("");
html.find('input[name^="Sno"]').val(i+2);
$('#appendRows').append(html);
}
});
})
</script>