I have a problem with jQuery. I'm working on a table in which every <td> has an <input> inside. I use this in order to make the Tab key advance the focus by columns:
var i = 0;
$('#pl_table tr').each(function () {
$(this).find('td').each(function (i) {
$(this).find('input').attr('tabindex', i + 1);
});
});
My problem is it's not possible to select input values from table inputs if I use this code. Nor using Shift + arrows even with the mouse.
table row looks like this:
<tr class='tripRow nopair' id='1'>
<td class='drop'></td>
<td id='col1' class='check'>
<input name='tripRow1[]' type='checkbox' name='maked' value='marked' />
</td>
<td id='col2' class='center'>
<input name='tripRow1[]' type='text' value='' size='2' />
</td>
<td id='col3' class='center'>
<input name='tripRow1[]' type='text' value='' maxlength='10' size='10' readonly />
</td>
<td id='col4' class='center'>
<input name='tripRow1[]' type='text' value='' maxlength='6' size='4' />
</td>
<td id='col5' class='center'>
<input name='tripRow1[]' type='text' value='' maxlength='1' size='1' />
</td>
<td id='col6' class='center'>
<input class='dispatch' name='tripRow1[]' type='text' value='' />
</td>
<td id='col7' class='center'>
<input name='tripRow1[]' type='text' value='' />
</td>
<td id='col8' class='center'>
<input name='tripRow1[]' type='text' value='' maxlength='3' size='3' />
</td>
<td id='col9' class='center'>
<input name='tripRow1[]' type='text' value='' maxlength='10' size='10' />
</td>
<td id='col10' class='center'>
<input name='tripRow1[]' class='timePicker' type='text' value='' maxlength='8' size='8' />
</td>
<td id='col11' class='center'>
<input name='tripRow1[]' class='timePicker' type='text' value='' maxlength='8' size='8' />
</td>
<td id='col12' class='center'>
<input name='tripRow1[]' class='timePicker' type='text' value='' maxlength='8' size='8' />
</td>
</tr>
I know one of these <td>s is readonly, but I have the problem with others also. I'm using IE10.
Any suggestions? Thank you very much for your help.
If I didn't get wrong, you want to up to down order, you need some code like this,
$(function () {
var tdLength = $("#pl_table tr:first td").length;
var k = 0;
for (var i = 0; i < tdLength; i++) {
$('#pl_table tr').each(function () {
$(this).find('td:eq(' + i + ') input').attr('tabindex', k++)
});
}
});
JSFiddle DEMO
Related
I have created a dynamic form and I am trying to send the form data to mysql through PHP but its not working. Data is not getting sent even from the very first row without adding a dynamic row. I'm new to this topic, so I'm out of ideas to solve it. How can I make this form a correct one and send accurate data to mysql?
In my form I have 3 fields that are not dynamic.
Here is the form code:
<form name="newbillform" method="POST" action="save_purchase_details.php">
<table style=" border:1px solid black" cellpadding="5px" cellspacing="0px" align="center" border="0">
<tr>
<td colspan="4" style="background:#0066FF; color:#FFFFFF; fontsize:20px" align="center">
ADD NEW PURCHASE RECORD
</td>
</tr>
<tr>
<td>Date:</td>
<td>
<input type="date" name="p_date"/>
</td>
</tr>
<tr>
<td>Invoice Number:</td>
<td>
<input type="text" name="invoice_no" size="50">
</td>
</tr>
<tr>
<td>Balance:</td>
<td>
<input type="text" name="balance" size="50">
</td>
</tr>
</table>
<h2 style="padding-left:10px;">Enter Product Details Below:-</h2>
<table id="product_details" style="margin-top:8px;" align='center' border='1' width="900px">
<tr id="row1">
<td>
<input type="text" name="qty[]" value="" placeholder="Quantity" size="6">
</td>
<td>
<input type="text" name="pack[]" value="" placeholder="Pack" size="6">
</td>
<td>
<input type="text" name="item_name[]" value="" placeholder="Item Name" size="16">
</td>
<td>
<input type="text" name="batch[]" value="" placeholder="Batch" size="6">
</td>
<td>
<input type="text" name="expiry[]" value="" placeholder="Expiry" size="6">
</td>
<td>
<input type="text" name="mrp[]" value="" placeholder="M.R.P" size="6">
</td>
<td>
<input type="text" name="rate[]" value="" placeholder="Rate" size="6">
</td>
<td>
<input type="text" name="vat[]" value="" placeholder="VAT" size="6">
</td>
<td>
<input type="text" name="discount[]" value="" placeholder="Discount" size="6">
</td>
<td>
<input type="button" class="button-add-row" onclick="add_row();" value="ADD ROW" size="8">
</td>
</tr>
</table>
<center>
<input type="submit" name="submit_row" value="SUBMIT">
</center>
</form>
Here is the javascript code:
<script type="text/javascript">
function add_row()
{
$rowno = $("#product_details tr").length;
$rowno = $rowno + 1;
$("#product_details tr:last").after("<tr id='row"+$rowno+"'><td><input type='text' name='qty[]' placeholder='Quantity' size='6'></td><td><input type='text' name='pack[]' placeholder='Pack' size='6'></td><td><input type='text' placeholder='Item Name' name='item_name[]' size='16'></td><td><input type='text' name='batch[]' placeholder='Batch' size='6'></td><td><input type='text' name='expiry[]' placeholder='Expiry' size='6'></td><td><input type='text' name='mrp[]' placeholder='M.R.P' size='6'></td><td><input type='text' name='rate[]' placeholder='Rate' size='6'></td><td><input type='text' name='vat[]' placeholder='VAT' size='6'></td><td><input type='text' name='discount[]' placeholder='Discount' size='6'></td><td><input type='button' class='button-add-row' value='DELETE' onclick=delete_row('row"+$rowno+"')></td></tr>");
}
function delete_row(rowno)
{
$('#'+rowno).remove();
}
</script>
Here is the PHP code:
<?php
$connect = mysql_connect("localhost","root","") or die(mysql_error());
mysql_select_db("store_records",$connect) or die(mysql_error());
if(isset($_POST['submit_row']))
{
$amount;
$grand_total;
for($i = 0; $i < count($_POST['item_name']); $i++)
{
$qty = $_POST['qty'][$i];
$p_date = $_POST['p_date'];
$invoice_no = $_POST['invoice_no'];
$balance = $_POST['balance'];
$pack = $_POST['pack'][$i];
$item_name = $_POST['item_name'][$i];
$batch = $_POST['batch'][$i];
$expiry = $_POST['expiry'][$i];
$mrp = $_POST['mrp'][$i];
$rate = $_POST['rate'][$i];
$vat = $_POST['vat'][$i];
$discount = $_POST['discount'][$i];
$amount = $balance+($qty*$rate)-$discount;
$grand_total = $amount+(($amount*$vat)/100);
$query =mysql_query("insert into bill_records values('', '$p_date', '$invoice_no', '$balance', '$qty','$pack','$item_name', '$batch', '$expiry', '$mrp', '$rate', '$vat', '$discount', '$amount', '$grand_total')");
}
}
?>
It would be of great help. Thank You..
I have trying to get this jQuery math to work with my form which I got the snippet to work fine but when transferring across to the required form I can't get it aligned to run the math required.
any pointers to where I am going wrong.
<script type="text/javascript" src="jquery-1.12.3.js"></script>
<script>
jQuery(function($) {
$(".Qty1, .TradePrice1").change(function() {
var total = 0;
$(".Qty1").each(function() {
var self = $(this),
TradePrice1 = self.next(".TradePrice1"),
subtotal = parseInt(self.val(), 10) * parseFloat(TradePrice1.val(), 10);
total += (subtotal || 0);
});
$("#total1").val(total);
});
});
</script>
<tr>
<th><div align="center">
<input type='text' name='F01u1' id='F01u1' />
</th>
<td>
<input type='text' name='Model1' id='Model1' />
</td>
<td>
<input type='text' name='Description1' id='Description1' />
</td>
<td>
<input type="text" name='TradePrice1' id='TradePrice1' />
</td>
<th>
<input type="text" name='Qty1' id='Qty1' />
</th>
<td>
<input type='text' name='Total1' id='Total1' />
</div></td>
</tr>
You have quite a few issues in your code.
the inputs will have duplicate id attributes which is invalid. You should use classes instead
you have some extraneous div elements which aside from being not needed, aren't opened or closed properly.
parseFloat() only takes a single parameter
the total field is not readonly so it can be amended by anyone, to any value desired.
your code works out the total for all rows and places it at the end of each individual row
.TradePrice1 is not a sibling of .Qty1 hence it will never be found from a next() call
With all that in mind you can massively improve your code. Try this:
$(".qty, .tradeprice").change(function() {
var total = 0;
$(".qty").each(function() {
var $qty = $(this),
$row = $qty.closest('tr'),
$tradePrice = $row.find('.tradeprice'),
$subtotal = $row.find('.subtotal');
subtotal = parseInt($qty.val(), 10) * parseFloat($tradePrice.val());
total += subtotal;
$subtotal.val(subtotal);
});
$('.total').val(total);
}).change();
input {
width: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>
<input type='text' name='F01u1' class='F01u1' />
</th>
<td>
<input type='text' name='Model' class='model' />
</td>
<td>
<input type='text' name='Description' class='description' />
</td>
<td>
<input type="text" name='TradePrice' class='tradeprice' value="100" />
</td>
<th>
<input type="text" name='Qty' class='qty' value="2" />
</th>
<td>
<input type='text' name='Total' class='subtotal' readonly="true" />
</td>
</tr>
<tr>
<th>
<input type='text' name='F01u1' class='F01u1' />
</th>
<td>
<input type='text' name='Model' class='model' />
</td>
<td>
<input type='text' name='Description' class='description' />
</td>
<td>
<input type="text" name='TradePrice' class='tradeprice' value="123" />
</td>
<th>
<input type="text" name='Qty' class='qty' value="5" />
</th>
<td>
<input type='text' name='Total' class='subtotal' readonly="true" />
</td>
</tr>
<tr>
<td colspan="6" align="right">
Total:
<input type='text' name='Total' class='total' readonly="true" />
</td>
</tr>
</table>
Note that the default values are purely for demonstration purposes and can be removed if needed.
I have form and toggle edit. in this sample it works but when I put in the looping, the toggle dont want to show back become toggle edit when another row click. This is my form.
$('.edit').click(function() {
$(this).hide();
var trs = $(this).closest('tr').siblings();
$(trs).each(function() {
var saveCancel = $(this).children().eq(7).find('.save, .cancel');
if (saveCancel.length && saveCancel.is(':visible')) {
saveCancel.hide();
$(saveCancel).siblings('.edit').show();
}
});
$('.form').find('.aaa').attr('disabled', true);
$(this).closest('tr').find('.aaa').attr('disabled', false);
$(this).siblings('.save, .cancel').show();
});
$('.cancel').click(function() {
$('.form').find('.aaa').attr('disabled', true);
$(this).siblings('.edit').show();
$(this).siblings('.save').hide();
$(this).hide();
});
.save,
.cancel {
display: none;
}
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
.save,
.cancel {
display: none;
}
</style>
</head>
<body>
<form method='POST' class="formfield" action='EditCompany'>
<table>
<tbody>
<tr align='center' class='form'>
<td>
<input type='hidden' class='form_id_data' name='form_id_data' value=''>
</td>
<td>
<input class="form-control aaa" type="text" disabled="disabled" value='' name='company_name'>
</td>
<td>
<input class="form-control aaa" type="text" disabled="disabled" value='' name='city'>
</td>
<td>
<input class="form-control aaa" type="text" disabled="disabled" value='' name='state'>
</td>
<td>
<input class="form-control aaa" type="text" disabled="disabled" value='' name='zipcode'>
</td>
<td>
<input class="form-control aaa" type="text" disabled="disabled" value='' name='branch'>
</td>
<td>
<input class="form-control aaa" type="text" disabled="disabled" value='' name='address'>
</td>
<td>
<input type='button' class='edit' data-toggle="modal" data-target="#confirm-edit" value='Edit'>
<input type='button' class='save' data-toggle="modal" data-target="#confirm-edit" value='Save'>
<input type='button' class='cancel' data-toggle="modal" data-target="#confirm-edit" value='Cancel'>
</td>
<td><span class="glyphicon glyphicon-trash">Delete</span>
</td>
</tr>
<tr align='center' class='form'>
<td>
<input type='hidden' class='form_id_data' name='form_id_data' value=''>
</td>
<td>
<input class="form-control aaa" type="text" disabled="disabled" value='' name='company_name'>
</td>
<td>
<input class="form-control aaa" type="text" disabled="disabled" value='' name='city'>
</td>
<td>
<input class="form-control aaa" type="text" disabled="disabled" value='' name='state'>
</td>
<td>
<input class="form-control aaa" type="text" disabled="disabled" value='' name='zipcode'>
</td>
<td>
<input class="form-control aaa" type="text" disabled="disabled" value='' name='branch'>
</td>
<td>
<input class="form-control aaa" type="text" disabled="disabled" value='' name='address'>
</td>
<td>
<input type='button' class='edit' data-toggle="modal" data-target="#confirm-edit" value='Edit'>
<input type='button' class='save' data-toggle="modal" data-target="#confirm-edit" value='Save'>
<input type='button' class='cancel' data-toggle="modal" data-target="#confirm-edit" value='Cancel'>
</td>
<td><span class="glyphicon glyphicon-trash">Delete</span>
</td>
</tr>
<tr align='center' class='form'>
<td>
<input type='hidden' class='form_id_data' name='form_id_data' value=''>
</td>
<td>
<input class="form-control aaa" type="text" disabled="disabled" value='' name='company_name'>
</td>
<td>
<input class="form-control aaa" type="text" disabled="disabled" value='' name='city'>
</td>
<td>
<input class="form-control aaa" type="text" disabled="disabled" value='' name='state'>
</td>
<td>
<input class="form-control aaa" type="text" disabled="disabled" value='' name='zipcode'>
</td>
<td>
<input class="form-control aaa" type="text" disabled="disabled" value='' name='branch'>
</td>
<td>
<input class="form-control aaa" type="text" disabled="disabled" value='' name='address'>
</td>
<td>
<input type='button' class='edit' data-toggle="modal" data-target="#confirm-edit" value='Edit'>
<input type='button' class='save' data-toggle="modal" data-target="#confirm-edit" value='Save'>
<input type='button' class='cancel' data-toggle="modal" data-target="#confirm-edit" value='Cancel'>
</td>
<td><span class="glyphicon glyphicon-trash">Delete</span>
</td>
</tr>
</tbody>
</table>
</form>
</body>
and this is the result in my apps.
how to make toggle edit work i looping?
UPDATE:
Currently, your site has a more basic problem: The trs are all enclosed by a separte tbody, which makes your
var trs = $(this).closest('tr').siblings();
to get nothing, so their status won't be checked.
Temp fix:
var trs = $(this).closest('tbody').siblings().find('tr')
Note that wrap each tr with tbody may not be what you intend to do. You may either replace the code, or not wrap each tr with tbody.
When you use $('.edit').click(... to register event handler to .edit, it'll only bind that handler to all existing .edit, which means that .edit which are created in the future won't be handle by that event handler.
To solve this, you can instead use .on, as I mentioned in comment, the format only need to change a little.
// V Parent to handler dynamically created descendants
$('table').on('click', '.edit', .....);
// ^ ^ It means we want that `table` to listen to
// all click events from its descendants that have class edit.
$('#add').click(function(){
$('table tr.form:first').eq(0).clone()
.appendTo($('table tbody'));
});
// This will only get to those
$('table').on('click', '.edit', function() {
$(this).hide();
var trs = $(this).closest('tr').siblings();
$(trs).each(function() {
var saveCancel = $(this).children().eq(2).find('.save, .cancel');
if (saveCancel.length && saveCancel.is(':visible')) {
saveCancel.hide();
$(saveCancel).siblings('.edit').show();
}
});
$('.form').find('.aaa').attr('disabled', true);
$(this).closest('tr').find('.aaa').attr('disabled', false);
$(this).siblings('.save, .cancel').show();
});
// Your origin form, you can see that it won't work on newly created rows.
$('.edit').click(function() {
console.log("Static register");
});
$('table').on('click', '.cancel', function() {
$('.form').find('.aaa').attr('disabled', true);
$(this).siblings('.edit').show();
$(this).siblings('.save').hide();
$(this).hide();
});
.save,
.cancel {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add">Add row</button>
<table>
<tbody>
<tr align='center' class='form'>
<td>
<input type='hidden' class='form_id_data' name='form_id_data' value=''>
</td>
<td>
<input class="form-control aaa" type="text" disabled="disabled" value='' name='address'>
</td>
<td>
<input type='button' class='edit' data-toggle="modal" data-target="#confirm-edit" value='Edit'>
<input type='button' class='save' data-toggle="modal" data-target="#confirm-edit" value='Save'>
<input type='button' class='cancel' data-toggle="modal" data-target="#confirm-edit" value='Cancel'>
</td>
</tr>
<tr align='center' class='form'>
<td>
<input type='hidden' class='form_id_data' name='form_id_data' value=''>
</td>
<td>
<input class="form-control aaa" type="text" disabled="disabled" value='' name='address'>
</td>
<td>
<input type='button' class='edit' data-toggle="modal" data-target="#confirm-edit" value='Edit'>
<input type='button' class='save' data-toggle="modal" data-target="#confirm-edit" value='Save'>
<input type='button' class='cancel' data-toggle="modal" data-target="#confirm-edit" value='Cancel'>
</td>
</tr>
<tr align='center' class='form'>
<td>
<input type='hidden' class='form_id_data' name='form_id_data' value=''>
</td>
<td>
<input class="form-control aaa" type="text" disabled="disabled" value='' name='address'>
</td>
<td>
<input type='button' class='edit' data-toggle="modal" data-target="#confirm-edit" value='Edit'>
<input type='button' class='save' data-toggle="modal" data-target="#confirm-edit" value='Save'>
<input type='button' class='cancel' data-toggle="modal" data-target="#confirm-edit" value='Cancel'>
</td>
</tr>
</tbody>
</table>
Iam stuck while doing some calculations in Javascript. I have some rows of records being shown, each rows has calculations. The actual scenario is the system has to calculate quantity * unitprice and fill the total in Total Field. When i change the currency from a dropdown, it has to go through some if conditions which i have given in javascript, its not taking that. Dont know what is the actual issue. Can anyone help? Iam putting the html form below:
<script type='text/javascript' src='http://code.jquery.com/jquery-2.1.3.js'></script>
<script type="text/javascript">
function isNum(value)
{
return 123;
}
function calcTotals()
{
var total = 0;
var i = 0;
while (document.forms['cart'].elements['unitprice[]'][i])
{
unitpriceObj = document.forms['cart'].elements['unitprice[]'][i];
item_quantityObj = document.forms['cart'].elements['item_quantity[]'][i];
total_inr_valueObj = document.forms['cart'].elements['total_inr[]'][i];
totalObj = document.forms['cart'].elements['total[]'][i];
totalObj.value = parseFloat((item_quantityObj.value*1) * unitpriceObj.value*1);
//Currency_change formulae
var e = document.getElementById("currency_change[]");
var currency_selected = e.options[e.selectedIndex].value;
var price = $(this).find(':selected').data('price');
if (currency_selected.value() == 'INR'){
total_inr_valueObj.value=totalObj.value;
} else if (currency_selected.value() == 'USD'){
total_inr_valueObj.value = totalObj.value * price.value;
} else {
total_inr_valueObj.value = (inrvalue.value / price.value) * totalObj.value;
}
}
i++;
}
return;
}
</script>
</head>
<body>
<form name='cart' method='post' class='single' action='generate_quot_cust_edititems_save_complete.php?tender_id=1' >
<table width="100%" border="1" style="border-collapse: collapse;" cellpadding="1" cellspacing="1">
<tr bgcolor="#E6E6FA">
<td width=4%>SlNo</td>
<td width=10%>Item Name</td>
<td width=4%>Qty</td>
<td width=3%>Units</td>
<td width=4%>Unitprice</td>
<td width=6%>Currency</td>
<td width=6%>Total</td>
<td width=6%>Total INR</td>
</tr>
<tr>
<td width='4%'>
<input size='1' type='hidden' name='id[0]' value='' readonly/>
<input size='1' type='text' name='sl[0]' value='1' readonly/>
</td>
<td width='10%'><input type='text' size='28' id='item_name0' name='item_name[0]' placeholder='filter 3' value='filter 3' /</td>
<td width='4%'><input size='1' class='item_quantity' type='text' name='item_quantity[]' id='item_quantity[]' value='25' /></td>
<td width='3%'><input size='1' class='item_units' type='text' name='item_units[]' id='item_units[]' value='Nos' readonly/></td>
<td width='4%'><input size='5' class='unitprice' type='text' name='unitprice[]' id='unitprice[]' value='' onchange='calcTotals()'/></td>
<td width='6%'>
<select id='currency_change[]' name='currency_change[]'>
<option value=''>select</option>
<option value=USD data-price=1>USD</option>
<option value=INR data-price=65.831111>INR</option>
<option value=GBP data-price=0.643864>GBP</option>
<option value=EUR data-price=0.88469>EUR</option>
<option value=SGD data-price=1.398912>SGD</option>
</select></td>
<td width='8%'><input size='9' type='text' name='total[]' id='total[]' value='' readonly class='total'/></td>
<td width='8%'><input size='7' type='text' id='total_inr[]' name='total_inr[]' value=''/></td>
</tr>
<tr>
<td width='4%'><input size='1' type='hidden' name='id[1]' value='' readonly/><input size='1' type='text' name='sl[1]' value='2' readonly/></td>
<td width='10%'><input type='text' size='28' id='item_name1' name='item_name[1]' placeholder='Filter2' value='Filter2' /</td>
<td width='4%'><input size='1' class='item_quantity' type='text' name='item_quantity[]' id='item_quantity[]' value='15' /></td>
<td width='3%'><input size='1' class='item_units' type='text' name='item_units[]' id='item_units[]' value='Nos' readonly/></td>
<td width='4%'><input size='5' class='unitprice' type='text' name='unitprice[]' id='unitprice[]' value='' onchange='calcTotals()'/></td>
<td width='6%'>
<select id='currency_change[]' name='currency_change[]'>
<option value=''>select</option>
<option value=USD data-price=1>USD</option>
<option value=INR data-price=65.831111>INR</option>
<option value=GBP data-price=0.643864>GBP</option>
<option value=EUR data-price=0.88469>EUR</option>
<option value=SGD data-price=1.398912>SGD</option>
</select>
</td>
<td width='8%'><input size='9' type='text' name='total[]' id='total[]' value='' readonly class='total'/></td>
<td width='8%'><input size='7' type='text' id='total_inr[]' name='total_inr[]' value=''/></td>
</tr>
</table></div>
<br><br>INR Value -><input type="text" class="inrvalue" id="inrvalue" name="inrvalue" value="65.831111">
<br><br>
<table><td><input type='submit' value='--Save Data--' /></td></tr></table></form>
There are multiple problems in your script.
A more jQuery-ish solution will be something like
$('#table :input').change(function() {
var $tr = $(this).closest('tr'),
$totInr = $tr.find('[name="total_inr[]"]'),
unitprice = +$tr.find('[name="unitprice[]"]').val() || 0,
qty = +$tr.find('[name="item_quantity[]"]').val() || 0,
$currency = $tr.find('[name="currency_change[]"] option:selected'),
currency = $currency.val(),
inr = $('#inrvalue').val();
var total = unitprice * qty;
$tr.find('[name="total[]"]').val(total);
if (currency == 'INR') {
$totInr.val(total);
} else if (currency == 'USD') {
$totInr.val(total * unitprice);
} else {
$totInr.val((inr / ($currency.data('price') || 1)) * total);
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form name='cart' method='post' class='single' action='generate_quot_cust_edititems_save_complete.php?tender_id=1'>
<table width="100%" border="1" style="border-collapse: collapse;" cellpadding="1" cellspacing="1" id="table">
<tr bgcolor="#E6E6FA">
<td width=4%>SlNo</td>
<td width=10%>Item Name</td>
<td width=4%>Qty</td>
<td width=3%>Units</td>
<td width=4%>Unitprice</td>
<td width=6%>Currency</td>
<td width=6%>Total</td>
<td width=6%>Total INR</td>
</tr>
<tr>
<td width='4%'>
<input size='1' type='hidden' name='id[0]' value='' readonly/>
<input size='1' type='text' name='sl[0]' value='1' readonly/>
</td>
<td width='10%'>
<input type='text' size='28' id='item_name0' name='item_name[0]' placeholder='filter 3' value='filter 3' /</td>
<td width='4%'>
<input size='1' class='item_quantity' type='text' name='item_quantity[]' value='25' />
</td>
<td width='3%'>
<input size='1' class='item_units' type='text' name='item_units[]' id='item_units[]' value='Nos' readonly/>
</td>
<td width='4%'>
<input size='5' class='unitprice' type='text' name='unitprice[]' id='unitprice[]' value='' />
</td>
<td width='6%'>
<select id='currency_change[]' name='currency_change[]'>
<option value=''>select</option>
<option value=USD data-price=1>USD</option>
<option value=INR data-price=65.831111>INR</option>
<option value=GBP data-price=0.643864>GBP</option>
<option value=EUR data-price=0.88469>EUR</option>
<option value=SGD data-price=1.398912>SGD</option>
</select>
</td>
<td width='8%'>
<input size='9' type='text' name='total[]' id='total[]' value='' readonly class='total' />
</td>
<td width='8%'>
<input size='7' type='text' id='total_inr[]' name='total_inr[]' value='' />
</td>
</tr>
<tr>
<td width='4%'>
<input size='1' type='hidden' name='id[1]' value='' readonly/>
<input size='1' type='text' name='sl[1]' value='2' readonly/>
</td>
<td width='10%'>
<input type='text' size='28' id='item_name1' name='item_name[1]' placeholder='Filter2' value='Filter2' /</td>
<td width='4%'>
<input size='1' class='item_quantity' type='text' name='item_quantity[]' id='item_quantity[]' value='15' />
</td>
<td width='3%'>
<input size='1' class='item_units' type='text' name='item_units[]' id='item_units[]' value='Nos' readonly/>
</td>
<td width='4%'>
<input size='5' class='unitprice' type='text' name='unitprice[]' id='unitprice[]' value='' />
</td>
<td width='6%'>
<select id='currency_change[]' name='currency_change[]'>
<option value=''>select</option>
<option value=USD data-price=1>USD</option>
<option value=INR data-price=65.831111>INR</option>
<option value=GBP data-price=0.643864>GBP</option>
<option value=EUR data-price=0.88469>EUR</option>
<option value=SGD data-price=1.398912>SGD</option>
</select>
</td>
<td width='8%'>
<input size='9' type='text' name='total[]' id='total[]' value='' readonly class='total' />
</td>
<td width='8%'>
<input size='7' type='text' id='total_inr[]' name='total_inr[]' value='' />
</td>
</tr>
</table>
</div>
<br>
<br>INR Value ->
<input type="text" class="inrvalue" id="inrvalue" name="inrvalue" value="65.831111">
<br>
<br>
<table>
<td>
<input type='submit' value='--Save Data--' />
</td>
</tr>
</table>
</form>
I suggest you use AngularJS Numbers:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: {{ quantity * cost }}</p>
</div>
Given the following HTML table which is part of a form on a PHP page, what is the best practice for validating user input?
If a user checks a checkbox for a row (or multiple rows), what is the best way to ensure the StartDate and EndDate input fields have data using client side scripting.
I would like to use jquery but I am very new to jquery. Would the jquery validation plugin make the most sense?
<table width='100%' border='0' cellspacing='0' cellpadding='0'>
<tr>
<td>
<input type='checkbox' id='Product[916109]' name='Product[916109]' value='916109' class='select'>
</td>
<td>
<input type='text' id='ProductName[916109]' name='ProductName[916109]' value='ESY792'>
</td>
<td>
<input type='text' id='StartDate[916109]' name='StartDate[916109]' class='startDatePicker'>
</td>
<td>
<input type='text' id='EndDate[916109]' name='EndDate[916109]' class='endDatePicker'>
</td>
</tr>
<tr>
<td>
<input type='checkbox' id='Product[916110]' name='Product[916110]' value='916110' class='select'>
</td>
<td>
<input type='text' id='ProductName[916110]' name='ProductName[916110]' value='ESY793'>
</td>
<td>
<input type='text' id='StartDate[916110]' name='StartDate[916110]' class='startDatePicker'>
</td>
<td>
<input type='text' id='EndDate[916110]' name='EndDate[916110]' class='endDatePicker'>
</td>
</tr>
<tr>
<td>
<input type='checkbox' id='Product[916111]' name='Product[916111]' value='916111' class='select'>
</td>
<td>
<input type='text' id='ProductName[916111]' name='ProductName[916111]' value='ESY794'>
</td>
<td>
<input type='text' id='StartDate[916111]' name='StartDate[916111]' class='startDatePicker'>
</td>
<td>
<input type='text' id='EndDate[916111]' name='EndDate[916111]' class='endDatePicker'>
</td>
</tr>
<tr>
<td>
<input type='checkbox' id='Product[916112]' name='Product[916112]' value='916112' class='select'>
</td>
<td>
<input type='text' id='ProductName[916112]' name='ProductName[916112]' value='ESY795'>
</td>
<td>
<input type='text' id='StartDate[916112]' name='StartDate[916112]' class='startDatePicker'>
</td>
<td>
<input type='text' id='EndDate[916112]' name='EndDate[916112]' class='endDatePicker'>
</td>
</tr>
<tr>
<td>
<input type='submit' id='btnSubmit' name='btnSubmit' value='Submit'>
</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
This should do the trick for the use case you've described:
var theForm = $('form'),
rows = theForm.find('tr');
theForm.on('submit', function(evt) {
rows.each(function(i, row) {
var valid = row.find( '.select' ).is( ':checked' )
&& ( row.find('.startDatePicker').val() && row.find('.endDatePicker').val() )
if ( !valid ) return evt.preventDefault();
} );
} );
No sense loading the validation plugin if that's all you need it for, but if you're likely to use it elsewhere then go for it.