I am trying to change the value of a textbox based on the selection a group of 4 radio buttons. This is not the actual html code, but a simplified version:
<input type="radio" name="radiogroup" id="radiogroup" value="5" />
<input type="radio" name="radiogroup" id="radiogroup" value="10" />
<input type="radio" name="radiogroup" id="radiogroup" value="15" />
<input type="radio" name="radiogroup" id="radiogroup" value="20" />
<input type="text" name="amount" id="amount" />
So what I am trying to do is fill the textbox named "amount" with either 5, 10, 15 or 20 based on which radio button is selected.
I am new to jquery and everything I tried did not work.
Thank you in advance for any help.
cdr6545
You can easily do this by adding class.
Working Fiddle
HTML:
<input type="radio" name="radiogroup" id="radiogroup" class="radiogroup" value="5" />
<input type="radio" name="radiogroup" id="radiogroup" class="radiogroup" value="10" />
<input type="radio" name="radiogroup" id="radiogroup" class="radiogroup" value="15" />
<input type="radio" name="radiogroup" id="radiogroup" class="radiogroup" value="20" />
<input type="text" name="amount" id="amount" />
JS:
$('.radiogroup').change(function(e){
var selectedValue = $(this).val();
$('#amount').val(selectedValue)
});
ID's are unique, and an ID can only be used on one element in the current document, so change it to classes.
Then attach a change event handler to the radios, get the checked one, and set the value of the text input to the checked radios value
$('.radiogroup').on('change', function() {
$('#amount').val( this.value );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="radiogroup" class="radiogroup" value="5" />
<input type="radio" name="radiogroup" class="radiogroup" value="10" />
<input type="radio" name="radiogroup" class="radiogroup" value="15" />
<input type="radio" name="radiogroup" class="radiogroup" value="20" />
<br /><br />
<input type="text" name="amount" id="amount" />
Something like:
$('input[name="radiogroup"]').click(function()
{
$('#amount').val($(this).val())
})
Related
An image is being rendered based on multiple attributes.
The name of the image reflects attribute values (for names a, b, & c).
<div>
<img src="112_small.jpg" data-zoom-image="112_big.jpg" id="rendered_choice">
</div>
<div>
<h6>9</h6>
<input type="radio" id="a_1" name="a" value="1" checked="checked" />
<input type="radio" id="a_2" name="a" value="2" />
<input type="radio" id="a_3" name="a" value="3" />
</div>
<div>
<h6>10</h6>
<input type="radio" id="b_1" name="b" value="1" checked="checked" />
<input type="radio" id="b_2" name="b" value="2" />
<input type="radio" id="b_3" name="b" value="3" />
<input type="radio" id="b_4" name="b" value="4" />
<input type="radio" id="b_5" name="b" value="5" />
</div>
<div>
<h6>11</h6>
<input type="radio" id="c_1" name="c" value="1" />
<input type="radio" id="c_2" name="c" value="2" checked="checked" />
</div>
when a user clicks a radio button (say b_4), the checked input element needs to change and a new image needs to render as
<img src="142_small.jpg" data-zoom-image="142_big.jpg" id="rendered_choice">
How can this be accomplished with jQuery, where the file name takes into account all other checked values in addition to the user inputted value?
Just get the value of each checked checkbox, in order, after making an array with $.makeArray:
$("input[type='radio']").on("change", function() {
const num = $.makeArray($("input:checked")).map(({ value }) => value).join("");
$("#rendered_choice").attr("src", num + "_small.jpg").data("zoom-image", num + "_big.jpg");
});
You can get value of each checked checkbox and change the img src when input checked change.
Demo:
$("input[type=radio]").on("change", function() {
var index = $("input[name=a]:checked").val() + $("input[name=b]:checked").val() + $("input[name=c]:checked").val();
$("#rendered_choice").attr("src", index + "_small.jpg");
$("#rendered_choice").attr("data-zoom-image", index + "_big.jpg");
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<img src="112_small.jpg" data-zoom-image="112_big.jpg" id="rendered_choice">
</div>
<div>
<h6>9</h6>
<input type="radio" id="a_1" name="a" value="1" checked="checked" />
<input type="radio" id="a_2" name="a" value="2" />
<input type="radio" id="a_3" name="a" value="3" />
</div>
<div>
<h6>10</h6>
<input type="radio" id="b_1" name="b" value="1" checked="checked" />
<input type="radio" id="b_2" name="b" value="2" />
<input type="radio" id="b_3" name="b" value="3" />
<input type="radio" id="b_4" name="b" value="4" />
<input type="radio" id="b_5" name="b" value="5" />
</div>
<div>
<h6>11</h6>
<input type="radio" id="c_1" name="c" value="1" />
<input type="radio" id="c_2" name="c" value="2" checked="checked" />
</div>
I have a series of elements on a form:
<input type="radio" name="options[0]" value="Mens" />Mens
<input type="radio" name="options[0]" value="Womens" />Womens <hr>
<input type="radio" name="options[1]" value="XL" />XL
<input type="radio" name="options[1]" value="L" />L
<input type="radio" name="options[1]" value="M" />M
<input type="radio" name="options[1]" value="S" />S <hr />
<input type="checkbox" size="16" name="options[2]" value="Printed Name" />Printed Name
How can I access the values of the radio button for my validation routine?
Use querySelectorAll
var radios = document.querySelectorAll('input[type=radio][name^=options]');
[name^=options] matches elements whose name begins with options.
You can then loop over radios.
I have the following idea. My view contains 3 input fields and radio buttons which need to work each other.
Firstly when the view is displayed you can see the input fields only. If the user clicks on one of the input fields the other fields disabled and the radio buttons to this input fields are showing. If the user want to use an other input field of these three then he needs to click on one of the radio buttons then the other two input field will disabled.
Here is the currently code:
...
<input type="text" name="Id" ng-model="search.id" ng-click="disabled = !disabled" ng-disabled="..." />
<input type="radio" class="radio" ng-hide="!disabled" />
...
<input type="text" name="Name" ng-model="search.name" ng-click="disabled = !disabled" ng-disabled="disabled" />
<input type="radio" class="radio" ng-hide="!disabled" />
...
<input type="text" name="Age" ng-model="search.age" ng-click="disabled = !disabled" ng-disabled="disabled" />
<input type="radio" class="radio" ng-hide="!disabled" />
How can I realise that? Currently the first input field works.
Try to give a value to disabled
...
<input type="text" name="Id" ng-model="search.id" ng-click="disabled = 1" ng-disabled="disabled!=1" />
<input type="radio" class="radio" ng-hide="disabled==1" />
...
<input type="text" name="Name" ng-model="search.name" ng-click="disabled = 2" ng-disabled="disabled!=2" />
<input type="radio" class="radio" ng-hide="disabled==2" />
...
<input type="text" name="Age" ng-model="search.age" ng-click="disabled = 3" ng-disabled="disabled!=3" />
<input type="radio" class="radio" ng-hide="disabled==3" />
this can certainly work, just make sure you are using different $scope variables for each control:
<input type="text" name="Id" ng-model="search.id" ng-click="disabledId = !disabledId" ng-disabled="disabledId" />
<input type="radio" class="radio" ng-show="disabledId" ng-click="disabledName = true; disabledId=false; disabledAge=true"/>
...
<input type="text" name="Name" ng-model="search.name" ng-click="disabledName = !disabledName" ng-disabled="disabledName" />
<input type="radio" class="radio" ng-show="disabledName" ng-click="disabledName = false; disabledId=true; disabledAge=true"/>
...
<input type="text" name="Age" ng-model="search.age" ng-click="disabledAge = !disabledAge" ng-disabled="disabledAge" />
<input type="radio" class="radio" ng-show="disabledAge" ng-click="disabledAge=false; disabledId = true; disabledName=true"/>
While this should work here, I recommend not to put so much JS-code into the HTML, better would be to add a method on $scope like $scope.radioClicked(buttonId) and then call this method on ng-click.
Also using ng-show instead of ng-hide helps readability - no double negation.
I've changed my input fields. It is a possible solution but only I need the interaction with radio buttons and the input fields.
<input type="text" name="Id" ng-model="search.id" ng-click="nameDis = !nameDis;ageDis = !ageDis" ng-disabled="idDis" />
<input type="radio" class="radio" ng-hide="!idDis" />
...
<input type="text" name="Name" ng-model="search.name" ng-click="idDis = !idDis;ageDis = !ageDis" ng-disabled="nameDis" />
<input type="radio" class="radio" ng-hide="!nameDis" />
...
<input type="text" name="Age" ng-model="search.age" ng-click="nameDis = !nameDis;idDis = !idDis" ng-disabled="ageDis" />
<input type="radio" class="radio" ng-hide="!ageDis" />
I am trying to populate a series of textboxes from a number of checkboxes. There are 8 text boxes and it seems that code will only populate one of these fields.
here is the checkboxes:
<input name="naicscode" id="naicsCodeCheckbox0" class="naicsCodeCheckbox" type="checkbox" value="1" />
<input name="naicscode" id="naicsCodeCheckbox1" class="naicsCodeCheckbox" type="checkbox" value="1" />
<input name="naicscode" id="naicsCodeCheckbox2" class="naicsCodeCheckbox" type="checkbox" value="2" />
<input name="naicscode" id="naicsCodeCheckbox3" class="naicsCodeCheckbox" type="checkbox" value="3" />
<input name="naicscode" id="naicsCodeCheckbox4" class="naicsCodeCheckbox" type="checkbox" value="4" />
<input name="naicscode" id="naicsCodeCheckbox5" class="naicsCodeCheckbox" type="checkbox" value="2" />
<input name="naicscode" id="naicsCodeCheckbox6" class="naicsCodeCheckbox" type="checkbox" value="3" />
<input name="naicscode" id="naicsCodeCheckbox7" class="naicsCodeCheckbox" type="checkbox" value="4" />
<input type="button" id="secondaryNaicsButton" name="save_value" value="Save" />
heres the textboxes:
<input name="secondaryNaicsCodeField" id="secondaryNaicsCode0" class="fpp_textfield NAICS-code-field" value="" type="text" />
<input name="secondaryNaicsCodeField" id="secondaryNaicsCode1" class="fpp_textfield NAICS-code-field" value="" type="text" />
<input name="secondaryNaicsCodeField" id="secondaryNaicsCode2" class="fpp_textfield NAICS-code-field" value="" type="text" />
<input name="secondaryNaicsCodeField" id="secondaryNaicsCode3" class="fpp_textfield NAICS-code-field" value="" type="text" />
<input name="secondaryNaicsCodeField" id="secondaryNaicsCode4" class="fpp_textfield NAICS-code-field" value="" type="text" />
<input name="secondaryNaicsCodeField" id="secondaryNaicsCode5" class="fpp_textfield NAICS-code-field" value="" type="text" />
here is my jQuery:
// gets values of check box in Secondary NAICS list
$('#secondaryNaicsButton').click(function() {
$('.naicsCodeCheckbox:checked').each(function(i){
var val = []
val[i] = $(this).val();
for (var i =0; i < val.length; i++) {
$('#secondaryNaicsCode'+i).val(val[i]);
}
});
the result i'm getting is that it will give the value of one of the check boxes and put it in text box 3 or 4.
this is what console log is giving me :
111140 fol_reg_form.js:215
undefined fol_reg_form.js:215
111150 fol_reg_form.js:215
2
undefined fol_reg_form.js:215
111219 fol_reg_form.js:215
3
undefined fol_reg_form.js:215
111331 fol_reg_form.js:215
4
undefined fol_reg_form.js:215
111334
Try this:
$('#secondaryNaicsButton').click(function () {
$('.naicsCodeCheckbox').each(function (i) {
if (this.checked) {
$('#secondaryNaicsCode' + i).val(this.value);
}
});
});
Demo here
Note: in your code you have no class with name .naicscode, so I used class naicsCodeCheckbox instead. If you want to go by name you can use the same code but with $('input[name="naicscode"]').each( //etc ... instead.
I got the code to work. Took some good advice.
here's the code:
// gets values of check box in Secondary NAICS list
$('#secondaryNaicsButton').click(function() {
$('.naicsCodeCheckbox:checked').each(function(e) {
val = []
val[e] = $(this).val();
$('#secondaryNaicsCode'+e).val(val[e]);
});
});
demo here
I have a form that finds lost and found items.
<input type="radio" name="subcatitemlost" value="subDiv1" />Luggage
<div id="subDiv1" class="desc">
<label>
<input type="radio" name="subluggage" id="truck" value="t" />
</label>Trunk</br>
<label>
<input type="radio" name="subluggage" id="chest" value="chest" />
</label>Chest</br>
<label>
<input type="radio" name="subluggage" id="suitcase" value="suitcase" />
</label>Suitcase</br>
<label>
<input type="radio" name="subluggage" id="duffelbag" value="duffelbag" />
</label>Duffelbag</br>
<label>
<input type="radio" name="subluggage" id="tote" value="tote" />
</label>Tote</br>
</div>
<br />
<input type="radio" name="subcatitemlost" value="subDiv2" />Clothing
<div id="subDiv2" class="desc">
<input type="radio" name="subclothing" id="shirt" value="shirt" />
</label>Shirt</br>
<input type="radio" name="subclothing" id="shoes" value="shoes" />
</label>Shoes</br>
<input type="radio" name="subclothing" id="pants" value="pants" />
</label>Pants</br>
<input type="radio" name="subclothing" id="jacket" value="jacket" />
</label>Jacket</br>
<input type="radio" name="subclothing" id="suit" value="suit" />
</label>Suit</br>
<input type="radio" name="subclothing" id="hat" value="hat" />
</label>Hat</br>
</div>
<br />
The main categories will unselect themselves upon selection of another main category , however , the subcategories will remain selected and I cannot figure how to control that.I am looking for the script that doesn't allow another subcategory to be selected when the correct button is selected.
$(document).ready(function () {
$("div.desc").hide();
$("input[name$='subcatitemlost']").click(function () {
var test = $(this).val();
$("div.desc").hide();
$("#" + test).show();
});
});
Try using this
$(document).ready(function() {
$("div.desc").hide();
$("input[name$='subcatitemlost']").click(function() {
var test = $(this).val();
$("div.desc").hide();
$("#" + test).show();
$("div input:radio").attr('checked', false);
});
});
http://jsfiddle.net/dbtA4/