I would like to select all the contents of the text-boxes when a user clicks on it. But, since my document contains almost 5 text-boxes, instead of giving each text-box an ID selector or onfocus attribute, I would like to select all the text-boxes.
For example: var x = document.getElementsByTagName("p");
The above code selects all the paragraphs in a document. So, I need a similar code for all textboxes. I have tried replacing input and input[type=text] Nothing worked.
Try this out:-
http://jsfiddle.net/adiioo7/zvgHx/
JS:
var x = document.getElementsByTagName("INPUT");
var y = [];
var cnt2 = 0;
for (var cnt = 0; cnt < x.length; cnt++) {
if (x[cnt].type == "text") y.push(x[cnt]);
}
alert("Total number of text inputs: " + y.length);
HTML:
<input type="text" id="input1" value="input1"></input>
<input type="text" id="input2" value="input2"></input>
<input type="text" id="input3" value="input3"></input>
<input type="text" id="input4" value="input4"></input>
<input type="text" id="input5" value="input5"></input>
So, array y will hold all inputs with type as text.
Use jQuery: $('input[type=text]') That will do the trick.
http://jquery.com/
Related
I'm trying to pass the value of a checkbox only if it is checked, I'm using a text input. I'm running into a syntax issue.. I don't see where I missed any brackets or anything. Any help is appreciated. Fiddle is here also
Thanks
document.querySelector(function() {
setTarget();
document.querySelector("#test").change(setTarget);
function setTarget() {
var tmp ="";
tmp += document.querySelector("#test:checked").value || '';
document.querySelector('#testtarget').val(tmp);
}
});
<input type="checkbox" id="test" name="test123" value="testing123" />this should appear in the text input<br/>
<input type="text" id="testtarget" name="targetTextField" size="31" tabindex="0" maxlength="99" value="">
to select checked checkboxes only you can use :checked with your querySelector
use it this way
document.querySelectorAll("input[type=checkbox]:checked")
if i am not wrong this is what you exactly want
var cb = document.querySelector("#test"),
inp = document.querySelector("#testtarget")
cb.onchange = function(e){
inp.value = cb.checked ? cb.value : ""
}
<input type="checkbox" id="test" name="test123" value="testing123" />this should appear in the text input<br/>
<input type="text" id="testtarget" name="targetTextField" size="31" tabindex="0" maxlength="99" value="">
I want to get value from "data-val" input field which is hypen separated and after removimg hypen individual value should get assigned to separate text box which have same class name, but instead of separate value only last value is assigning to every text box.
for example if data-val class have value like this 3-4-5 then it should get separated by "-" and individual value get assigned to separated text filed.
<input type="text" class="form-control data-val" onblur="assign_val('data-val','input_val')"value=""/>
<input type="text" class="form-control input_val" name="">
<input type="text" class="form-control input_val" name="">
<input type="text" class="form-control input_val" name="">
<script>
function assign_val(data-val,input_val) {
var data-val = $(".data-val").val();
var count = $('.' + input_val).length;
var i;
var data-val= data-val.split("-");
for (i = 1; i <= data-val.length; i++)
{
$(".input_val").val(data-val[i]);
}
}
</script>
You can do this using JQuery .each https://api.jquery.com/each/
$( ".input_val" ).each(function( index ) {
$(this).val(data-val[index]);
});
i am creating a voucher, for an Management Program, i have an input field which counts value and add in the last colum, as sum of debits and credits in all rows for that i am using counters to track sum, i am using onchange or onblur click event, it works well it counts wih increase in rows, but when i try to remove the value from input it still couns i counter
here is the code
var credit_counter = 0;
$(document).on('blur', 'input[name="credit[]"]', function () {
idName = $(this).attr('id');
id = idName.substring(6, idName.length);
var value = $(this).val();
credit_counter = credit_counter + Number(value);
var credit_balance = $("#get_credit").val(credit_counter)
});
var debit_counter = 0;
var total_balance = 0;
$(document).on('blur', 'input[name="debit[]"]', function () {
idName = $(this).attr('id');
id = idName.substring(6, idName.length);
var value = $(this).val();
$("#credit" + id).val(value)
debit_counter = debit_counter + Number(value);
var debit_balance = $("#get_debit").val(debit_counter);
});
I want to remove the value in case I erase value from input field thanks
Here is a complete example which achieves what you are looking to do (warning: no styling has been added so it is ugly). You can copy and paste this into a .html file and open it in with the web browser of your choice to see it in action:
<!DOCTYPE html>
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</head>
<body>
<input placeholder="credit field 1" type="text" name="credit" /><br/>
<input placeholder="credit field 2" type="text" name="credit" /><br/>
<input placeholder="credit field 3" type="text" name="credit" /><br/>
<input placeholder="credit field 4" type="text" name="credit" /><br/>
<input placeholder="debit field 1" type="text" name="debit" /><br/>
<input placeholder="debit field 2" type="text" name="debit" /><br/>
<input placeholder="debit field 3" type="text" name="debit" /><br/>
<input placeholder="debit field 4"type="text" name="debit" /><br/>
<input placeholder="credit total" id="get_credit" type="text" /><br/>
<input placeholder="debit total" id="get_debit" type="text" /><br/>
<script>
$(document).on('blur', 'input[name="credit"]', function () {
var total = 0;
$('input[name="credit"]').each(function( index, element ) {
if(!isNaN($(this).val())){
total += Number($(this).val());
}
$('#get_credit').val(total);
});
});
$(document).on('blur', 'input[name="debit"]', function () {
var total = 0;
$('input[name="debit"]').each(function( index, element ) {
if(!isNaN($(this).val())){
total += Number($(this).val());
}
$('#get_debit').val(total);
});
});
</script>
</body>
</html>
Your issue is that the way you are keeping track of the total debits and total credits does not allow you to know the values stored in each input individually. The problem that creates is that when a value is removed, there is no way for you to know what to subtract from the total. (Likewise, if someone were to change the value from 3 to 30 then your total would go up by 30 instead of 27).
There is definitely more than one way to fix that however the answer I posted is what I believe to be most simple: On blur of the input, iterate through the appropriate inputs and add them together then assign the total to the appropriate input.
Note I've excluded your logic of acting on the ids of the inputs as it is unclear what you're doing with them without further explanation or seeing your view markup. It also seems to be unrelated to the issue you're posting about.
I understood your problem. Can we do like this.
1) Trigger an event on focus.
2) Subtract the focused element value from total.
If user doesn't removed complete value from the input. anyway we are triggering event on blur. So it will take whatever the value remained in the text box and counts that!
I'm trying to create an HTML form which takes the text from multiple textboxes (in this case, 3) and adds the content of each to a list in a separate div, as well as create a new object "employee", all via the click of a button. My goal is to imitate adding employees to a database, using an employee id, first name, and last name as variables. I am looking to accomplish this using pure javascript.
What I have so far is:
<form>
ID Number:
<br>
<input type="text" id="idNumber">
<br>First name:
<br>
<input type="text" id="firstName">
<br>Last name:
<br>
<input type="text" id="lastName">
</form>
<br>
<button type="submit" onclick="myFunction(list)">Submit</button>
<div id="container">
<ul id="list"></ul>
</div>
In a separate JavaScript file:
function myFunction(list){
var text = document.getElementById("idNumber","fName","lName").value;
var li = "<li>" + text + "</li>";
document.getElementById("list").replaceChild(li);
}
When I debug my code it seems to be setting the values fine, but I receive no actual output of my list.
None of the input elements you selected had a class name. You can also do this with document.getElementById. Just add ids to all your form elements.
Your code should look something like this.
function myFunction(list){
var text = "";
var inputs = document.querySelectorAll("input[type=text]");
for (var i = 0; i < inputs.length; i++) {
text += inputs[i].value;
}
var li = document.createElement("li");
var node = document.createTextNode(text);
li.appendChild(node);
document.getElementById("list").appendChild(li);
}
http://jsfiddle.net/nb5h4o7o/3/
Your list wasn't being appended to because you weren't actually creating the elements. replaceChild should have been appendChild and you should have created a list element with document.createElement.
Your code is full of problems, look at the document.getElementById and Node.replaceChild docs.
I've created a version for you that we get all the input elements of your form (using querySelectorAll), and then we use Array.prototype.map to turn them into "<li>[value]</li>", and then Array.prototype.join to turn that array into a single string.
Then, we get that string and set the #list.innerHTML property.
document.querySelector('button').addEventListener('click', function(e) {
var form = document.querySelector('form'),
list = document.getElementById('list');
list.innerHTML = [].map.call(form.querySelectorAll('input'), function(el) {
return '<li>' + el.value + '</li>';
}).join('');
});
<form>
ID Number:
<br>
<input type="text" id="idNumber">
<br>First name:
<br>
<input type="text" id="firstName">
<br>Last name:
<br>
<input type="text" id="lastName">
</form>
<br>
<button type="submit">Submit</button>
<div id="container">
<ul id="list"></ul>
</div>
I'm adding new inputs dynamically. And I would also like to read values dynamically from them. My championName variable doesn't work in JS.
<form name="second_form" id="second_form" action="#" method="POST" style="margin: 0;" >
<div id="p_scents">
<p>
<label for="p_scnts">
<input type="text" id="p_scnt" size="20" list="champions" name="champion[]" value="" placeholder="Enter Champion's name">
<datalist id="champions"></datalist>
Add General Change<a></a>
Add Spell<a></a>
</label>
</p>
</div>
<br/><input type="submit" value="submit">
</form>
function val(doublechamp) {
var championsWithExtraSpells = ["Aatrox", "Elise", "Fizz", "Heimerdinger", "Jayce", "Lee Sin", "Nidalee", "Rek'Sai","Twisted Fate"];
var champion = this["champion[]"];
var championName = document.getElementsByName("Champion[]").value;
if($.inArray(championName, championsWithExtraSpells)==-1){
var existsInArray = false;}
else{
var existsInArray = true;}
d = document.getElementById("change[]").value;
var spellname = document.getElementById("ttt");
spellname.value=champions[""+championName+""][change(d, existsInArray)];
}
Collection returned by getElementsByName() in the line, so just replace it.
UPDATED
JS :
Replace :
var championName = document.getElementsByName("Champion[]").value;
By :
for(var i=0;i<document.getElementsByName("champion[]").length;i++)
var championName = document.getElementsByName("champion[]")[0].value;
Now you can get all the inputs values.
There are couple of changes you need to make:
- You're not invoking the function anywhere in the code you're showing
you'll need to add an onChange clause to the input or an onsubmit to the form to check the values..
the name of an element can't contain [] - so you should remove those from the name;
<input type="text" id="p_scnt" size="20" list="champions" name="champion" value="" placeholder="Enter Champion's name">
getElementsByName returns nodelist, not a single node (even if there's only one match). If you make the following changes you'll get farther:
And in the script change these two lines:
var championName = document.getElementsByName("champion");
if($.inArray(championName[0].value, championsWithExtraSpells)==-1){