Noob here..I am trying to auto-focus fields based on a criterion that when a field contains a predefined length of input, it must automatically focus the next field.
<html>
<body>
<input type="number" id="box1" autofocus="autofocus" onkeyup='checkInput()'> - <input type="number" id="box2"onkeyup='checkInput()'> - <input type="number" id="box3"onkeyup='checkInput()'>
<script type="text/javascript">
function checkInput(){
if(parseInt(document.getElementById('box1').value.length) == 3)
document.getElementById('box2').focus();
}
</script>
</body>
</html>
I can always write that many functions and manually pick the next field. But is there a way to do it with just JS function, by passing this.id to as the argument to that function?
Pass the id of the current input element to the checkInput() function and As you are doing it in plain javaScript and not using jQuery, You can use the nextElementSibling property to get the next element and then focus on it using .focus() as shown below :
function checkInput(id) {
if (parseInt(document.getElementById(id).value.length) == 3)
var nextSibling = document.getElementById(id).nextElementSibling;
if (nextSibling) {
nextSibling.focus();
}
}
<html>
<body>
<input type="numbers" id="box1" autofocus="autofocus" onkeyup='checkInput("box1")'>-
<input type="numbers" id="box2" onkeyup='checkInput("box2")'>-
<input type="numbers" id="box3" onkeyup='checkInput("box3")'>
</body>
</html>
Use jquery to select all inputs and then select the next input when length greater than 3.
$(document).ready(()=>{
$('input').on('keyup',(event)=>{
console.log(event.target.value.length);
if(event.target.value.length == 3){
$(event.target).next().focus();
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<input type="numbers" id="box1" autofocus="autofocus" > - <input type="numbers" id="box2"> - <input type="numbers" id="box3">
</body>
</html>
Related
I have two text boxes or two divs with same class ,and I want to clear first textbox after writing something in the second. How can I do this??
<html>
<body>
<div class="school">
First <input class="abc" type="text" name="first">
<br><br>
Second <input class="abc" type="text" name="second">
</div>
</body>
</html>
Check this code using input event.
https://api.jquery.com/on/
If the second input has an input event, the first input will be
empty.
$('input[name="second"]').on('input', function(){
$('input[name="first"]').val('')
})
$('input[name="second"]').on('input', function(){
$('input[name="first"]').val('')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div class="school">
First <input class="abc" type="text" name="first">
<br><br>
Second <input class="abc" type="text" name="second">
</div>
</body>
</html>
You can use .change() jQuery function to check if second textfield has changed or not. On change you can write code to clear first textbox
Html Code
<input type="text" name="text1" id="text1">
<input type="text" name="text2" id="text2">
JQuery Code
$(document).ready(function(){
$('#text2').change(function(){
$('#text1').val('');
});
});
Here is the fiddle
document.getElementsByName("first")[0].addEventListener("blur", function (){
document.getElementsByName("second")[0].value = "";
})
document.getElementsByName("second")[0].addEventListener("blur", function (){
document.getElementsByName("first")[0].value = "";
})
Note : if you want to to clear other input when you click on an input field then use focus event and if you want to clear other input when user changes input value then use change event or keypress event as per your requirement
I would like to achieve that when I move from group1 input to group2 input, blur event is caught, so I can make additional actions. Isn't blur event propagated upper to parents?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<html>
<head>
<script type="text/javascript">
$( document ).ready(function() {
$("[data-id=container]").on("blur", function() {
alert("Blur caught in parent");
});
});
</script>
</head>
<body>
<div data-id="container" style="border: 1px solid gray;">
Group 1
<input type="text" />
<input type="text" />
<input type="text" />
</div>
<div data-id="container" style="border: 1px solid gray;">
Group 2
<input type="text" />
<input type="text" />
<input type="text" />
</div>
</body>
</html>
I am not able to completely understand your question, but assuming that you want to have some form of validation when you change from group 1 to group 2 I am writing the following code. The following snippet is a general form that you may customize to your need.
<input type="text" id="one" onblur="validate">
<input type="text" id="two" onblur="validate">
<input type="text" id="three" onblur="validate">
<script type="text/javascript>
function validate()
{
var a = document.getElementById("one");
var b = document.getElementById("two");
var c = document.getElementById("three");
if (b.hasFocus() == true) //checks if the second input box has focus
{
alert("Value of the focused field is "+a.value); //this will give you the value in the first input box
}
else if (c.hasFocus() == true) //checks if the third input box has focus
{
a.focus(); //this will get the focus back on the first input box
}
}
</script>
I want to user to press submit button so that their name and age is displayed in the input box with name="output"?
I have 3 input boxes, one asking for name and the other for age while the other one provides output. I am trying to use the function output() to display the last input box.
I am confused about where I am going wrong, do I need a .value?
<!doctype html>
<html>
<head>
<style>
.formdiv{
align: center;
}
</style>
</head>
<body>
<script language="javascript" type="text/javascript">
function output(){
var name = getElementByName('firstName');
var Age= getElementByName('age');
var out = document.write(name+Age);
document.getElementByName('output') = out;
}
</script>
<h1><strong><em><center>Payment Details</center></em></strong> </h1>
<div class="formdiv">
<fieldset><center>
<legend> Enter the following Info:</legend>
<br />
<label> Name </label>
<input type="text" name="firstName" placeholder="John" required="required"></input>
<br/>
<br/>
<label>Age </label>
<input type="number" name="age" maxlength="2" required="required"></input>
</fieldset>
</center>
</div>
<div>
<center>
<button onClick="output()">Submit</button><br/>
<label for="output">Output</label>
<br/>
<input type="textbox" name="output"></input>
</center>
</div>
</body>
</html>
Here's a working version of your code.
There's no method getElementByName (but getElementsByName) - you should use document.getElementById() (Read about it here)
You should use the value of the input element.
<!doctype html>
<html>
<head>
<style>
.formdiv{
align: center;
}
</style>
</head>
<body>
<script language="javascript" type="text/javascript">
function output(){
var name = document.getElementById('firstName').value;
var Age= document.getElementById('age').value;
document.getElementById('output').value = name+Age;
}
</script>
<h1><strong><em><center>Payment Details</center></em></strong> </h1>
<div class="formdiv">
<fieldset><center>
<legend> Enter the following Info:</legend>
<br />
<label> Name </label>
<input type="text" id="firstName" placeholder="John" required="required"></input>
<br/>
<br/>
<label>Age </label>
<input type="number" id="age" maxlength="2" required="required"></input>
</fieldset>
</center>
</div>
<div>
<center>
<button onClick="output()">Submit</button><br/>
<label for="output">Output</label>
<br/>
<input type="textbox" id="output"></input>
</center>
</div>
</body>
</html>
getElementsByName (note: Elements, not Element) returns a list of Elements, in this case your <input>s. So first of all, you need to select the first (in your case your only one) using getElementsByName(...)[0]. Then you get one Element.
However you do not want to output the entire element (which is an Object, not a String, and converted to a string it likely won't be what you expect), so you need to select the value property of that Element. So yes, you need to add .value, just as you assumed:
function output(){
var name = getElementsByName('firstName')[0].value;
var Age= getElementsByName('age')[0].value;
Then, document.write writes the argument to a new document directly, which results in an emtpy page with nothing else on it but that string. This isn't what you want, so you don't need that. ALl you do want is to assign a new variable called out with that string:
var out = name+Age;
Then to assigning the new value to the output field - you don't want to replace the Element by a string (that wouldn't even work), but it's value, so you need the .value again:
document.getElementsByName('output')[0].value = out;
}
That should do the trick.
(In addition to that, you might want to use name + " " + Age instead of simply name+Age, as otherwise you end up with "John Doe23" instead of "John Doe 23" which you likely want)
There are a few things wrong with your code:
there is no such thing as getElementByName - it is getElementById
changing to the above, you need to add ids to your input elements
you need to use the value of the returned object from getElementById
The above will get your code working, but also, the center tag is obsolete and you shouldn't use it
Inputs are self closing tags so you don't need </input>
<!doctype html>
<html>
<head>
<style>
.formdiv {
align: center;
}
</style>
</head>
<body>
<script language="javascript" type="text/javascript">
function output() {
var name = document.getElementById('firstName').value;
var Age = document.getElementById('age').value;
var out = name + Age;
document.getElementById('output').value = out;
}
</script>
<h1><strong><em><center>Payment Details</center></em></strong> </h1>
<div class="formdiv">
<fieldset>
<center>
<legend>Enter the following Info:</legend>
<br />
<label>Name</label>
<input type="text" name="firstName" id="firstName" placeholder="John" required="required"></input>
<br/>
<br/>
<label>Age</label>
<input type="number" name="age" id="age" maxlength="2" required="required"></input>
</fieldset>
</center>
</div>
<div>
<center>
<button onClick="output()">Submit</button>
<br/>
<label for="output">Output</label>
<br/>
<input type="textbox" name="output" id="output"></input>
</center>
</div>
</body>
</html>
I have this input:
<input id="tag1" type="text" name="tags" class="tags" value="#Model.list" />
and I want to get this input value in a hidden input, so I used this:
<input type="hidden" name="tag" value="tags" />
Instead of getting the true value of the first input, I only get the string "tags"! Can you please tell me how to obtain the true value of the first input in my hidden input? Thanks!
EDIT: Actually it's a submit page, the user enters tags in the #tag1 and when he clicks on submit I want to send these tags to my controller, that's why I'm using the hidden input...
My full code:
<form>
<p>
<input id="tag1" type="text" name="tags" class="tags" value="#Model.list" onblur="setValue()"; /></p>
<script>
$('#tag1').tagsInput({
// my parameters here
});
</script>
<style>
#wrapper {
margin: 20px;
}
</style>
<p>
<input type="submit" value="Create" />
<input type="hidden" name="taggg" id="tag2" />
<script type="text/javascript">
function setValue() {
document.getElementById("tag2").value = document.getElementById("tag1").value;
}
window.onload = setValue;
</script>
</p>
</form>
I don't understand why you would want to copy the value of one input field to another (albeit, hidden). But if that is what you want to do, try using the below code.
The function attached to the onblur event of the input field would set the value of the input field to the hidden field whenever it loses focus.
The window.onload = setValue will do the same on page load.
HTML
<input id="tag1" type="text" name="tags" class="tags" value="#Model.list" onblur="setValue();" />
<input type="hidden" name="tag" value="tags" id="tag1_hidden" /> <!-- Note the addition of an id attribute -->
JavaScript
function setValue() {
document.getElementById("tag1_hidden").value = document.getElementById("tag1").value;
}
window.onload = setValue;
Try this
<input id="tag1" type="text" name="tags" class="tags" value="#Model.list" />
<input type="hidden" name="tag" value="tags" id="tag2" />
Jquery:
$("#tag2").val($("#tag1").val());
or
$("#tag1").blur(function() {
$("#tag2").val($(this).val());
});
You can do like this (and you will need javascript for this).
Give a id to your hidden input also like:
<input type="hidden" id="hidden_input" name="tag" value="tags" />
and then use/paste this code when you need it:
var input_value = document.getElementById('tag1').value;
document.getElementById('hidden_input').value = input_value;
So I'm just testing something with js, basically the number in the first input has to be bigger than the number in the second input for the submit button to be activated.
The button get's disabled just right, but if I change the number it won't activate again
<!DOCTYPE HTML>
<html>
<body>
<input type='number' id='first' onchange="validateNumber()"/><br>
<input type='number' id='second' onchange="validateNumber()"/><br>
<script type="text/javascript" >
function validateNumber()
{
var first = document.getElementById('first').value;
var second = document.getElementById('second').value;
if(first > second){
document.getElementById('sub').disabled=false;
}else{
document.getElementById('sub').disabled=true;
}
}
</script>
<input type="submit" id="sub"/>
</body>
</html>
Edit:
The arrows of the number input trigger onchange it seems, that caused the problem
You have to add the onclick and onkeyup event in order to respond to mouse interactions and to inserts from the clipboard:
http://jsfiddle.net/wzvvN/1
<input type='number' id='first' onkeyup="validateNumber()" onclick="validateNumber()" onchange="validateNumber()" />
<input type='number' id='second' onkeyup="validateNumber()" onclick="validateNumber()" onchange="validateNumber()" />
Try binding the onfocus and onblur events to.
<input type='number' id='first' onchange="validateNumber()" onfocus="validateNumber()" onblur="validateNumber()"/><br>
<input type='number' id='second' onchange="validateNumber()" onfocus="validateNumber()" onblur="validateNumber()"/><br>
You may want to use onkeyup(), since onchange() gets called only when you switch focus to another element.
Also, your function is currently comparing strings. Use parseInt to convert to an integer and then compare. The following code works for me:
<html>
<body>
<input type='number' id='first' onkeyup="validateNumber()"/><br>
<input type='number' id='second' onkeyup="validateNumber()"/><br>
<script type="text/javascript" >
function validateNumber()
{
var first = parseInt(document.getElementById('first').value, 10);
var second = parseInt(document.getElementById('second').value, 10);
if(first > second){
document.getElementById('sub').disabled=false;
} else {
document.getElementById('sub').disabled=true;
}
}
</script>
<input type="submit" id="sub" disabled="disabled" />
</body>
</html>