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>
Related
I am creating an enquiry form for which user can input their information and display all the data in pop up windows.
Everything can show up except for multiple choice selection which only show a single output.
I want to show all the output which I select.
For example: When I select Green and Blue as the color, It only show 1 color which is Green.
Look at this image screenshot here:
Hoping someone can help me, here is my HTML and Javascript code.
<html>
<head>
<title>Form Example</title>
<script LANGUAGE="JavaScript" type="text/javascript">
function display() {
DispWin = window.open('','NewWin', 'toolbar=no,status=no,width=300,height=200')
message = "<b>Your form has been submitted! </b>"
message += "<ul><li><b>Enquiry Type: </b>" + document.form1.enquiryType.value;
message += "<li><b>Salutation: </b>" + document.form1.salutation.value;
message += "<b>Name: </b>" + document.form1.salutation.value + document.form1.yourname.value;
message += "<li><b>Address: </b>" + document.form1.address.value;
message += "<li><b>Email: </b>" + document.form1.email.value;
message += "<li><b>Favourite Color: </b>" + document.form1.eyeColor.value;
message += "<li><b>PHONE: </b>" + document.form1.phone.value + "</ul>";
DispWin.document.write(message);
}
</script>
</head>
<body>
<h1>Enquiry Form</h1>
<form name="form1">
<table>
<tr>
<td valign="top">
<label for="EnquiryType" ,font-size: 20px;>Enquiry Type</label>
</td>
<td valign="top">
<select name="enquiryType" id="enquiryType" >
<option value="General Infomation">General Information</option>
<option value="Reservations">Reservations</option>
<option value="Rates">Rates</option>
</td>
</tr>
<tr>
<td valign="top">
<label for="Salutation">Salutation</label>
</td>
<td valign="top">
<label for="Mr">Mr</label>
<input type="radio" name="salutation" id="Mr" value="Mr">
<label for="Mrs">Mrs</label>
<input type="radio" name="salutation" id="Mrs" value="Mrs">
<label for="Miss">Miss</label>
<input type="radio" name="salutation" id="Miss" value="Miss">
<label for="male">Dr</label>
<input type="radio" name="salutation" id="Dr" value="Dr">
</td>
</tr>
<tr>
<td valign="top">
<label for="full_name">Full Name *</label>
</td>
<td valign="top">
<input TYPE="TEXT" SIZE="20" NAME="yourname">
</td>
</tr>
<tr>
<td valign="top">
<label for="full_name">Adress: </label>
</td>
<td valign="top">
<input TYPE="TEXT" SIZE="30" NAME="address">
</td>
</tr>
<tr>
<td valign="top">
<label for="full_name">Phone Number: </label>
</td>
<td valign="top">
<input TYPE="TEXT" SIZE="15" NAME="phone">
</td>
</tr>
<tr>
<td valign="top">
<label for="email">Email Address *</label>
</td>
<td valign="top">
<input type="text" name="email" maxlength="80" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="FavColor">Favourite Color</label>
</td>
<td valign="top">
<select name="eyeColor" id="eyeColor" multiple>
<option value="Green">Green</option>
<option value="Red">Red</option>
<option value="Blue">Blue</option>
<option value="Black">Black</option>
<option value="Red">Yellow</option>
</option>
</select>
</td>
</tr>
</table>
</p>
<p><input TYPE="BUTTON" VALUE="Submit" onClick="display();"></p>
</form>
</body>
</html>
You need to replace document.form1.eyeColor.value; by Array.from(document.form1.eyeColor.selectedOptions).map(option => option.value); then you can got selected value. From this map() method to get whole selected value.
Note: window.open() method is not working in this editor so I used alert() method for render fill-up result.
<html>
<head>
<title>Form Example</title>
<script LANGUAGE="JavaScript" type="text/javascript">
function display() {
DispWin = window.open('','NewWin', 'toolbar=no,status=no,width=300,height=200')
message = "<b>Your form has been submitted! </b>"
message += "<ul><li><b>Enquiry Type: </b>" + document.form1.enquiryType.value;
message += "<li><b>Salutation: </b>" + document.form1.salutation.value;
message += "<b>Name: </b>" + document.form1.salutation.value + document.form1.yourname.value;
message += "<li><b>Address: </b>" + document.form1.address.value;
message += "<li><b>Email: </b>" + document.form1.email.value;
message += "<li><b>Favourite Color: </b>" + Array.from(document.form1.eyeColor.selectedOptions).map(option => option.value);
message += "<li><b>PHONE: </b>" + document.form1.phone.value + "</ul>";
alert(message);
DispWin.document.write(message);
}
</script>
</head>
<body>
<h1>Enquiry Form</h1>
<form name="form1">
<table>
<tr>
<td valign="top">
<label for="EnquiryType" ,font-size: 20px;>Enquiry Type</label>
</td>
<td valign="top">
<select name="enquiryType" id="enquiryType" >
<option value="General Infomation">General Information</option>
<option value="Reservations">Reservations</option>
<option value="Rates">Rates</option>
</select>
</td>
</tr>
<tr>
<td valign="top">
<label for="Salutation">Salutation</label>
</td>
<td valign="top">
<label for="Mr">Mr</label>
<input type="radio" name="salutation" id="Mr" value="Mr">
<label for="Mrs">Mrs</label>
<input type="radio" name="salutation" id="Mrs" value="Mrs">
<label for="Miss">Miss</label>
<input type="radio" name="salutation" id="Miss" value="Miss">
<label for="male">Dr</label>
<input type="radio" name="salutation" id="Dr" value="Dr">
</td>
</tr>
<tr>
<td valign="top">
<label for="full_name">Full Name *</label>
</td>
<td valign="top">
<input TYPE="TEXT" SIZE="20" NAME="yourname">
</td>
</tr>
<tr>
<td valign="top">
<label for="full_name">Adress: </label>
</td>
<td valign="top">
<input TYPE="TEXT" SIZE="30" NAME="address">
</td>
</tr>
<tr>
<td valign="top">
<label for="full_name">Phone Number: </label>
</td>
<td valign="top">
<input TYPE="TEXT" SIZE="15" NAME="phone">
</td>
</tr>
<tr>
<td valign="top">
<label for="email">Email Address *</label>
</td>
<td valign="top">
<input type="text" name="email" maxlength="80" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="FavColor">Favourite Color</label>
</td>
<td valign="top">
<select name="eyeColor" id="eyeColor" multiple="multiple">
<option value="Green">Green</option>
<option value="Red">Red</option>
<option value="Blue">Blue</option>
<option value="Black">Black</option>
<option value="Red">Yellow</option>
</select>
</td>
</tr>
</table>
<p><input type="button" value="Submit" onclick="display()"></p>
</form>
</body>
</html>
You can use selected option to get selected options.
let selectedOptions= document.form1.eyeColor.selectedOptions;
let selectedValues = [];
for (let i=0; i < selectedOptions.length; i++) {
selectedValues[i] = selectedOptions[i].value;
}
console.log(selectedValues);
Hope this helps.
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..
The below code is used to add new row to the table, also multiply two fields and show the result in the final field, in this dynamically generated row and at last part of code, removes the added row if it is not needed.
<script type="text/javascript">
$(window).load(function(){
$('.add-box').click(function() {
var box_html = $('<tr class="multLote"><td align="center"><input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;" /></td> ' +
'<td><textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100" > </textarea></td>' +
'<td><input type="text" name="lote20[]" value="0" class="val20" /></td>' +
'<td><input type="text" name="lote10[]" value="0" class="val10" /></td>' +
'<td><input type="text" disabled name="lote_result[]" class="lote_result" value="0"></td>' +
'<th>Remover</th></tr>');
$('#tabela-lotes tbody').append(box_html);
return false;
});
$('#tabela-lotes').on("keyup", ".multLote input", function() {
var mult = 0;
// for each row:
console.log($(this).closest('table').find("tr.multLote").length);
$(this).closest('tr.multLote').each(function() {
// get the values from this row:
var $val20 = $('.val20', this).val();
var $val10 = $('.val10', this).val();
console.log($val100);
var $total = ($val20 * $val10);
console.log($total);
// set total for the row
$('.lote_result', this).val($total);
mult += $total;
});
});
$('#tabela-lotes').on('click', '.remove-box', function(e) {
e.preventDefault();
$(this).closest('tr.multLote').remove();
});
});
</script>
This is the html code.
<form action="tabledb.php" method="POST">
<body>
<input type="button" class="add-box" value="Add">
<table id="tabela-lotes">
<thead>
<tr>
<th>
SL. NO
</th>
<th>
PRODUCT NAME
</th>
<th>
RATE PER CB
</th>
<th>
CBs
</th>
<th>
AMOUNT
</th>
</tr>
</thead>
<tbody><tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100" value="0"> </textarea>
</td>
<td>
<input type="text" name="lote20[]" class="val20" value="0">
</td>
<td>
<input type="text" name="lote10[]" class="val10" value="0">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="0">
</td>
</tr>
</tbody></table>
<table>
<tr><th>
Total CBS :</th>
<td> <input type="text" name="total_cbs" id="total_cbs" placeholder="Total CBS" style="height:25px;font-weight:bold;" onfocus="cal1()" readonly ></td></tr>
<tr><th>Total AMOUNT : </th>
<td><input type="text" name="total" id="total" placeholder="Total Rs." style="height:25px;font-weight:bold;" onfocus="cal2('.$i.')" readonly></td></tr>
</table>
<input type="submit" value="submit">
</form>
I want to the get the total coloumn sum of lote10[ ] and lote_result[ ] fields to be displayed in the total_cbs and total fields respectively.Please help, Thank you in advance.
enter image description here
I have updated my question with the image of the output, which states exactly what i need, Thank You.
Assuming the end result looks like this:
var result = 0;
var elements = document.getElementsByTagName("table")[0].getElementsByTagName("tr");
for (var i = elements.length - 1; i > elements.length - 3; i--) {
var inputs = elements[i].getElementsByTagName('input');
result += parseInt(inputs[inputs.length - 1].value);
}
console.log('total', result);
alert('total ' + result);
<table>
<tbody>
<tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
</td>
<td>
<input type="text" name="lote20[]" value="0" class="val20">
</td>
<td>
<input type="text" name="lote10[]" value="0" class="val10">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
</td>
<th>Remover
</th>
</tr>
<tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
</td>
<td>
<input type="text" name="lote20[]" value="0" class="val20">
</td>
<td>
<input type="text" name="lote10[]" value="0" class="val10">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
</td>
<th>Remover
</th>
</tr>
<tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
</td>
<td>
<input type="text" name="lote20[]" value="0" class="val20">
</td>
<td>
<input type="text" name="lote10[]" value="0" class="val10">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
</td>
<th>Remover
</th>
</tr>
<tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
</td>
<td>
<input type="text" name="lote20[]" value="0" class="val20">
</td>
<td>
<input type="text" name="lote10[]" value="0" class="val10">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
</td>
<th>Remover
</th>
</tr>
<tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
</td>
<td>
<input type="text" name="lote20[]" value="0" class="val20">
</td>
<td>
<input type="text" name="lote10[]" value="0" class="val10">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
</td>
<th>Remover
</th>
</tr>
</tbody>
</table>
JSFIDDLE
I'm trying to validate every input in my HTML Form. But at the same time, I want to make the textbox borders appear red, when a user didn't input anything or didn't meet the format, requirement input in my form. Any tips on how to do `
<body background='bgimg.jpg'>
<form id='forma'align='center'>
<fieldset class='fieldset-auto-width'>
<div>
<label for='fname'><b>FirstName:</b></label>
<input type='text' value='' name='fname' placeholder='Enter First Name' required='required' pattern='[a-z]'/>
</div>
<div>
<label for='lname'><b>LastName:</b></label>
<input type='text' value='' name='lname'placeholder='Enter Last Name' required='required'/>
</div>
<div>
<label for='pass'><b>Password:</b></label>
<input type='password' value'' name='pass' placeholder='Enter Password' required='required'/>
</div>
<div>
<label for='eAdd'><b>Email Address:</b></label>
<input type='text' value='' name='eAdd' placeholder='e.g: ilovehtml#html.com' required='required'/>
</div>
<div>
<label for='hAdd'><b>Home Address:</b></label>
<input type='text' value='' name='hAdd' size:'30' placeholder='Enter Current Home Address' required='required'/>
</div>
<div>
<label for='gender'><b>Gender:</b></label>
<input type='radio' value='Male' name='gender' required='required' />Male
<input type='radio' value='Female' name='gender'/> Female
</div>
<div>
<label for='status'><b>Status:</b></label>
<input type='radio' value='Single' name='status' required='required'/> Single
<input type='radio' value='Married' name='status'/> Married
<input type='radio' value='Widow' name='status'/> Widow
</div>
<div>
<label for='dob'><b>Date of Birth:</b></label>
<input type='date' value='' name='dob'placeholder='MM/DD/YY' required='required'/>
</div>
<div>
<label for='bansa'><b>Country:</b></label>
<select name='country' >
<option value='AR'>Aruba</option>
<option value='BR'>Brazil</option>
<option value='CH'>Chad</option>
<option value='DN'>Denmark</option>
<option value='EN'>England</option>
</select>
</div>
</br>
</br>
<div>
<center><b>Siblings</b></center>
<table border='1' align='center' bgcolor='#C5E3BF'>
<tr>
<td>Name</td>
<td>Age</td>
<td>Gender</td>
</tr>
<tr>
<td><input type='text' value='' name='name' /></td>
<td><input type='text' value='' name='age' size='3'/></td>
<td><input type='text' value='' name='sGender' size='8'/></td>
</tr>
<tr>
<td><input type='text' value='' name='name'/></td>
<td><input type='text' value='' name='age' size='3'/></td>
<td><input type='text' value='' name='sGender' size='8'/></td>
</tr>
<tr>
<td><input type='text' value='' name='name'/></td>
<td><input type='text' value='' name='age' size='3'/></td>
<td><input type='text' value='' name='sGender'size='8'/></td>
</tr>
</table>
</div>
</br>
<div>
<b><Center>Educations</center></b>
<table border='1' bgcolor='#C5E3BF'>
<center><tr>
<td>School Name</td>
<td>Year Graduated</td>
<td>Honor Received</td>
</tr></center>
<tr>
<td><input type='text' value='' name='sName'/></td>
<td>
<center><select name='country'>
<option value='2001'>2001</option>
<option value='2002'>2002</option>
<option value='2003'>2003</option>
<option value='2004'>2004</option>
<option value='2005'>2005</option>
</select>
</td>
<td><input type='text' value='' name='hnrReceived'/></td>
</tr></center>
<tr>
<td><input type='text' value='' name='sName'/></td>
<td>
<center><select name='country'>
<option value='2001'>2001</option>
<option value='2002'>2002</option>
<option value='2003'>2003</option>
<option value='2004'>2004</option>
<option value='2005'>2005</option>
</select></center>
</td>
<td><input type='text' value='' name='hnrReceived'/></td>
</tr>
<tr>
<td><input type='text' value='' name='sName'/></td>
<td>
<center><select name='country'>
<option value='2001'>2001</option>
<option value='2002'>2002</option>
<option value='2003'>2003</option>
<option value='2004'>2004</option>
<option value='2005'>2005</option>
</select></center>
</td>
<td><input type='text' value='' name='hnrReceived'/></td>
</tr>
</table>
</div>
<div>
<label for='abtyrslf'><b>About Yourself:</b></label>
</br>
<textarea cols='50' rows='10' placeholder='Tell us something about yourself.'></textarea>
</div>
<input type='submit' value='Submit'/>
<input type='reset' value='Reset'/>
</br>
</br>
</br>
<div>
<center><img src='gwaponess.jpg' id='pogi' height="190" width="190"/></center>
</div>
</fieldset>
</form>
<hr/>
<center><h3><h3></center>
<hr/>
</body>
See this fiddle
You can use :invalid pseudo CSS class
CSS
input:invalid {
border-color: red;
}
input:valid {
background-color: #ddffdd;
}
According to the docs
The :invalid CSS pseudo-class is applied automatically to
elements whose contents fail to validate according to the input's type
setting. This allows you to easily have invalid fields adopt an
appearance that helps the user identify and correct errors.
You can use jquery validation for that...
$('#forma').validate({
rules : {
fname: { required: true },
lname: { required: true },
eAdd: { requried: true },
pass: { required: true }
// and so on......
}
});
Just add reference for jquery lib and validation..
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