have a span text that removes commas from multiple input fields - javascript

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.

Related

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

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()" />

How to check all checkbox except special ones?

If I want to check all but one item this way works, however I want to except more than one item, such as:
var ingore_ids = [1,2,3];
Then this code does not work:
$('#checkAll').click(function () {
$('input:checkbox').not(this).not(ignore_ids).prop('checked', this.checked);)
});
How can I fix this?
The problem with your logic is that not() expects a selector or array of elements to exclude from the current collection.
To fix this issue you can use join() to build a selector from the id values contained in the array, something like this:
var ingore_ids = [1, 2, 3];
$('#checkAll').click(function() {
$('input:checkbox').not('#' + ingore_ids.join(',#')).prop('checked', this.checked);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>
<input type="checkbox" id="checkAll" /> check some...<br />
</label>
<input type="checkbox" id="1" /><br />
<input type="checkbox" id="2" /><br />
<input type="checkbox" id="3" /><br />
<input type="checkbox" id="4" /><br />
<input type="checkbox" id="5" /><br />
<input type="checkbox" id="6" /><br />
An alternative would be to provide a function to not() which checks if the id of the current checkbox is not in the array:
var ingore_ids = [1,2,3];
$('#checkAll').click(function() {
$('input:checkbox').not(function(i, el) {
return ingore_ids.indexOf(parseInt(el.id, 10)) !== -1;
}).prop('checked', this.checked);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>
<input type="checkbox" id="checkAll" /> check some...<br />
</label>
<input type="checkbox" id="1" /><br />
<input type="checkbox" id="2" /><br />
<input type="checkbox" id="3" /><br />
<input type="checkbox" id="4" /><br />
<input type="checkbox" id="5" /><br />
<input type="checkbox" id="6" /><br />
This is another way use each and attr method.
var ignores = [1,2,3];
$('#checkAll').click(function() {
$('input:checkbox').each(function(index, item) {
var id = parseInt($(item).attr('id'));
if(ignores.indexOf(id) == -1){
$(item).prop('checked', 'checked')
}
});
});
var ignores = [1,2,3];
$('#checkAll').click(function() {
$('input:checkbox').each(function(index, item) {
var id = parseInt($(item).attr('id'));
if(ignores.indexOf(id) == -1){
$(item).prop('checked', 'checked')
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>
<input type="checkbox" id="checkAll" /> check some...<br />
</label>
<p>check all ignore 1,2,3</p>
<input type="checkbox" id="1" />1<br />
<input type="checkbox" id="2" />2<br />
<input type="checkbox" id="3" />3<br />
<input type="checkbox" id="4" />4<br />
<input type="checkbox" id="5" />5<br />
<input type="checkbox" id="6" />6<br />

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)">

Maxlength not working when using Javascript number inputs

I have a slight problem with inserting numbers in the input box.
To be more specific.I use the custom made keypad that shows on the screen,and the numbers can only be written in the input box by using that same keypad,with the max of 5 numbers that can be written.But the HTML maxlength atrribute in this case doesn't work.It works when I try to write the number using the actual keyboard,but when inserting with a custom keypad it won't work.
The question is how can I make it to work?
<script>
function addNumber(element) {
document.getElementById('child').value = document.getElementById('child').value + element.value;
}
function deleteNumber(){
document.getElementById('child').value='';
}
</script>
<div class='form-group'>
<div id="staticParent">
<div class='col-md-6'>
<input class='form-control' id='child' name="username" type='text' maxlength="5" readonly='readonly' />
<input type="button" class="fbutton" name="1" value="1" id="1" onClick=addNumber(this); />
<input type="button" class="fbutton" name="2" value="2" id="2" onClick=addNumber(this); />
<input type="button" class="fbutton" name="3" value="3" id="3" onClick=addNumber(this); />
<input type="button" class="fbutton" name="4" value="4" id="4" onClick=addNumber(this); />
<input type="button" class="fbutton" name="5" value="5" id="5" onClick=addNumber(this); />
<input type="button" class="fbutton" name="6" value="6" id="6" onClick=addNumber(this); />
<input type="button" class="fbutton" name="7" value="7" id="7" onClick=addNumber(this); />
<input type="button" class="fbutton" name="8" value="8" id="8" onClick=addNumber(this); />
<input type="button" class="fbutton" name="9" value="9" id="9" onClick=addNumber(this); />
<input type="button" class="fbutton" name="0" value="0" id="0" onClick=addNumber(this); />
<input type='button' class='fbutton' name='delete' value='Delete' onClick=deleteNumber(this); />
</div>
</div>
you can replace your addNumber function with below one, That will solve your problem.
function addNumber(element) {
var value1 = document.getElementById('child').value + element.value;
if(value1.length > 5) return false;
document.getElementById('child').value = value1;
}
you can try this maxlength=5.you will remove ""
<input class='form-control' id='child' name="username" type='text' maxlength=5 readonly='readonly' />
Since maxlength only works if the user actually uses the real keyboard and not for programatically changing the value, you can't do it like that.
To get around it simply apply a check in your addNumber function:
function addNumber() {
var input = document.getElementById('child');
if (input.value.length > 5) {
return false;
}
else {
// Do stuff
}
}
This won't add a new number unless the input length is less or equal to 5.
Also you shouldn't call things with the onclick attribute. Instead add your event listeners with addEventListener:
var addBtns = document.getElementsByClassName('fbutton');
for (var i = 0; i < addBtns.length; i++) {
addBtns[i].addEventListener('click', addNumber);
}
Note that you have to use a loop to add the event listeners since addBtns is an array.

How to assign a javascript variable to input text field?

I've a variable called "numbers" in javascript and this variables holds 10 numbers from 0 to 9 as shown below.
var numbers = "0123456789";
Now what I want to be able to do is assigning each of these numbers to an input text field using document.getElementByID("a") = "";, for example:
<input type="text" id="a" value="" />
<input type="text" id="b" value="" />
<input type="text" id="c" value="" />
<input type="text" id="d" value="" />
<input type="text" id="e" value="" />
<input type="text" id="f" value="" />
<input type="text" id="g" value="" />
<input type="text" id="h" value="" />
<input type="text" id="i" value="" />
<input type="text" id="j" value="" />
Currently the following text fields above holding no values, but I want to be able to assign each of the numbers in variable "numbers" to each of the text fields above, so it would looks like this when user clicks on a button called click me.
<input type="text" id="a" value="0" />
<input type="text" id="b" value="1" />
<input type="text" id="c" value="2" />
<input type="text" id="d" value="3" />
<input type="text" id="e" value="4" />
<input type="text" id="f" value="5" />
<input type="text" id="g" value="6" />
<input type="text" id="h" value="7" />
<input type="text" id="i" value="8" />
<input type="text" id="j" value="9" />
Also is there any way to leave a text field empty if a particular number is = 0
Thanks in advance :)
var numbers = "0123456789";
var ids = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"];
for (var i = 0; i < ids.length; i++)
{
var el = document.getElementById(ids[i]);
var num = numbers[i];
if (num == "0")
el.value = "";
else
el.value = num;
}
Working sample: http://jsfiddle.net/LrJ5S/.
In addition to mellamokb, another way of accomplishing the same:
var numbers = "abc0123abc0123";
var inputs = document.getElementsByTagName('input');
var i = 0;
for(var s = 0; s < inputs.length; s++) {
inputs[s].value = numbers.charAt(i)!=0?numbers.charAt(i):'';
i++;
}
JSFiddle
Basic example with no checks on data size of inputs and string:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title></title>
</head>
<body>
<div id="myInputs">
<input type="text" id="a" value="" />
<input type="text" id="b" value="" />
<input type="text" id="c" value="" />
<input type="text" id="d" value="" />
<input type="text" id="e" value="" />
<input type="text" id="f" value="" />
<input type="text" id="g" value="" />
<input type="text" id="h" value="" />
<input type="text" id="i" value="" />
<input type="text" id="j" value="" />
</div>
<button id="run">Run</button>
<script type="text/javascript">
function putNumbers(){
var numbers = "0123456789";
var inputs = document.getElementById("myInputs").getElementsByTagName("input");
for(var i=0;i<inputs.length;i++){
var val = numbers.charAt(i);
inputs[i].value = val==="0"?"":val;
}
}
document.getElementById("run").onclick = putNumbers;
</script>
</body>
</html>
working Example

Categories

Resources