Input go down after I changed his value - javascript

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.

Related

Javascript focus not working in simple form

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

focus method on text box not actually sets the focus

I have a strange behaviour here with focus method.
I Just want to understand why it is happening like this.
Case 1:
With the below code when I come out of last element i.e driveD hyperlink ,focus is not getting set to first text box even though I applied .focus() to first text box.
function lastFocusOut() {
alert('focus out ,setting focus to first text box');
document.getElementById('nameId').focus();
}
input,a,button{
display:block;
margin:10px;
}
<form>
<input id="nameId" type="text" name="name"> drive
<input id="nameId1" type="text" name="name">
<input type="submit" value="test" />
<input type="text" name="name"> driveE </form> driveD </body>
Case 2:
When I add a buttton after the last hyperlink It sets the focus back to first text box.
function lastFocusOut() {
alert('focus out ,setting focus to first text box');
document.getElementById('nameId').focus();
}
input,a,button{
display:block;
margin:10px;
}
<form>
<input id="nameId" type="text" name="name"> drive
<input id="nameId1" type="text" name="name">
<input type="submit" value="test" />
<input type="text" name="name"> driveE </form>
driveD </body>
<button type ="submit" >Submit</button>
I want to understand two things here.
1)Why the focus is not getting set to first text box in case 1.
2)What really makes the difference just by adding the button at the end ,which is making the code work as expected.

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.

Need to get input text with javascript then add it to a sentence

Here is what I need so far. I need to have the quantity input box's value to be added to a sentence after the input area.
Right now I have this code for the input for quantity:
<label for="quantity">Qty: </label>
<input min="1" type="number" id="quantity" name="quantity" value="1" onkeyup="getVals(this, 'text');" />
<input type="submit" id="add-to-cart" class="btn addtocart" name="add" value="Add to cart" />
<div class="how-many">You have helped save <span id="pTextInput"></span>people</div>
I would like the input value for id quantity to be inserted into the span id="pTextInput".
So basically if the quantity input is set to 2 then the sentence, You have helped save 2 people would show up (the dynamic number being placed in the span.
Hope this makes sense. I can use regular javascript or jquery, whichever is easiest.
If I understood the question correctly, you might be looking for something like this:
<script type="text/javascript">
$(function() {
$("#pTextInput").html("1");
$("#quantity").on("change keyup", function() {
$("#pTextInput").html($(this).val());
});
});
</script>
<label for="quantity">Qty: </label>
<input min="1" type="number" id="quantity" name="quantity" value="1" />
<input type="submit" id="add-to-cart" class="btn addtocart" name="add" value="Add to cart" />
<div class="how-many">You have helped save <span id="pTextInput"></span> people</div>
As you change the input of quantity, the pTextInput value will change with it.
I guess you want this:
function getVals(input) {
document.getElementById("pTextInput").innerHTML = input.value;
}
Also, change getVals(this, 'text') to getVals(this) - no need for 'text'.
I would suggest taking a look at DOM manipulation basics with JS: http://www.w3schools.com/js/js_htmldom.asp

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