Javascript focus not working in simple form - javascript

Autofill is working fine, but can't get focus() to work on the #lbs field via the onClick autofill link. I can get focus to work if it loads outside the function (see commented line before final script tag), but I need it to get focus after the autofill link is clicked.
here's the jsfiddle:
https://jsfiddle.net/JoJoeHariguchi/p49cu607/1/
thanks for any help.
<body>
<div class="box-3 " id="dig3">
<a href="#dig3" onClick="autoFill('dig3'); return true;" >Auto Fill</a><br><br>
<div>length: <input type="number" size="40" id="length" name="length" required /></div>
<div>width: <input type="number" id="width" name="width" required /></div>
<div>height: <input type="number" id="height" name="height" required /></div>
<div>lb: <input type="number" id="lbs" name="lbs" required /></div>
<div>oz: <input type="number" id="oz" name="oz" required /></div>
<script>
function autoFill(digID) {
document.querySelector(`#${digID} #length`).value = "15";
document.querySelector(`#${digID} #width`).value = "12";
document.querySelector(`#${digID} #height`).value = "3";
document.querySelector(`#${digID} #lbs`).focus();
}
//document.querySelector("#dig3 #lbs").focus();
</script>
</body>

Auto Fill
your code is good, you just need to return false value after click on anchor tag

Related

Set/bind input values using SPAN values

I have a working Code-pen, the calculated results are showing on next to input fields SPAN. I tried to get that calculated value from SPAN and overwrite the input fields.
<!-- Include this line of code --><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="txtx1" /><br />
<span id="txtSpan"></span>
<input type="button" value="Appended-textBox" id="Btn3" />
and the JS
$(document).ready(function() {
$('#Btn3').click(function() {
var txtvalue = $('#txtx1').val();
$("#txtSpan").text(txtvalue);
console.log(txtvalue);
});
});
The above works I just want to other way around setting the Input with changing SPAN value.
Is there any way I can overwrite the input box with calculated SPAN values and for the final SPAN result to write to input (ID=GrandTotal),
<div>
<label class="description" for="Coconut">Coconut</label>
<input id="Coconut" name="Coconut" class="element text medium" type="text" maxlength="255" value="10" readonly="true"/>
</div>
<div>
<label class="description" for="GrandTotal">Grand Total</label>
<input id="GrandTotal" name="GrandTotal" class="element text medium" type="text" maxlength="255" value="" readonly="true"/>
</div>
Many thanks and sorry to consume your time. many thanks in advance
https://codepen.io/dunya/pen/mojKNz
I managed to fix it by adding below line:please check the working version above pen.
$('#GrandTotal').val(parseInt($(this).html()));
when I tried the
$('#GrandTotal').val(sum);
it gave me the wrong calculation.

jQuery Maximum call stack size exceeded, when focusing on next input field

Newb here.
I have a form:
<form name="code" action="*" method="post" autocomplete="off">
<input type="text" name="code" maxlength="1" autocomplete="off" class="a">
<input type="text" name="code" maxlength="1" autocomplete="off" class="b">
<input type="text" name="code" maxlength="1" autocomplete="off" class="c">
<input type="text" name="code" maxlength="1" autocomplete="off" class="d">
<input type="text" name="code" maxlength="1" autocomplete="off" class="e">
<input type="text" name="code" maxlength="1" autocomplete="off" class="f last">
<button type="submit" class="full" value="" disabled="disabled"></button>
</form>
And my jQuery is:
$("form").on("keyup change paste focusin", function(e){
e.preventDefault();
var a=$(this).find("input[type='text'].a");
var b=$(this).find("input[type='text'].b");
var c=$(this).find("input[type='text'].c");
var d=$(this).find("input[type='text'].d");
var e=$(this).find("input[type='text'].e");
var f=$(this).find("input[type='text'].f");
a.val(a.val().replace(/[^0-9]/g,""));
b.val(b.val().replace(/[^0-9]/g,""));
c.val(c.val().replace(/[^0-9]/g,""));
d.val(d.val().replace(/[^0-9]/g,""));
e.val(e.val().replace(/[^0-9]/g,""));
f.val(f.val().replace(/[^0-9]/g,""));
if (a.val().length == 1) {
a.next(b).focus();
}
if (b.val().length == 1) {
b.next(c).focus();
}
...
});
What I am tryin to do is, when field a was filled in. I want to move on to field b and so on.
Now what happens is when the IF condition gets triggered, it throws a Maximum call stack size exceeded error.
What am I doing wrong here?
And is there a more elegant way of doing this?
Calling .focus() with jQuery will cause relevant event handlers to run immediately, and since you're doing it from inside the "focusin" handler you end up with infinite recursion. I've always solved that by doing the .focus() operation in a timeout:
if (a.val().length == 1) {
setTimeout(function() {
a.next(b).focus();
}, 1);
}
Even without the recursion problem, you have to let the current "focus" work finish up before redirecting focus to another element.

Input go down after I changed his value

I never seen this problem before, hope some can help.
When I change input value attribution from S to G using jquery the input go down.
Edit: I found the problem, I just needed to add to the main div of the inputs this css:
display:inline-flex;
$('body').on("click", "#submit", function() {
$('#input1').attr('value', 'G');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="inputs" id="input1" type="button" value='S' maxlength="1" />
<input class="inputs" id="input2" type="button" value='T' maxlength="1" />
<input type="submit" id="submit" maxlength="1" value="change"/>
This code is almost the same to my code (instead of my inputs css)
the result in my code: (image)
you can see in the image how to inputs that I changed their value go down, and the empty inputs stay in place.

Auto Jump Fields In AngularJS

I have a row in my form for a user to enter a 6 digit unique ref. This is split up into 3 fields which each only allow 2 characters. What i'm after is that when the user has entered 2 characters, I want the focus to automatically move to the next field.
The functionality though also needs to support the use of tab back in case the user has entered an incorrect digit so they don't need to manually click in the field.
HTML
<div class="col-sm-5 form-inline">
<input name="RefBox1" type="text" class="form-control" id="RefBox1" style="width: 40px;" type="text" maxlength="2" ng-model="updateRef1" restrictinput="[^0-9\s]" required> -
<input name="RefBox2" type="text" class="form-control" id="RefBox2" style="width: 40px;" type="text" maxlength="2" ng-model="updateRef2" restrictinput="[^0-9\s]" required> -
<input name="RefBox3" type="text" class="form-control" id="RefBox3" style="width: 40px;" type="text" maxlength="2" ng-model="updateRef3" restrictinput="[^0-9\s]" required>
</div>
As I don't know how to do this I don't have any code in my controller.
This method of moving to the nextElementSibling on maxLength works with plain-old-javascript. I'm guessing that you could adapted it to your AngularJS controller. And to support older browsers (IE<9) see: Portability of nextElementSibling/nextSibling
<html>
<body>
<input onKeyup="autoTab(this)" maxlength=2>
<input onKeyup="autoTab(this)" maxlength=2>
<input onKeyup="autoTab(this)" maxlength=2>
<script type="text/javascript">
function autoTab( obj ) {
if ( obj.value.length >= obj.maxLength && obj.nextElementSibling )
obj.nextElementSibling.focus();
}
</script>
</body>
</html>

How Do I pass a value in a input box, to another input box

I am trying to pass values between boxes.
So, When a User types inside of the first text box:
<input type="text" placeholder="Your personal message" id="valbox"></input>
<input type="submit" name="design1" id="butval" value="Choose Design"></input>
Then they click the 'choose design' button, and what they typed in, gets passed to another
input text box on the same page.
this is the second input box i want to pass it to.
<input type="text" class="input-text" name="billing_last_name" id="billing_last_name" placeholder="" value="">
Any help would be much appreciated
thank you
Live Demo
Instead of a submit type input use a button type input.
HTML
<input type="text" placeholder="Your personal message" id="valbox"></input>
<input type="button" name="design1" id="butval" value="Choose Design"></input>
<input type="text" class="input-text" name="billing_last_name" id="billing_last_name" placeholder="" value="">
JS
window.onload = function(){
document.getElementById('butval').onclick = function(){
document.getElementById('billing_last_name').value = document.getElementById('valbox').value;
}
};
First add a clicklistener for the submit button and inside that callback pass the text through the elements
document.getElementById("butval").addEventListener("click", function(event){
var text = document.getElementById("valbox").value;
document.getElementById("billing_last_name").value = text;
event.preventDefault();
return false;
});
this is by far easiest in jquery given
<input type="text" placeholder="Your personal message" id="valbox"></input>
<input type="submit" name="design1" id="butval" value="Choose Design"></input>
<input type="text" class="input-text" name="billing_last_name" id="billing_last_name" placeholder="" value="">
use a simple
$("#butval").click(function(event){
$("#billing_last_name").html("<p>"+$("#valbox").html()+"</p>");
event.preventDefault();
});
but better change type="submit" to type="button" then you can remove the essentially unnecessary line event.preventDefault();

Categories