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);
Related
<form name="myform">
<fieldset>
<legend>Delivery Information</legend>
<p>Country: <input pattern="^[A-Za-z]" type="text" name="textInput" size="25" placeholder="input country..."></p>
<p>Street: <input pattern="^[A-Za-z0-9]" type="text" name="street" size="30" placeholder="input street..."></p>
<p>City: <input pattern="^[A-Za-z ]" type="text" name="textInput" size="20" placeholder="input city..."></p>
<p>Zip: <input pattern="(\d{5}([\-]\d{4})?)" type="text" name="zip" size="5" placeholder="#####"></p>
</fieldset>
</form>
So, I have a form and I want to get all input elements by name "textInput"(I have other inputs so it ha) using Javascrip DOM, and add an attribute "oninvalid="please, only use letters".
Only Javascript, so no JQuery.
You can use this function:
function changeAttributes() {
var x = document.getElementsByName("textInput");
for(var i = 0; i < x.length, i++) {
x[i].setAttribute("oninvalid", "please, only use letters");
}
}
Try below:
$('input[name=textInput]').attr("oninvalid", "please, only use letters");
I'm using spring mvc for my form which has the tag
<form:input type="number" class="value1" id="value1" path="commandName.object.field1" />
<form:input type="number" class="value1" id="value1" path="commandName.object.field2" />
<input type="text" disabled="disabled" id="result" />
I read some questions in regards to calculations and even found a js fiddle:
http://jsfiddle.net/g7zz6/1125/
how do i calculate 2 input fields and put results in 3rd input field
but it doesn't work when the input tag is form:input. Is it possible to do auto calculation of the 2 form:input fields upon keyin and update the 3rd input?
Here you go
HTML
<input type="text" class="input value1">
<input type="text" class="input value2 ">
<input type="text" disabled="disabled" id="result">
JS
$(document).ready(function(){
$('input[type="text"]').keyup(function () {
var val1 = parseInt($('.value1').val());
var val2 = parseInt($('.value2').val());
var sum = val1+val2;
$("input#result").val(sum);
});
});
Fiddle https://jsfiddle.net/1sbvfzcc/
$(document).ready(function(){
var val1 = +$(".value1").val();
var val2 = +$(".value2").val();
$("#result").val(val1+val2);
});
$('.input').blur(function(){
var val1 = +$(".value1").val();
var val2 = +$(".value2").val();
$("#result").val(val1+val2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="input value1" value="20">
<input type="text" class="input value2" value="30">
<input type="text" disabled="disabled" id="result">
Please check the code this might help you understand why your code is not working.
You are using document ready function which is not able to get the value as no default value for input box.
I have added a new blur function which will calculate the value on change of input box
Try this your form tag syntax was wrong
$('form').on('keyup' ,'.value1', function(){
var k=0;
$('.value1').each(function(){
k +=parseFloat($(this).val()|0);
})
$('input:text').val(k)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="number" class="value1" id="value1" path="commandName.object.field1" />
</form>
<form>
<input type="number" class="value1" id="value1" path="commandName.object.field2" />
</form>
<input type="text" disabled="disabled" id="result" />
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);
I have html form with arrays:
<form method="post" id="formaa" name="form">
<div id="fields">
<div id="divas1" class="row">
<img src="d.jpg" /><a href="#" id="uid1" onClick="u(this);">
<img src="u.jpg" /></a><input type="text" name="ite[]" id="item" /><input type="text" name="q[]" id="quantity" class="quant" size="3" />
<input type="text" name="pr[]" id="price" size="10" class="kaina" onkeyup="update();"/><input type="text" name="sum[]" id="suma" size="10" disabled="disabled"/></div>
</div>
<br />
<input type="button" name="nw" id="new" value="ADD" onClick="naujas('laukeliai');" /><br />
Total: <input type="text" name="sumaa[]" id="suma" size="10" disabled="disabled"/>
</form>
Each time I push forms ADD button, inside the <div id="fields"> is included new div block <div id=divas(i++)> I need multiply qp[] and pr[] values and dynamicaly add to sum field, need do multiply price and quantity of each product seperately and get final each product price (not all products total).
first tried to get all values and filter these two, but couldnt figure out...
var form = document.getElementsByName('form')[0];
var inputs = form.getElementsByTagName('input');
for (var i = 0, j = inputs.length; i < j; i++) {
var element = inputs[i];
alert(element.value);
}
How to extract from this array only needed values and multiply? Thanks for advices.
Assuming you want to generate the sum of the prices for all the products and quantities you bought, you would first rewrite your HTML as:
<form id="example_form">
<div class="row">
<input type="text" name="item" class="item"></input>
<input type="text" name="quant" class="quant"></input>
<input type="text" name="price" class="price"></input>
</div>
<div class="row">
<input type="text" name="item" class="item"></input>
<input type="text" name="quant" class="quant"></input>
<input type="text" name="price" class="price"></input>
</div>
<!-- ... many more rows -->
<input type="text" disabled id="sum" name="sum"></input>
</form>
Use jQuery to make field access easier. Using JQuery, you would use the following JS:
function update() {
var total = 0;
$("#example_form div.row").each(function(i,o){
total += $(o).find(".quant").val() *
$(o).find(".price").val();
});
$("#example_form #sum").val(total);
}
This will update totals for you. To do this each time any number is changed, you would need to register it with the corresponding fields, using something like
$("#example_form div.row input").change(update);
Have I convinced you of using JQuery? See it working at http://jsfiddle.net/UnYJ3/2/
you can read form array in way as below
frmRefer = document.getElementByTagName("form")[0];
for(i= 0 ; i<frmRefer.elements["ite[]"].length;i++){
alert(frmRefer.elements["ite[]"][i].value );
}
for(i= 0 ; i<frmRefer.elements["quant[]"].length;i++){
alert(frmRefer.elements["quant[]"][i].value );
}
for(i= 0 ; i<frmRefer.elements["pr[]"].length;i++){
alert(frmRefer.elements["pr[]"][i].value );
}