I have one payment page where I have three field called sort code each field can have 2 two digit I want to write java script code to validate this field and as user type 2 digit in first field its should jump to next field. how to validate static sort code.
$('.input').on('keyup', function(e) {
if ($(this).length == 2) {
$('.next-input').focus();
}
}
You'll have to create a collection of your inputs, and proceed to the next item in the collection after the second letter is typed.
var $inputs = $('.input-class');
$inputs.on('keyup', function() {
if ($(this).val().length == 2) {
$inputs.eq($inputs.index(this) + 1).focus();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
<table>
<tr>
<td>
<input type="text" class="input-class input-1">
</td>
<td>
<input type="text" class="input-class input-2">
</td>
<td>
<input type="text" class="input-class input-3">
</td>
<td>
<input type="text" class="input-class input-4">
</td>
<td>
<input type="text" class="input-class input-5">
</td>
</tr>
</table>
</form>
If you'd like a more fine tuned solution, you can add as a data-attribute the selector of the next input
var $inputs = $('.input-class');
$inputs.on('keyup', function() {
if ($(this).val().length == 2) {
$($(this).data('next')).focus();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
<table>
<tr>
<td>
<input type="text" class="input-class input-1" data-next=".input-3">
</td>
<td>
<input type="text" class="input-class input-2" data-next=".input-4">
</td>
<td>
<input type="text" class="input-class input-3" data-next=".input-5">
</td>
<td>
<input type="text" class="input-class input-4" data-next=".input-1">
</td>
<td>
<input type="text" class="input-class input-5" data-next=".input-2">
</td>
</tr>
</table>
</form>
This is just the "go to next" code, no validation is performed.
Related
I have the following dynamic table
I want to compare the value of submit Quantity textbox and Stock textbox together to check if Submit Quantity value is greater than stock value for all rows.
When submit Quantity textbox loses focus I want check, if Submit Quantity value is greater than stock, I want show an alert that "Not enough goods exist in stock" and Submit Quantity textbox must receive focus again.
My HTML and C#
<tbody>
#{ var i = 0;}
#foreach (var item in Model)
{
<tr>
<td></td>
<td>
<input type="text" name="[#i].GoodsName" readonly="readonly" asp-for="#item.GoodsName" class="form-control" />
</td>
<td>
<input type="text" name="[#i].BrandName" readonly="readonly" asp-for="#item.BrandName" class="form-control" />
</td>
<td>
<input type="text" name="[#i].Quantity" readonly="readonly" asp-for="#item.Quantity" class="form-control" />
</td>
<td>
<input type="number" onblur="compare()" id="submitQ" class="form-control" />
</td>
<td>
<input type="text" name="stock" id="stock" readonly="readonly" class="form-control" />
</td>
</tr>
}
I have no idea how to do that
Any help will be appreciated
Thanks in advance
Edit:
This is what I have done to achieve the result but it only works on first row Submit Quantity textbox not on second row
function compare() {
$('#submitQ').each(function () {
let submit = $('#submitQ').val();
let quantity = $('#stock').val();
if (submit > quantity) {
alert('Not enough goods!')
$('#submitQ').select();
return false
}
})
You cannot have mutliple elements with same ids instead use class selector .Then , just get value of submit quantity using $(this).val() and stock value using .closest('tr').find('.stock').. then simply compare these values .
Demo Code :
$('.submitQ').on("blur", function() {
//get value of submit qnty
let submit = $(this).val();
//get stock
let quantity = parseInt($(this).closest('tr').find('.stock').val());
if (submit > quantity) {
alert('Not enough goods!')
$(this).focus(); //show focus
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<th>No</th>
<th>Name</th>
<th>Brand</th>
<th>Requested Quantity</th>
<th>Submit Quantity</th>
<th>Stock</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<input type="text" name="[#i].GoodsName" readonly="readonly" asp-for="#item.GoodsName" value="something" class="form-control" />
</td>
<td>
<input type="text" name="[#i].BrandName" readonly="readonly" asp-for="#item.BrandName" class="form-control" />
</td>
<td>
<input type="text" name="[#i].Quantity" readonly="readonly" asp-for="#item.Quantity" class="form-control" />
</td>
<td>
<!--use class-->
<input type="number" class="submitQ" class="form-control" />
</td>
<td>
<input type="text" name="stock" value="8" class="stock" readonly="readonly" class="form-control" />
</td>
</tr>
<tr>
<td>2</td>
<td>
<input type="text" name="[#i].GoodsName" readonly="readonly" asp-for="#item.GoodsName" value="something" class="form-control" />
</td>
<td>
<input type="text" name="[#i].BrandName" readonly="readonly" asp-for="#item.BrandName" class="form-control" />
</td>
<td>
<input type="text" name="[#i].Quantity" readonly="readonly" asp-for="#item.Quantity" class="form-control" />
</td>
<td>
<input type="number" class="submitQ" class="form-control" />
</td>
<td>
<input type="text" name="stock" value="5" class="stock" readonly="readonly" class="form-control" />
</td>
</tr>
</tbody>
</table>
I have multiple input text inside a table. How can I automatically set value & focus the last input text once I'm done typing values from the 1st input text box?
<td> <input type="text"/> </td>
<td> <input type="text"/> </td>
<td> <input type="text"/> </td>
<td> <input type="text"/> </td>
<td> <input type="text"/> </td>
<td> <input type="text"/> </td>
<td> <input type="text"/> </td>
<td> <input type="text"/> </td>
<td> <input type="text"/> </td>
<td> <input type="text"/> </td>
<td> <input type="text"/> </td>
<td> <input type="text"/> </td>
my js code:
var d = id('my_table', document);
for (var x=1; x<d.rows.length; x++) {
d.rows[x].cells[12].firstChild.innerText = x;
d.rows[x].cells[12].firstChild.focus();
}
You could handle the blur event or the keypress event (to handle that the user pressed Enter) or a combination of both:
var inputs = document.querySelectorAll('#table input');
inputs[0].addEventListener('blur', setFocus);
inputs[0].addEventListener('keypress', function(e) {
if (e.keyCode === 13)
setFocus();
});
function setFocus() {
inputs[inputs.length - 1].value = '123';
inputs[inputs.length - 1].focus();
}
<table id="table">
<tr><td><input type="text" ></td></tr>
<tr><td><input type="text" ></td></tr>
<tr><td><input type="text" ></td></tr>
</table>
I am not sure, It the same as your want but its helps you, try this
<script src="http://code.jquery.com/jquery.min.js"></script>
<td> <input type="text" maxlength="4" tabindex="1" /> </td>
<td> <input type="text" maxlength="4" tabindex="3" /> </td>
<td> <input type="text" maxlength="4" tabindex="4"/> </td>
<td> <input type="text" maxlength="4" tabindex="2" /> </td>
<script type="text/javascript">
jQuery("input").on('input',function () {
if(jQuery(this).val().length == jQuery(this).attr('maxlength')) {
nextinput = parseInt(jQuery(this).attr('tabindex'))+1;
// Here you can take current input value and set where you want
jQuery("input[tabindex="+nextinput+"]").focus();
}
});
</script>
I am trying to compare value of a single text box value "totalmarkstoall" with multiple array of text box's "marksscored", the below my java script is comparing as well on key up function.
what am unable to do is if the value of "marksscored" that perticuler text box is greater then the "totalmarkstoall" then is shows the pop up :But it should erase the value also or should not allow to enter.
function scorecompare(idval) {
var marksscored = idval;
var totalmarkstoall = document.getElementById("totalmarkstoall").value;
if (parseInt(marksscored) > parseInt(totalmarkstoall))
{
alert("greater than Total Mrks");
} else {
}
}
<input id="totalmarkstoall" type="number" style="border: 1px solid #dbdbdb;" placeholder="Enter Total Marks"></input>
<table>
<tr>
<td>
<input type="text" name="marksscored[]" id="marksscored[0]" value="" onkeyup="scorecompare(this.value);"/>
</td>
</tr>
<tr>
<td>
<input type="text" name="marksscored[]" id="marksscored[1]" value="" onkeyup="scorecompare(this.value);"/>
</td>
</tr>
<tr>
<td>
<input type="text" name="marksscored[]" id="marksscored[2]" value="" onkeyup="scorecompare(this.value);"/>
</td>
</tr>
</table>
If you do something like this you know which inputfield the value came from.
HTML:
<table>
<tr>
<td>
marksscored Array of text box's
</td>
</tr>
<tr>
<td>
<input type="text" name="marksscored[]" id="marksscored[0]" value="" onkeyup="scorecompare(this);">
</td>
</tr>
<tr>
<td>
<input type="text" name="marksscored[]" id="marksscored[1]" value="" onkeyup="scorecompare(this);">
</td>
</tr>
<tr>
<td>
<input type="text" name="marksscored[]" id="marksscored[2]" value="" onkeyup="scorecompare(this);">
</td>
</tr>
</table>
JS:
function scorecompare(idval) {
var marksscored = idval;
var totalmarkstoall = document.getElementById("totalmarkstoall").value;
if (parseInt(marksscored.value) > parseInt(totalmarkstoall))
{
alert("greater then Total Mrks");
//do things with inputfield marksscored
} else {
}
}
Try this. Use keyUp event like this way.
$( ".marksscored" ).keyup(function() {
var marksscored = $(this).val();
var totalmarkstoall = document.getElementById("totalmarkstoall").value;
if (parseInt(marksscored) > parseInt(totalmarkstoall))
{
alert("greater then Total Mrks");
$(this).val("");
} else {
// do something
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input id="totalmarkstoall" type="number" STYLE=" border: 1px solid #dbdbdb;" placeholder="Enter Total Marks"></input>
<table>
<tr>
<td>
<input type="text" class="marksscored" name="marksscored[]" id="marksscored[0]" value="" />
</td>
</tr>
<tr>
<td>
<input type="text" class="marksscored" name="marksscored[]" id="marksscored[1]" value="" />
</td>
</tr>
<tr>
<td>
<input type="text" class="marksscored" name="marksscored[]" id="marksscored[2]" value="" />
</td>
</tr>
</table>
You can do something like this using jquery :
On keyup calculate the sum of all text fields
Check if the is greater than the Total
If it is the case Alert and erase the current text field $(this).val("");
see fiddle
Update:
Fiddle
i want to add all text box value inside the tabel using jquery.
<script>
str =0;
$(document).ready(function(){
$('#btn_res').click(function(){
$('#calculate').find("input[type=text]").each(function(){
str+=$(this).text();
})
$('#result').text(str);
});
});
</script>
you need
$(document).ready(function() {
$('#btn_res').click(function() {
var str = 0;
$('#calculate').find("input[type=text]").each(function() {
//need to use .val()
//also need to convert it to a numerical value for addition else string concatenation will be done
str += (+$(this).val() || 0);
})
$('#result').text(str);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="calculate">
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
</tr>
</table>
<button id="btn_res">Sum</button>
<div id="result"></div>
Use val() bacause you are getting form input fields values
$('#btn_res').click(function(){
$('#calculate').find("input[type=text]").each(function(){
str+=$(this).val();
})
$('#result').text(str);
});
My own suggestion would be the following:
$(document).ready(function() {
$('#btn_res').click(function() {
// find all the relevant input elements directly (no need
// to use 'find()'; then iterate over those elements with 'map()':
var str = $('#calculate input[type="text"]').map(function() {
// this returns the value of the input (as a number) or a 0 (if
// the input is not a valid number):
return parseFloat((this.value || 0));
// 'get()' converts the object to an array,
// 'reduce' reduces the array to a single result:
}).get().reduce(function(a, b) {
// returns the sum of the array's elements:
return a + b;
});
$('#result').text(str);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="calculate">
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
</tr>
</table>
<button id="btn_res">Sum</button>
<div id="result"></div>
References:
JavaScript:
Array.prototype.reduce().
parseFloat().
jQuery:
get().
map().
text().
I have simple table which looks like this:
<table>
<tbody>
<tr>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
<tr class="error">
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
</tbody>
</table>
When i click on tr i need to add custom class to it, but only whe i click on tr, not on the input inside it. How to do this?
I tried something like this:
table.find('tbody').on('click', 'tr:not(input)', function(){
jQuery(this).toggleClass('error');
});
table.find('tbody').on('click', 'tr', function(e) {
if (e.target != this)
return;
$(this).toggleClass('error');
});
I think the best you can do here is check the node name to see if it is the td or the tr - or include other tags if you want.
$('tbody').on('click', 'tr', function (e) {
if (e.target.nodeName.toLowerCase() === "td" || e.target.nodeName.toLowerCase() === "tr") {
$(this).toggleClass('error');
}
});
If you specifically want the input excluded, you could then exclude those:
$('tbody').on('click', 'tr', function (e) {
if (!$(e.target).is(':input')) {
$(this).toggleClass('error');
}
});
You can stop the event from bubbling up to the tr element by using event.stopPropagation:
table.find("tr").on("click", function () {
jQuery(this).toggleClass("error");
}).find("input").on("click", function (event) {
event.stopPropagation();
});
Here's some documentation for ya if you'd like to know more: http://api.jquery.com/event.stopPropagation/
Here's a JSFiddle of the solution: http://jsfiddle.net/tM59b/1/
Add a click listener to the input and return false; from it to stop the event from propagating to the tr.
Like so:
$('tr input').click(function(e){
return false;
});