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
Related
I have a bunch of checkboxes:
<input type="checkbox" name="foo" value="1" />
<input type="checkbox" name="foo" value="2" />
<input type="checkbox" name="foo" value="3" />
<input type="checkbox" name="foo" value="4" />
<input type="checkbox" name="foo" value="5" />
<input type="checkbox" name="foo" value="6" />
I want to change the checked attribute the ones with values 1, 3 and 5. Is there a cleaner way to provide a selector than below (preferably a one-liner)?
$('[name="foo"][value="1"],[name="foo"][value="3"],[name="foo"][value="4"]').prop({ checked: true }).change();
P.S. Found a better way:
$('[name="foo"]').filter('[value="1"],[value="3"],[value="4"]').prop({ checked: true }).change();
Using prop(propertyName, function) could do something like
var checkVals = [1, 3 , 5];
// Adjust selector to fit needs
$(':checkbox').prop('checked', function(){
return checkVals.indexOf(+this.value) > -1 || this.checked;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="foo" value="1" />
<input type="checkbox" name="foo" value="2" />
<input type="checkbox" name="foo" value="3" />
<input type="checkbox" name="foo" value="4" />
<input type="checkbox" name="foo" value="5" />
<input type="checkbox" name="foo" value="6" />
Or using filter()
var checkVals = [1, 3 , 5];
// Adjust selector to fit needs
$(':checkbox').filter(function() {
return checkVals.indexOf(+this.value) > -1;
}).prop('checked', true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="foo" value="1" />
<input type="checkbox" name="foo" value="2" />
<input type="checkbox" name="foo" value="3" />
<input type="checkbox" name="foo" value="4" />
<input type="checkbox" name="foo" value="5" />
<input type="checkbox" name="foo" value="6" />
I suppose if you know the indices you want to check beforehand, you won't have to put them in manually:
$([1, 3, 5].map(x => `[name="foo"][value="${x}"]`).join(",")).prop({ checked: true }).change();
That snippet uses fancy es6 arrow functions and template literals. If you can't use those, it looks a little nastier but still isn't too bad:
$([1, 3, 5].map(function(x) { return '[name="foo"][value="' + x + '"]').join(",")).prop({ checked: true }).change();
Finally, you can even do it without collecting them all in the same selector:
[1,3,5].forEach(x => { $(`[name="foo][value="${x}"]`).prop({ checked: true }).change(); });
Pick your poison I guess.
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())
})
I currently have 2 groups of checkboxes. The submit button of the form shall stay disabled until at least one checkbox of each group is checked.
By now it works just for the first category (name/id all the same except the number, you'll see).
HTML:
<h3>Choose func</h3>
<input type="hidden" name="func1" value="" />
<input type="checkbox" name="func1" value="1" id="func1" /> f1 <br/>
<input type="hidden" name="func2" value="" />
<input type="checkbox" name="func2" value="1" id="func2" /> f2<br/>
<input type="hidden" name="func3" value="" />
<input type="checkbox" name="func3" value="1" id="func3"/> f3<br/>
<br/>
<h3>Choose plat</h3>
<input type="hidden" name="plat1" value="" />
<input type="checkbox" name="plat1" value="1" id="plat1" /> p1<br/>
<input type="hidden" name="plat2" value="" />
<input type="checkbox" name="plat2" value="1" id="plat2" /> p2<br/>
<input type="hidden" name="plat3" value="" />
<input type="checkbox" name="plat3" value="1" id="plat3" /> p3<br/>
<input type="hidden" name="plat4" value="" />
<input type="checkbox" name="plat4" value="1" id="plat4" /> p4<br/>
<br/><br/>
<script>
</script>
<input type="submit" name="abfrage" class="inputButton" id="idAbfragen" value="submit" disabled="">
JS:
$(function () {
$("#func1, #func2, #func3").change(function () {
if ( $("#func1").is(' :checked') || $("#func2").is(':checked') || $("#func3").is(':checked') ) {
$('.inputButton').attr('disabled', false);
}
else {
$('.inputButton').attr('disabled', true);
}
});
});
I have the current code in the jsfiddle: https://jsfiddle.net/g4jcjn51/
So I thought about sth. like this (which doesn't work):
if ( ($("#func1").is(' :checked') || $("#func2").is(':checked') || $("#func3").is(':checked')) && $("#plat1").is(' :checked') || $("#plat2").is(':checked') || $("#plat3").is(':checked') || $("#plat4").is(':checked') )
{
}
Any solution?
Thanks!
$("#func1, #func2, #func3, #plat1, #plat2, #plat3, #plat4").change(function () {
if (($("#func1").is(':checked') || $("#func2").is(':checked') || $("#func3").is(':checked')) && ($("#plat1").is(':checked') || $("#plat2").is(':checked') || $("#plat3").is(':checked') || $("#plat4").is(':checked') )) {
$('.inputButton').attr('disabled', false);
}
else {
$('.inputButton').attr('disabled', true);
}
});
What about counting checked checkboxes like this:
var checked1 = $('input[name="func1"]:checked').length;
var checked2 = $('input[name="func2"]:checked').length;
if (checked1 > 0 && checked2> 0){
//Do your stuff
} else {
alert("At least one checkbox of each group has to be checked.");
}
You could wrap it into two groups, #group1 and #group2 i.e <div id="group1"> etc, and then
$("input[type=checkbox]").on('click', function() {
if ($("#group1 input:checked").length>0 &&
$("#group2 input:checked").length>0) {
$("#idAbfragen").attr('disabled', false);
} else {
$("#idAbfragen").attr('disabled', true);
}
});
forked fiddle -> https://jsfiddle.net/kee7m06r/
You can give your form an id and then select all checkboxes at once and make the verification.
HTML:
<h3>Choose func</h3>
<form id="form1">
<input type="hidden" name="func1" value="" />
<input type="checkbox" name="func1" value="1" id="func1" /> f1 <br/>
<input type="hidden" name="func2" value="" />
<input type="checkbox" name="func2" value="1" id="func2" /> f2<br/>
<input type="hidden" name="func3" value="" />
<input type="checkbox" name="func3" value="1" id="func3"/> f3<br/>
<br/>
<h3>Choose plat</h3>
<input type="hidden" name="plat1" value="" />
<input type="checkbox" name="plat1" value="1" id="plat1" /> p1<br/>
<input type="hidden" name="plat2" value="" />
<input type="checkbox" name="plat2" value="1" id="plat2" /> p2<br/>
<input type="hidden" name="plat3" value="" />
<input type="checkbox" name="plat3" value="1" id="plat3" /> p3<br/>
<input type="hidden" name="plat4" value="" />
<input type="checkbox" name="plat4" value="1" id="plat4" /> p4<br/>
<br/><br/>
<script>
</script>
<input type="submit" name="abfrage" class="inputButton" id="idAbfragen" value="submit" disabled=""/>
</form>
JS:
$(function () {
$("#form1").find("input[type=checkbox]").change(function () {
if ($(this).is(' :checked')){
$('.inputButton').attr('disabled', false);
}
else {
$('.inputButton').attr('disabled', true);
}
});
});
JSFiddle
I'd suggest you group your checkboxes using a <div> or a <fieldset>, so that you can easily tell which items are in which group. Then you should be able to easily figure out whether all the groups have at least one checked input.
$(function() {
$("input[type=checkbox]").change(function() {
var anySegmentIsUnchecked = $('fieldset').is(':not(:has(:checked))');
$('.input-button').prop('disabled', anySegmentIsUnchecked);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form>
<fieldset>
<legend>
<h3>Choose func</h3>
</legend>
<input type="hidden" name="func1" value="" />
<input type="checkbox" name="func1" value="1" id="func1" />f1
<br/>
<input type="hidden" name="func2" value="" />
<input type="checkbox" name="func2" value="1" id="func2" />f2
<br/>
<input type="hidden" name="func3" value="" />
<input type="checkbox" name="func3" value="1" id="func3" />f3
<br/>
</fieldset>
<fieldset>
<legend>
<h3>Choose plat</h3>
</legend>
<input type="hidden" name="plat1" value="" />
<input type="checkbox" name="plat1" value="1" id="plat1" />p1
<br/>
<input type="hidden" name="plat2" value="" />
<input type="checkbox" name="plat2" value="1" id="plat2" />p2
<br/>
<input type="hidden" name="plat3" value="" />
<input type="checkbox" name="plat3" value="1" id="plat3" />p3
<br/>
<input type="hidden" name="plat4" value="" />
<input type="checkbox" name="plat4" value="1" id="plat4" />p4
<br/>
</fieldset>
</form>
<input type="submit" name="abfrage" class="input-button" id="idAbfragen" value="submit" disabled>
Fiddle
One big advantage to this approach is that it follows the open/closed principle: you don't have to change your javascript code at all if you add more groups of checkboxes.
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 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/