We Keep Coding

Set focus to next input field in a table after maxlength reached

How to set focus to next input field in a table?
Firstly I worked with that JQuery code: But it only works if the input fields are not spread over different and fields. How could I improve it that code or maybe someone knows a JS code that will work for autofocus fields spread over td and tr fields following tabindex?
<script>
$(document).ready(function(){
$('input').keyup(function(){
if(this.value.length==$(this).attr("maxlength")){
$(this).next().focus();
}
});
});
</script>
My html:
<table>
<tr>
<td><input type="text" id="field1" tabindex="1" name="test1" maxlength = "1"></td>
<td><input type="text" id="field2" tabindex="2" name="test2" maxlength = "1">.</td>
</tr>
<tr><td><input type="text" id="field3" tabindex="3" name="test3" maxlength = "1"></td></tr>
</table>

To do what you require you can retrieve all input elements and get the index of the current one within that collection. To move to the next input, select it from the collection using eq() and the next incremental index value.
Also note that your HTML is invalid - you seem to be missing a <tr> around the final td. I've corrected that in the following example:
jQuery($ => {
let $inputs = $('input').on('input', e => {
let $input = $(e.target);
let index = $inputs.index($input);
if ($input.val().length === $input.prop('maxlength')) {
$inputs.eq(index + 1).focus();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="text" id="field1" tabindex="1" name="test1" maxlength="1"></td>
<td><input type="text" id="field2" tabindex="2" name="test2" maxlength="1">.</td>
</tr>
<tr>
<td><input type="text" id="field3" tabindex="3" name="test3" maxlength="1"></td>
</tr>
</table>

It's pretty gross, but would work lol
$(document).ready(function(){
$('table input').keyup(function(){
if(this.value.length==$(this).attr("maxlength")){
tableInputs = $('table').find('input');
$(tableInputs[tableInputs.index(this)+1]).focus();
}
});
});

Add and Remove textbox in table using Javascript error

I want to add and remove textbox in table.
I did add textbox in table.
Am confused to remove textbox in table.
This is my code:
$(function () {
$('.more').on('click', function () {
var $table = $('#input_fields');
var $tr = $table.find('tr').eq(0).clone();
$tr.appendTo($table).find('input').val('');
});
});
$(function () {
$('.delete').on('click', function () {
});
});
.delete{color:#ff0000;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="quick_post" method="post">
<table id="input_fields">
<tr>
<td><input class="orderinput" type="text" name="product[]" /></td>
<td><input class="orderquan" type="text" name="quantity[]" size="1" maxlength="3" /></td>
<td> <span class='delete'>Delete</span></td>
</tr>
</table>
</form>
<input class="more" type="button" value="Addmore" name="addmore" />
This is my sample code link: https://jsfiddle.net/vo9j2LcL/
Please help me to remove function

Use event delegation to listen the click event on a dynamically generated element.
$(function() {
// cache the table reference
var $table = $('#input_fields');
// keep a cloned copy to generate new
var $tr = $table.find('tr').eq(0).clone();
$('.more').on('click', function() {
// clone to generate new and then append
$tr.clone().appendTo($table).find('input').val('');
});
// set click event handler
$table.on('click', '.delete', function() {
// check number of tr
if ($('#input_fields').find('tr').length > 1) {
// remove the tr corresponds to clicked element
$(this).closest('tr').remove();
}
});
});
.delete {
color: #ff0000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="quick_post" method="post">
<table id="input_fields">
<tr>
<td><input class="orderinput" type="text" name="product[]" /></td>
<td><input class="orderquan" type="text" name="quantity[]" size="1" maxlength="3" /></td>
<td> <span class='delete'>Delete</span></td>
</tr>
</table>
</form>
<input class="more" type="button" value="Addmore" name="addmore" />

Validating dynamically created input elements

I have a form with dynamically created input elements
<input type='button' value='Add Another Product' id='aprod'>
<table id='page3_inside'>
<tr id='ln1'>
<td>
<label for="product_cat">Product Category</label><br>
<input type='text' class="input product_category" name="product_category[]" style="font-family:verdana; width:150px; border: 1px solid #000000;">
</td>
<td>
<label for="qty">Qty</label><br>
<input type="text" value="" class="input qty" style="width:100px;" name="qty[]" placeholder="Qty" onkeypress="return isNumberKey(event)"/>
</td>
<td>
<label for="unit">Unit</label><br>
<input type='text' class="input unit" style="width:100px;" name="unit[]">
</td>
<td>
<label for="brand">PO Number</label><br>
<input type="text" value="" class="input po" name="po[]" placeholder="PO Number" style='width:150px; height:28px;'/>
</td>
</tr>
</table>
The jQuery for appending elements:
<script>
$('#aprod').on('click', function() {
$('#ln1').clone().appendTo('#page3_inside');
prodnum = prodnum + 1;
$('#conf_prodnum').val(prodnum);
});
</script>
How do I validate each input, since all fields belongs to a class.
In the example I used ID as a selector, but how to do it with class instead?
Thanks.

Try a loop like this:
$('form').submit(function() {
$('form input.input').each(function() {
var valid = 1;
if ($(this).val() == '') {
$(this).addClass('error');
valid = 0;
} else {
$(this).removeClass('error');
}
});
if (valid === 1) {
// submit form
} else {
console.log('error');
return false;
}
});
You might need to change the selector and the condition to check for something more than just empty inputs but those are easy enough.
I'm not quite sure what they are supposed to be since your inputs are in a table in the question, there could be a containing form tag for all I know.
You can also add some styles for inputs with errors to highlight them when form submission has failed:
input.input.error {
border: 1px solid red;
}

I did this using id as selector but how to do it with class as
selector?
$('.conf_prodnum') A dot instead a hash is going to work on classes rather than ids.

Use a loop to visit every element that contains class input and check your inputs like so:
var inputs= $('.input ')
for(x in inputs){
x = inputs[x];
//do whatever you want
}

Hide span with jquery

^ no, it does not answer the question at all
I have got 4 input fields and 4 span. Each span shows the value from corresponding input field.
What I want to achieve, is hiding empty span. Removing string from inputbox makes the span empty, but it is not what I want. I want to not display it. At this moment when you leave field 3 empty, it will just leave a blank hole between field 2 and field 4. I simply want the field 4 to hop into the place of fields 3.
Any way to achieve this?
<tr>
<td><h2>Field1</h2>
<input type="text" value="0" class="field1" type="number" min="0" max="20" maxlength="2" size="5"></td>
<td><h2>Field 2</h2>
<input type="text" value="101" class="field2" maxlength="4" size="5"></td>
<td><h2>Field3 - hide span when im empty</h2>
<input type="text" value="0" class="field3" type="number" min="0" max="20" maxlength="2" size="5"></td>
<td><h2>Field 4</h2>
<input type="text" value="101" class="field4" maxlength="4" size="5"></td>
</td>
</tr>
<br><br>
Field1: <span class="genaug"><span class="field1"></span>%</span><br />
Field2: <span class="genpd"><span class="field2">0</span></span><br />
<b><span class="genaug"><span class="field3"></span></span><br /></b>
Field4: <span class="genpd"><span class="field4">0</span></span>
$("input.field1").on("keyup",function () {
$("span.field1").html($(this).val());
});
$("input.field2").on("keyup",function () {
$("span.field2").html($(this).val());
});
$("input.field3").on("keyup",function () {
$("span.field3").html($(this).val());
});
$("input.field4").on("keyup",function () {
$("span.field4").html($(this).val());
});
if ("input.Field3".length) span.style.display = "none";
JSFiddle updated with craig1231 solution http://jsfiddle.net/jRwDg/7/

$("input.field1").on("keyup",function () {
var vl = $(this).val();
if (vl == "") {
$("span.field1").hide();
}
else {
$("span.field1").show().html(vl);
}
});

Try like,
if($("input.field3").val()=="") $("span.field3").css("display", "none");
If you don't want to consider the space then use like,
$.trim($("input.field3").val())

You could check the length of the field on key up.
$("input.field3").on("keyup",function () {
if ($(this).length==0)
$("span.field3").hide()
else
$("span.field3").show().html($(this).val());
});

JQuery Form Validation

I need to do a form validation with jQuery. But I'm having a problem in this.
I have a HTML form as below:
<FORM id="formID" method="POST" onsubmit="return checkRequiredFields(this)" action="">
<td><input class="required" type="text" id="input1" value="" /></td>
<td><input class="required" type="text" id="input2" value=""/> </td>
<td><input class="required" type="text" id="input3" value=""/> </td>
<td><input type="text" id="input4" value=""/> </td>
<td><input type="submit" id="save" value="Save" /></td>
</FORM>
The first three input text fields are required fields. I tried writing the script like below:
<script type="text/javascript">
function checkRequiredFields(form){
var no_errors = true;
$(form).find(".required").each(function(){
alert("Inside Loop");
var field = $(this);
if (field.val() == ""){
$("#"+field ).css("color","red");
no_errors = false;
} else {
$("#"+field ).css("color","white");
}
});
return no_errors;
}
</script>
But, the above code is not working as I expected. The alert() is never executed, meaning that the control does not find any element with class "required". So, what is the problem in my code?

$("#"+field ).css("color","red"); is not right. field is an object not a string, but since it's already a jQuery object you can just do this: field.css("color","red");. You'll have to do that for the other .css() call too: $("#"+field ).css("color","white"); => field.css("color","white");
Here is a demo: http://jsfiddle.net/eehV6/