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

Display HTML on the basis of dropdown menu selected

I have a dropdown menu and on the basis of the item selected I want to display a small part of HTML page.
<select id='menuHandler'>
<option value='abc'> abc</option>
<option value='xyz'>xyz</option>
</select>
IF the selected value is "abc" then a popup button is displayed with the following code:
<button id='runForm' onClick=""> Run form </button>
<div id ="runFormPopup" style=" display:none;">
<table CELLPADDING="10" CELLSPACING="5" class='border'>
<tr>
<td colspan='3'>Run form Generation</td>
</tr>
<tr>
<td width="200" class='border'>
<span>Input Data</span><br>
<input type="checkbox" name="vehicle" >Process log(s)<br>
Summary data<br>
<input type="checkbox" name="vehicle" >Thickness data<br>
<input type="checkbox" name="vehicle" >Particle data
</td>
<td class='border'>
<span>Steps(s)</span>
<input type="checkbox" >
<input type="checkbox" >
<input type="checkbox" >
</td>
</tr>
<tr>
<td> Run form filename </td>
<td><input type="text" ></td>
<td><button class="editbtn">Generate</button></td>
</tr>
</table>
</div>
else if the value selected is "xyz" this should be displayed.
<form action="${ctx}/home/step50/generateReport" method="GET" id="form_generate">
<input style="margin-top: 20px;" type="submit" id="btnGenerate" class="small button active" value="Generate"/>
</form>
how can I do it.

Listen to the change event of the #menuHandler select element, and add the conditional logic there.
Example Here
$('#menuHandler').on('change', function () {
if (this.value === "abc") {
$('#runFormPopup, #runForm').show();
$('#form_generate').hide();
} else {
$('#runFormPopup, #runForm').hide();
$('#form_generate').show();
}
});
..or a shorter version:
Example Here
$('#menuHandler').on('change', function () {
var condition = this.value === "abc";
$('#runFormPopup, #runForm').toggle(condition);
$('#form_generate').toggle(!condition);
});

Try something like this.
$('#menuHandler').change(function(){
var selectedValue = $(this).val();
if(selectedValue === 'abc') {
$('#runFormPopup').show();
$('#form_generate').hide();
}
else {
$('#runFormPopup').hide();
$('#form_generate').show();
}
});

From a high-level perspective:
Create a listener on the button and listen for a click
Dynamically get the value
Either create the content for which you are looking, or insert content into a dynamically-created <div> (overlay, pop-up, etc.)
Following these steps, you should be OK.

Newbie: Need explanation of a Js function

So I am doing a HTML and JavaScript related assignment which I am not required to have any prior knowledge of these scripting and programming languages. I was required to produce a document explaining how HTML and JavaScript brings about an entry form, and how JavaScript does validation check etc.
<head>
<title>Exam entry</title>
<script language="javascript" type="text/javascript">
function validateForm() {
var result = true;
var msg="";
if (document.ExamEntry.name.value=="") {
msg+="You must enter your name \n";
document.ExamEntry.name.focus();
document.getElementById('name').style.color="red";
result = false;
}
if(msg==""){
return result;
}
{
alert(msg)
return result;
}
}
</script>
</head>
<body>
<h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" action="success.html">
<table width="50%" border="0">
<tr>
<td id="name">Name</td>
<td><input type="text" name="name" /></td>
<tr>
<td id="subject">Subject</td>
<td><input type="text" name="subject" /></td>
</tr>
<tr>
<td id="examnumber">Examination Number</td>
<td><input type="text" name="examnumber" /></td>
</tr>
<tr>
<td><input type="radio" id="examtype" name="examtype" /> : GCSE<br />
<td><input type="radio" id="examtype" name="examtype" /> : A2<br />
<td><input type="radio" id="examtype" name="examtype" /> : AS<br />
</tr>
<tr>
<td><input type="submit" name="Submit" value="Submit" onclick="return validateForm();" /> </td>
<td><input type="reset" name="Reset" value="Reset" /></td>
</tr>
</table>
</form>
</body>
There's a task where I need to create 3 additional radio buttons for different level entries and then I was required to create a function which does a confirmation check, to ask the user to either confirm or cancel the choice after they have selected on a specific level entry. As I do not have any prior knowledge of programming(or I have learnt a little during the course of my assignment), I do not know how to create a function. Therefore, I googled it and found this page (It's the same assignment btw) From what I know from this page, I am required to change the radio buttons into:
<td><input type="radio" id="examtype" name="examtype" value="GCSE" /> : GCSE<br />
<td><input type="radio" id="examtype" name="examtype" value="A2" /> : A2<br />
<td><input type="radio" id="examtype" name="examtype" value="AS"/> : AS<br />
and implement a function as such:
function confirmation() {
var checked = null;
var inputs = document.getElementsByName('examtype');
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].checked) {
checked = inputs[i];
break;
}
}
if(checked==null)
{
alert('Please choose an option');
return false;
} else {
return confirm('You have chosen '+checked.value+' is this correct?');
}
And great now I have done what it said, there's now an alert box which pops out and confirms choice of radio button with the user, so clicking on the radio button will trigger an onclick event which returns the function. Now my question is how does this function do the confirmation check?
(I am sorry if I wrote too much, my previous post was put on hold by as too broad by a few of people, because I wasn't being clear enough what I am suppose to say.)

Just add result &= confirmation(); in your validation code. Some where between your two if statements.

You need to watch the click event and determine whether or not you want to permit the action:
$(document).ready(function () {
$('input[type="radio"]').on('click', function () {
var r = confirm("Are you sure?");
if (r == true) {
$(this).prop('checked', true);
} else {
$(this).prop('checked', false);
}
});
});
http://jsfiddle.net/LTQ9p/1/

generate and show password

i have a form with a html table.
my table is :
<table>
<tr>
<td>
<input type="text" name="password[]"/>
</td>
<td>
<input type="radio" value="1" onchange="generatePassword()"/>Short<br />
<input type="radio" value="2" onchange="generatePassword()"/>Medium<br />
<input type="radio" value="3" onchange="generatePassword()" />Long
</td>
<tr>
</table>
In my code, there is a button at the bottom and when it is clicked, it clones the table row. So, i dont know number of rows or number of password fields in my table. Because of clonning the row, i could not give id to my password field. So, I couldnt decide how to reach a text box without id. But i need to show my generated password in password field.

What you can do. You can find an input field from generatePassword like this:
function generatePassword(inp) {
var textbox = inp.parentNode.parentNode.cells[0].getElementsByTagName('input')[0];
textbox.value = 'password ' + inp.value;
}
You would also change markup a little. Add name attribute to radio buttons and reference current input with this:
<input type="radio" name="generate" onchange="generatePassword(this)" value="1" />
Demo: http://jsfiddle.net/BHb3N/

You could use Classes instead of an ID.
HTML
<input type="text" class="myPassword" value="test" name="password[]" />
<input type="text" class="myPassword" value="test" name="password[]" />
<input type="text" class="myPassword" value="test" name="password[]" />
JS
var passwords = document.getElementsByClassName('myPassword') || document.querySelectorAll('myPassword'); //querySelectorAll for IE <= 8
for (var i = 0; i < passwords.length; i++) {
console.log(passwords[i].value);
}

Use .getElementsByName instead of id:
document.getElementsByName('password[]')[0].value="anyvalue";
Fiddle1
OR
Use .getElementsByTagName
document.getElementsByTagName('input')[0].value="anyvalue";
Fiddle2
New fiddle in response to comment

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/