After a form submit in MVC C#, I would like a way in JavaScript (not jQuery) to reset the values of all textboxes on the page with class="orderQuantity" to the value of "0". I'm thinking something like:
var tObj = getElementsByClassName('orderQuantity');
for(var i = 0; i < tObj.length; i++){
tObj[i].value='0';}
The code above isn't working, hoping you guys can help
You need to use document.getElementsByClassName. Thus, try the following:
function change(){
var tObj = document.getElementsByClassName('orderQuantity');
for(var i = 0; i < tObj.length; i++){
tObj[i].value='0';
}
}
<input class="orderQuantity" value="foo">
<input class="orderQuantity" value="bar">
<input class="orderQuantity" value="javascript">
<input class="orderQuantity" value="foobar">
<input class="orderQuantity" value="stackoverflow"><br>
<button onclick="change()">Change</button>
You could achieve this by the following method as well.
HTML Code
<input class="orderQuantity" value="foo">
<input class="orderQuantity" value="bar">
<input class="orderQuantity" value="javascript">
<input class="orderQuantity" value="foobar">
<input class="orderQuantity" value="stackoverflow"><br>
<button onclick="change()">Change</button>
Javascript Code
function change()
{
$(".ItemRate").val(0);
}
use jquery in order to get the class
var tObj = $('.orderQuantity');
for(var i = 0; i < tObj.length; i++){
tObj[i].value='0';}
http://fiddle.jshell.net/v4q7pkLn/
Related
function addition(){
var count = 2;
for(var i = 0 ; i <=count ; i++ ){
var val = document.getElementById('num');
alert(val.value);
}
}
<input type="text" id="num" name="name[]">
<input type="text" id="num" name="name[]">
<input type="submit" id="num" onclick="addition">
I Want to get values of input with the help of single id or name please help me how to get it..
There can only be one id in a page. Use class, element or attribute selectors instead.
Using a class for the inputs (the button doesn't need a class/id in this case), you can get all elements using Document.getElementsByClassName(), and than you can iterate the collection:
function addition(){
var val = document.getElementsByClassName('num');
for(var i = 0 ; i < val.length ; i++ ){
console.log(val[i].value);
}
}
<input type="text" class="num" name="name[]">
<input type="text" class="num" name="name[]">
<input type="submit" onclick="addition()">
There are a couple of problems,
onclick of submit button is not invoking addition.
i.e. add () after addition
<input type="submit" id="num" onclick="addition()">
Loop's condition is invalid, it will ensure that there is never an iteration for(var i = 0 ; i <=count ; i++ ){ since your count is 0.
Increase the count to 2
var count = 2;
document.getElementById will only return one element since Ids are supposed to be unique.
Use data-id (or class or any other data- attribute) instead and use querySelectorAll to query those elements
Demo
function addition() {
var allInputs = document.querySelectorAll("input[data-id='num']");
for (var i = 0; i < allInputs.length; i++) {
var val = allInputs[i];
console.log(val.value);
}
}
<input type="text" data-id="num" name="name[]" value="1">
<input type="text" data-id="num" name="name[]" value="2">
<input type="submit" id="num" onclick="addition()">
if this is your code, then id cannot be duplicated.
you can have multiple fields by same class name but Id should be different.
For javascript one id for one element is a good practice. If you want to get all value then you can use class attribute. So you also can use document.querySelectorAll like this -
<input type="text" class="num" name="name[]">
<input type="text" class="num" name="name[]">
<input type="submit" onclick="addition()">
function addition(){
var val = document.querySelectorAll('.num');
for(var i = 0 ; i < val.length ; i++ ){
console.log(val[i].value);
}
}
I'm trying to get the input type value's from input fields that have been generated by a webshop framework. I can't change the html. When I added fields it creates this:
<input id="filter_15" type="checkbox" name="filter[]" value="15">
<input id="filter_16" type="checkbox" name="filter[]" value="16">
<input id="filter_17" type="checkbox" name="filter[]" value="17">
I found some code that gets the value based on the input id, except that the id's filter_... can change, and are different for every shop.
any sugestions? here's what i've gathered so far.
<script type="text/javascript">
var filter;
function onload() {
filter = document.getElementById('filter');
}
function show() {
alert(filter.value);
}
You were on the right track with .getElementById, but you want instead, .getElementsByName.
var els = document.getElementsByName("filter[]");
for (var i = 0; i < els.length; i++)
alert(els[i].value);
<input id="filter_15" type="checkbox" name="filter[]" value="15">
<input id="filter_16" type="checkbox" name="filter[]" value="16">
<input id="filter_17" type="checkbox" name="filter[]" value="17">
By using document.querySelectorAll, in which you can use any CSS selector with, including an "attribute starts with" selector like input[id^="filter_"] must get your job done.
Here is a demo
var inputs = document.querySelectorAll('input[id^="filter_"]');
debugger;
for (i = 0; i < inputs.length; i++) {
alert(inputs[i].value)
}
<input id="filter_15" type="checkbox" name="filter[]" value="15">
<input id="filter_16" type="checkbox" name="filter[]" value="16">
<input id="filter_17" type="checkbox" name="filter[]" value="17">
Heres the Jquery solution
$('input [id^="filter_"]').each(function(){
alert( $(this).val() );
});
You can get inputs by tag name, then iterate over it.
var inputs, index, len;
inputs = document.getElementsByTagName('input');
len = inputs.length;
for (index = 0; index < len; ++index) {
alert(inputs[index].value)
}
This question already has answers here:
How do I get the label of the selected radio button using javascript
(3 answers)
Closed 8 years ago.
I have a group of radio buttons and want to get the checked radio button, then alert the text, not only the value of it. To explain more, when the user clicks the first radio button, and then submits the form, I want the browser to alert "Desktop Case." And I want to achieve this without jQuery.
<form action="" name="form1">
<label for="radio400">Desktop Case</label>
<input type="radio" name="rad_case" value="400" id="radio400"/>
<label for="radio401">Mini Tower</label>
<input type="radio" name="rad_case" value="401" id="radio401"/>
<label for="radio402">Full Tower</label>
<input type="radio" name="rad_case" value="402" id="radio402"/>
<input type="button" value="Submit" name="btn_submit" onclick="update_order_onclick()"/>
</form>
The following works for your example. It uses CSS selectors to target the checked input. Based on its id, the appropriate label is found:
function update_order_onclick() {
var value= 'Nothing selected',
selected= document.querySelector('input[name="rad_case"]:checked'),
selection= document.querySelector('#selection');
if(selected) {
value= document.querySelector('label[for="'+selected.id+'"]').innerHTML;
}
selection.innerHTML= value;
}
<form action="" name="form1">
<label for="radio400">Desktop Case</label>
<input type="radio" name="rad_case" value="400" id="radio400"/>
<br>
<label for="radio401">Mini Tower</label>
<input type="radio" name="rad_case" value="401" id="radio401"/>
<br>
<label for="radio402">Full Tower</label>
<input type="radio" name="rad_case" value="402" id="radio402"/>
<br>
<input type="button" value="Submit" name="btn_submit" onclick="update_order_onclick()"/>
</form>
<div id="selection"></div>
First, we create a function to loop through the radio buttons group we have, and checks if it is checked or not.
function get_radio_val(form, name)
{
var val;
var radios = form.elements[name];
for (var i =0; i < radios.length; i++)
{
if (radios[i].checked)
{
val = radios[i];
break;
}
}
return val;
}
Then we write the function that will be executed on onclick event.
function update_order_onclick()
{
var val = get_radio_val(document.form1, 'rad_case');
var val_id = val.id;
var selector = 'label[for=' + val_id + ']';
var label = document.querySelector(selector);
var label_text = label.innerHTML;
alert(label_text);
}
The thing that helped us here, is that the label for attribute has to be the same value as the radio button id and that's how we selected it in the function above.
simply do the following:
var checked = document.querySelector('input:checked');
var id = checked?checked.id:'bla';
var lab = document.querySelector('label[for='+id+']');
var lab_text = lab?lab.textContent:'';
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;
}
I am trying to validate 2 sets of radio button using Javascript. It is working with one set but not when I add another radio set (secondtime visitor). Here is my code:
HTML:
<form name="form1" action="#" method="post">
First time visitor?:<br/>
<label for="s1">Yes</label>
<input type="radio" id="radio1" name="firsttime" value="1"/>
<br/>
<label for="s2">No</label>
<input type="radio" id="radio2" name="firsttime" value="2"/>
<br/>
Second time visitor?:<br/>
<label for="s1">Yes</label>
<input type="radio" id="radio1" name="secondTime" value="1"/>
<br/>
<label for="s2">No</label>
<input type="radio" id="radio2" name="secondTime" value="2"/>
<br/>
<button type="submit" name="nextBTN" onclick="return validateForm();">Next</button><br/>
</form>
And Javascript code:
function validateForm() {
var radios = document.getElementsByName("firsttime");
var radios2 = document.getElementsByName("secondtime");
var formValid = false;
var i = 0;
while (!formValid && i < radios.length) {
if (radios[i].checked) formValid = true;
i++;
}
var j = 0;
while (!formValid && i < radios2.length) {
if (radios2[j].checked) formValid = true;
j++;
}
if (!formValid) alert("Must check some option!");
return formValid;
}
At first glance, I can see that in your second while loop, you still check the radios variable instead of the radios2 variable.
You also used the i variable instead of j in the second loop. And you weren't consistent with the capitalization of secondTime (vs secondtime).
Here's a working version of your code:
http://jsfiddle.net/8edCn/
EDIT: Updated version per your comment: http://jsfiddle.net/8edCn/2/