Hi and thanks for looking.
I need to get all form inputs from a form using javascript, the inputs are named like so:
<input name="site[1]" type="text" size="3" id="sitesinput" value="0" />
<input name="site[2]" type="text" size="3" id="sitesinput" value="0" />
<input name="site[3]" type="text" size="3" id="sitesinput" value="0" />
<input name="site[4]" type="text" size="3" id="sitesinput" value="0" />
......
<input name="site[10]" type="text" size="3" id="sitesinput" value="0" />
and I have the following to pick them up and adding the values togther, but it is not working, what am I doing wrong:
function site_change() {
var sites= document.getElementById('sitesinput').value;
var sum= 0;
var inputs= document.getElementById('inputsite').getElementsByTagName('input');
for (var i= inputs.length; i-->0;) {
if (inputs[i].getAttribute('name').match(/^site[\d+$]/))
{
var v= inputs[i].value.split(',').join('.').split(' ').join('');
if (isNaN(+v))
alert(inputs[i].value+' is not a readable number');
else
sum+= +v;
}
}
var phones= document.getElementById('phonesinput').value;
document.getElementById('siteresult').innerHTML = phones-sum;
};
Is the Match function wrong?
Thanks,
B.
Your regex is a little off (using [] blocks characters, but you actually want to find square brackets so they need to be escaped. And $ needs to be at the end). Try:
.match(/^site\[\d+\]$/)
Related
Is it possible to add value atribute through jquery, but not to remove the old atribut (something like addClass).I have 7 input fields that is typed, and need to combine it in one word and passed to another input field. I tried to take value from typed field and passed it to field that all of them need to be combined, but it always take value from last field when I tried with
$("input").keyup(function(){
var test = this.value;
$(".solution_2").attr('value', test);
});
Here is html:
<input id="1" class="q1 inputs letter square border_black" maxlength="1" type="text"/>
<input id="2" class="q2 inputs letter square border_black" maxlength="1" type="text" />
<input class="solution_2" value="" class="form-control" type="text" name="date">
Any ideas. Thanks.
You should use map and join to get all the values. So, you don't need to store or add value in different attribute. Check the below code:
$("button").on('click', function() {
var finalValue = $('input').map(function() {
return this.value;
}).get().join('');
console.log(finalValue);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="1" class="q1 inputs letter square border_black" maxlength="1" type="text" />
<input id="2" class="q2 inputs letter square border_black" maxlength="1" type="text" />
<input class="solution_2" value="" class="form-control" type="text" name="date">
<button class="someClass">Get Value</button>
First you usually get the value in jquery by using .val().
The problem is that you only take the last value and overwrite the old one. You need to take the old value and add the new one.
$("input").keyup(function(){
$(".solution_2").val($(".solution_2").val()+this.val());
});
You could just get all the value evrytime and send them to solution_2
Something like :
$("input").keyup(function(){
var test = $("#1").attr("value")+$("#2").attr("value");
$(".solution_2").attr('value', test);
});
Btw, you can use val() instead of attr("value");
$("input").keyup(function(){
var test = $("#1").val()+$("#2").val();
$(".solution_2").val(test);
});
Do you mean to concatinate the inputs values into a single string?
var inputs = $('.inputs');
inputs.keyup(function() {
$('.solution_2').val(inputs.val().join(''));
});
Try This :
$(document).ready(function() {
$('input').on('input',function(){
var txt = '';
$('.solution_2').val('');
$('input').each(function(){
txt += $(this).val();
})
$('.solution_2').val(txt);
})
})
$(document).ready(function() {
$('input').on('input',function(){
var txt = '';
$('.solution_2').val('');
$('input').each(function(){
txt += $(this).val();
})
$('.solution_2').val(txt);
})
})
<!-- begin snippet: js hide: true console: false babel: false -->
p {
display: table-row;
}
input,label {
display: table-cell;
margin: 2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<p><label>character 1:</label><input id="s1" class="q1 inputs letter square border_black" maxlength="1" type="text"/></p>
<p><label>character 2:</label><input id="s1" class="q1 inputs letter square border_black" maxlength="1" type="text"/></p>
<p><label>character 3:</label><input id="s1" class="q1 inputs letter square border_black" maxlength="1" type="text"/></p>
<p><label>character 4:</label><input id="s1" class="q1 inputs letter square border_black" maxlength="1" type="text"/></p>
<p><label>character 5:</label><input id="s1" class="q1 inputs letter square border_black" maxlength="1" type="text"/></p>
<p><label>character 6:</label><input id="s1" class="q1 inputs letter square border_black" maxlength="1" type="text"/></p>
<p><label>character 7:</label><input id="s1" class="q1 inputs letter square border_black" maxlength="1" type="text"/></p>
<p><label>word:</label><input class="solution_2" value="" class="form-control" type="text" name="date"></p>
I'd like to know how to dynamically generate an ID on every input tag based off of it's name. I have to do this using javascript only - Not jQuery.
So, for example, if I have the following text inputs:
<input type="text" name="input1" value="">
<input type="text" name="input2" value="">
<input type="text" name="input3" value="">
I'd like to end up with this:
<input id="input1" type="text" name="input1" value="">
<input id="input2" type="text" name="input2" value="">
<input id="input3" type="text" name="input3" value="">
Any help would be appreciated,
Thanks!
In plain JS, you can get the elements basis of tag name.
And then set the id attribute for that element
function setinputIds() {
var inputs = document.getElementsByTagName('input');
for(var i=0;i < inputs.length; i++) {
var id = inputs[i].getAttribute('name');
inputs[i].setAttribute("id", id);
}
}
var inputs = document.getElementsByTagName('input');
for (var ii=0, item; item = inputs[ii]; ii++) {
item.id = item.name;
}
Probably you can use a for loop to iterate name and insert id like this:
for(i=1;i<4;i++){
document.getElementsByName('input'+i).id='input'+i;
}
Hi i am using this code snippet to pass the actual value to array. but i want to take the value passed from textbox to array how to do this?
html code:
<input type="text" name="cost" value=" ">
<input type="text" name="cost" value=" ">
<input type="text" name="cost" value=" ">
javascript code:
multipliers = [5, 6, 5];
instead of 5,6,5 i should get values from textfield how to do this?
Fiddle
An input array would be appropriate:
<form name="myForm">
<input type="text" name="cost[]" value="1">
<input type="text" name="cost[]" value="2">
<input type="text" name="cost[]" value="3">
</form>
Javascript:
var list = document.myForm.elements['cost[]'];
var multipliers = [];
for(var i=0; i<list.length; i++)
{
multipliers.push(list[i].value);
}
console.log(multipliers);
You can use document.querySelectorAll since you don't seem to be having ids for your elements.
var nodes = document.querySelectorAll('[name=cost]'), // get all elements with name = cost
values = [],
i = 0;
for(i=0; i<nodes.length; i++)
values.push(parseInt(nodes[i].value, 10));
console.log(values);
Demo
<form name="myForm">
<input type="text" name="cost[]" value="1">
<input type="text" name="cost[]" value="2">
<input type="text" name="cost[]" value="3">
</form>
var allElements= document.myForm.elements['cost[]'];
var arr= [];
for(var i=0; i<allElements.length; i++)
arr.push(allElements[i].value);
Hi I'm having trouble sending html form array to JS. I have dynamic html form and some fields:
<div id="fields">
<input type="text" name="ppav[]" id="p" />
<input type="text" name="quantity[]" id="q" size="3" />
<input type="text" name="price[]" id="pr" size="10" />
<input type="text" name="sum" id="su" size="10" disabled="disabled"/>
<br />
</div>
in JS i tried using this function but getting undefined alert instead of result:
var welements = document.getElementsByName('ppav[]');
for (var i = 0, j = welements.length; i < j; i++) {
var an_element = welements[i];
alert(an_element.selectedIndex);
}
What did you expect? the selectedIndex property returns the index of the selected option in a select element. If you want the value of your input fields, try alert(an_element.value);
I need the total of all the values from my input. The result must be displayed in the input field total that is readonly.
The user can enter 1 or more values. The problem is that my var value is not correct. I'd also like to know how I can return the value immediately by onchange?
$(document).ready(function() {
$("div#example input").change(function() {
var value = '';
$("div#example input[name!=total]").each(function() {
value += $(this).val();
});
console.log("value after each: " + value);
});
})
HTML:
<div id="example">
<input type="text" size="5" id="value1" name="value1" />
<input type="text" size="5" id="value2" name="value2" />
<input type="text" size="5" id="value3" name="value3" />
<input type="text" size="5" id="value4" name="value4" />
<input type="text" size="5" id="value5" name="value5" />
<input type="text" size="5" id="total" readonly="readonly" class="bckground" name="total" />
Try something like this:
$(document).ready(function() {
$("div#example id^='value'").change(function() {
var value = 0;
$("div#example input[name!=total]").each(function() {
var i = parseInt($(this).val());
if (!isNaN(i))
{
value += i;
}
});
$('#total').val(value);
});
})
use += parseInt($(this).val());
var sum = 0;
$('input[id^=value]').each (function(){ sum+=$(this).val(); });
$('#total').val( sum );
:]
I think this might be closer:
<script type="text/javascript">
$(document).ready(function() {
$("#example value").change(function() {
var total = 0;
$("#example value").each(function() {
total += parseInt($(this).val());
});
window.console && console.log("value after each: " + total);
});
})
</script>
<div id="example">
<input type="text" size="5" class="value" name="value1" />
<input type="text" size="5" class="value" name="value2" />
<input type="text" size="5" class="value" name="value3" />
<input type="text" size="5" class="value" name="value4" />
<input type="text" size="5" class="value" name="value5" />
<input type="text" size="5" id="total" readonly="readonly" class="bckground" name="total" />
</div>
Your original selector for $.change() was including the total box, which I suspect you don't want.
Am I correct in guessing you want to add numbers? Your original 'value' variable was a string.
And BTW, it's safer to use the 'window.console && console.log' idiom, since there won't be a console variable for many users. (Though I bet that line was only there for debugging.)
EDIT
Added parseInt() based on other suggestions.
Use the jQuery form serialization:
alert($("form_id").serialize());
There is also a comparison for different serialization types: http://jquery.malsup.com/form/comp/