How to Copy Value from one Input Field to Another Using JS - javascript

I have two inputs fields:
<input type="text" id="one" name="one" />
<input type="text" id="two" name="two" />
I want a function to copy the text of the first input automatically when we click on the second input without using Jquery
Thanks

To check if the user clicks on the <input> element, add an event listener to it.
Then, get the value of the first text field using the value property.
Here is your code:
document.getElementById('two').addEventListener("click", function() {
this.value = document.getElementById('one').value;
});
<input type="text" id="one" name="one" />
<input type="text" id="two" name="two" />
Here is a living demo: https://codepen.io/marchmello/pen/XWmezNV?editors=1010

A basic way of doing this:
<input type="text" id="one" name="one">
<input type="text" id="two" name="two" onfocus="this.value = document.getElementById('one').value">

here is the example to do this.
var one = document.getElementById("one");
var two = document.getElementById("two");
function myFunction(){
two.value = one.value;
}
<input type="text" id="one" name="one" />
<input type="text" id="two" name="two" onfocus="myFunction()" />

Related

Detecting the change in inputs (jQuery)

There are several inputs and I want it to detect the variability in the input and give it the result. Currently, it works statically, I want to make it dynamically detect the digit change in the inputs.
I can do this with only 1 input but how can I do it for multiple inputs?
var allHaveSameValue = $(".inputclass").toArray().every(function(input, index, inputs) {
return input.value === inputs[0].value;
});
console.log(allHaveSameValue);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="inputclass" value="1"/>
<input type="text" class="inputclass" value="1"/>
<input type="text" class="inputclass" value="1"/>
<input type="text" class="inputclass" value="1"/>
You can listen to the input event to run the check.
let $inputClass = $('.inputclass');
$inputClass.on('input', function(e){
let val = $(this).val();
let allHaveSameValue = $inputClass.toArray().every(input => input.value === val);
console.log(allHaveSameValue);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="inputclass" value="1"/>
<input type="text" class="inputclass" value="1"/>
<input type="text" class="inputclass" value="1"/>
<input type="text" class="inputclass" value="1"/>

Get id of active textfield

If I have 4 text boxes in my form, at any point can I get id of text field in which user is filling the information at the moment.
Eg. in following context, I should be able to get id of textbox 3.
Thanks
You can get the currently active element using document.activeElement, so its ID using document.activeElement.id.
Focus on any of the textboxes in the snippet to see how it works:
setInterval(function() {
console.log("Active element: " + document.activeElement.id);
},1000);
<input type="text" name="" id="1">
<br>
<input type="text" name="" id="2">
<br>
<input type="text" name="" id="3">
<br>
<input type="text" name="" id="4">
You can use getAttribute() like the following way:
function myFunc(thatText){
console.log(thatText.getAttribute('id'));
}
<div>
<input type="text" id="txt1" onchange="myFunc(this)" placeholder="1"/><br/>
<input type="text" id="txt2" onchange="myFunc(this)" placeholder="2"/><br/>
<input type="text" id="txt3" onchange="myFunc(this)" placeholder="3"/><br/>
<input type="text" id="txt4" onchange="myFunc(this)" placeholder="4"/>
</div>
There can be an onkeyup function. pass this from the DOM and in js use that argument to get id
function getElem(elem) {
console.log(elem.id)
}
<input type="text" name="test" id="1" onkeyup="getElem(this)">
<br>
<input type="text" name="test" id="2" onkeyup="getElem(this)">
<br>
<input type="text" name="test" id="3" onkeyup="getElem(this)">
<br>
<input type="text" name="test" id="4" onkeyup="getElem(this)">

have a span text that removes commas from multiple input fields

I have the following input fields and I would like to have a link above them that uses pure javascript (ie: no js libraries) that would remove the commas from all of the input fields.
Current:
<span id="remove">click to remove commas</span>
<input type="text" name="1" id="1" value="14,22,25,2,26,1,15,8,23"><br />
<input type="text" name="2" id="2" value="12,25,14,11,5,23,8,15,19"><br />
<input type="text" name="3" id="3" value="25,1,10,2,26,5,19,7,13,22"><br />
<input type="text" name="4" id="4" value="8,1,16,20,19,7,25,2,14,27"><br />
<input type="text" name="5" id="5" value="8,15,6,22,30,21,4,24,31,3">
Wanted Results:
<span id="remove">click to remove commas</span>
<input type="text" name="1" id="1" value="142225226115823"><br />
<input type="text" name="2" id="2" value="1225141152381519"><br />
<input type="text" name="3" id="3" value="2511022651971322"><br />
<input type="text" name="4" id="4" value="8116201972521427"><br />
<input type="text" name="5" id="5" value="8156223021424313">
Fiddle
JavaScript:
var removeSpan = document.querySelector('#remove');
removeSpan.addEventListener('click', function(e){
[].slice.call(document.querySelectorAll('[type="text"]')).forEach(function(text){
text.value = text.value.replace(/,/g, '')
});
});
You can use .replace, like this:
var res = str.replace(",", "");
To replace all occurrence, try
var res=str.replace(/,/g,'');
Set a common name for all the inputs, for example, values. Then add calling of this method to span's onclick event:
function removeCommas() {
var values = document.getElementsByName("values");
for (var i = 0; i < values.length; i++) {
values[i].value = values[i].value.replace(/,/g, '');
}
}
See Fiddle.

What's the simplest way to update these form fields with JQuery?

I have the following html form:
<form>
<input type="checkbox" name="fruits[]" value="apples" /><input type="text" value="false" /><br/>
<input type="checkbox" name="fruits[]" value="oranges" /><input type="text" value="false" /><br/>
<input type="checkbox" name="fruits[]" value="grapes" /><input type="text" value="false" /><br/>
<input type="checkbox" name="fruits[]" value="bananas" /><input type="text" value="false" /><br/>
</form>
Now I want to write some javascript/JQuery such that when I check or uncheck a checkbox, the corresponding text box shows "true" or "false". It should be easy to add more fruits without changing the javascript.
What's the best way to do this in an elegant way?
this is easy in pure javascript, you don't really need jQuery. Just assign onchange event of each checkbox with a function that would update the textfield, there has to be a relation between the checkbox and textfield. The function could be something like:
// assign to onchange like: onchange="updateTextField(this)"
function updateTextField(cb) {
// this assumes that the corresponding text field has id with the same name as the
// checkbox value
var tf = document.getElementById(cb.value);
tf.value = cb.checked.toString();
}
You need to have some sort of relationship between the checkbox and the text field. Something like this would work using jQuery, and is extremely extendable.
<form>
<input type="checkbox" value="apples" /><input type="text" value="false" for="apples"/><br/>
<input type="checkbox" value="oranges" /><input type="text" value="false" for="oranges" /><br/>
<input type="checkbox" value="grapes" /><input type="text" value="false" for="grapes" /><br/>
<input type="checkbox" value="bananas" /><input type="text" value="false" for="bananas"/><br/>
</form>
<script>
$(function() {
$(":checkbox").click(function() {
if ($(this).attr('checked')) {
$('input[for$="' + $(this).val() + '"]').val("true");
} else {
$('input[for$="' + $(this).val() + '"]').val("false");
}
})
})
</script>

change field value when select radio buttons

I want to change the value of hidden input field when radio buttons selected :
<input type="radio" name="r1" value="10" />10
<br/>
<input type="radio" name="r1" value="45" />45
<br/>
<input type="hidden" name="sum" value="" />
for example when user click on one the buttons the value of hidden field change to that value.
Use the onClick property:
<input type="radio" name="r1" value="10" onClick="document.getElementById('hidfield').value=this.value"/>10
<br/>
<input type="radio" name="r1" value="45" onClick="document.getElementById('hidfield').value=this.value"/>
45
<br/>
<input type="hidden" name="sum" value="" id="hidfield" />
You can try for example
<input type="radio" id="radio1r1" name="r1" value="10" />10
<br/>
<input type="radio" id="radio2r1" name="r1" value="45" />45
<br/>
<input type="hidden" name="sum" value="" />
jQuery("input[id^='radio']").click(function() {
jQuery("input[name='sum']").val(jQuery(this).val());
}
So then when user click on each radio we handle it by various id with same start.
Using jQuery it would be:
$(":radio").click(function () {
var inputValue = $this.val();
$(":hidden[name='sum']").val() = inputValue;
$(":hidden[name='sum']").name() = "lalala";
});
I've not double checked that code so it might need a little tweaking.
hook into the onclick event for the radio button "r1". Normally I'd suggest the onchange event but in IE it isn't fired until the user "blurs" the radio button.
If you are using a framework like jQuery, hook in the events in a nice unobtrusive manner... but if you want a quick n dirty solution, just add the events inline.
<input type="radio" name="r1" value="10" onclick="doIt(this);"/>10
<br/>
<input type="radio" name="r1" value="45" onclick="doIt(this);"/>45
<br/>
<input type="hidden" name="sum" value="" />
<script>
function doIt(obj){
//alert('my value is now: ' + obj.value);
obj.form.elements['sum'].value = obj.value;//set hidden field to radio value
}
</script>

Categories

Resources