I want my selectbox to be enabled when the radio button is checked. My code works for this. But if I choose other option. My selectbox didn't change into disabled.
Here's my code:
HTML
<div class="flex">
<div class="first">
<label class="group">
<input name="sg-a" type="radio">
<p>Ganjil - Genap 2D</p>
</label>
<label class="group">
<input name="sg-a" type="radio">
<p>Besar - Kecil 2D</p>
</label>
<label class="group">
<input name="sg-a" type="radio">
<p>Tengah - Tepih 2D</p>
</label>
<label class="group">
<input name="sg-a" type="radio">
<p>Kombinasi 2D</p>
</label>
</div>
<div class="second">
<label class="group">
<input name="sg-a" type="radio">
<p>SHIO</p>
</label>
<label class="group">
<input name="sg-a" type="radio">
<p>Over / Under</p>
</label>
<label class="group">
<input class="jitu" name="sg-a" type="radio">
<p>Colok Jitu</p>
<select disabled>
<option>As</option>
<option>Kop</option>
<option>Kepala</option>
<option>Ekor</option>
</select>
</label>
<label class="group">
<input name="sg-a" type="radio">
<p>4D</p>
</label>
</div>
<input type="submit" value="Cari Data">
</div>
For Javascript
var jitu = document.getElementsByClassName('jitu');
for(var i = 0; i < jitu.length; i++){
jitu[i].addEventListener('change', function(){
(this.checked) ? this.parentNode.children[2].disabled = false : this.parentNode.children[2].disabled = true;
});
}
Thanks for those who will help. Cheers!
JSfiddle : https://jsfiddle.net/c3a2q3n8/
You should give each input add a class name 'jitu'
If your html is not dynamically generated then you can slightly modify your html like this
Note that I have added a onclick function for each radio input and a unique value attribute.
<div class="flex">
<div class="first">
<label class="group">
<input name="sg-a" type="radio" onclick="handleClick(this);" value="1">
<p>
Ganjil - Genap 2D</p>
</label>
<label class="group">
<input name="sg-a" type="radio" onclick="handleClick(this);" value="2">
<p>
Besar - Kecil 2D</p>
</label>
<label class="group">
<input name="sg-a" type="radio" onclick="handleClick(this);" value="3">
<p>
Tengah - Tepih 2D</p>
</label>
<label class="group">
<input name="sg-a" type="radio" onclick="handleClick(this);" value="4">
<p>
Kombinasi 2D</p>
</label>
</div>
<div class="second">
<label class="group">
<input name="sg-a" type="radio" onclick="handleClick(this);" value="5">
<p>
SHIO</p>
</label>
<label class="group">
<input name="sg-a" type="radio" onclick="handleClick(this);" value="6">
<p>
Over / Under</p>
</label>
<label class="group">
<input class="jitu" name="sg-a" type="radio" onclick="handleClick(this);" value="7">
<p>
Colok Jitu</p>
<select disabled id="jitusl">
<option>As</option>
<option>Kop</option>
<option>Kepala</option>
<option>Ekor</option>
</select>
</label>
<label class="group">
<input name="sg-a" type="radio" onclick="handleClick(this);" value="8">
<p>
4D</p>
</label>
</div>
<input type="submit" value="Cari Data">
</div>
Now you have to place this handleClick() in js and check for specific value to either enable/disable it.
<script type="text/javascript">
function handleClick(myRadio) {
alert('New value: ' + myRadio.value);
if (myRadio.value === "7") {
document.getElementById('jitusl').disabled = false;
}
else {
document.getElementById('jitusl').disabled = true;
}
}
</script>
The problem is that when you click on the other options, the trigger isn't fired because the focused item isn't the one that you wrote the function for.
You should make a function that is triggered on change of every option, beware of the radio button so it knows whether to disable or enable it.
var inputs = document.getElementsByTagName('input');
var selectInput = document.getElementById('dropdownSelect');
for(var i = 0; i < inputs.length; i++){
var input = inputs[i];
if(input.type!='radio') continue;
input.addEventListener('change', function(){
var isJitu = ( this.className && this.className.match(/jitu/) )? true : false;
selectInput.disabled = !isJitu;
});
}
<div class="flex">
<div class="first">
<label class="group">
<input name="sg-a" type="radio">
<p>Ganjil - Genap 2D</p>
</label>
<label class="group">
<input name="sg-a" type="radio">
<p>Besar - Kecil 2D</p>
</label>
<label class="group">
<input name="sg-a" type="radio">
<p>Tengah - Tepih 2D</p>
</label>
<label class="group">
<input name="sg-a" type="radio">
<p>Kombinasi 2D</p>
</label>
</div>
<div class="second">
<label class="group">
<input name="sg-a" type="radio">
<p>SHIO</p>
</label>
<label class="group">
<input name="sg-a" type="radio">
<p>Over / Under</p>
</label>
<label class="group">
<input class="jitu" name="sg-a" type="radio">
<p>Colok Jitu</p>
<select disabled id="dropdownSelect">
<option>As</option>
<option>Kop</option>
<option>Kepala</option>
<option>Ekor</option>
</select>
</label>
<label class="group">
<input name="sg-a" type="radio">
<p>4D</p>
</label>
</div>
<input type="submit" value="Cari Data">
</div>
I've added a global variable (currentSelect) to track the current active select and used the click event rather than the change event since change fires at different times for different browsers. I'm also attaching the event to all your radio buttons instead of just the one with the select otherwise it will not fire when a different radio is selected (and also in case you wanted to add more selects)
var currentSelect;
function setupClickHandlers() {
var jitu = document.getElementsByName('sg-a');
for(var i = 0; i < jitu.length; i++){
jitu[i].addEventListener('click', function() {
if (currentSelect) {
currentSelect.disabled = !currentSelect.parentNode.children[0].checked;
}
if (this.parentNode.children[2]) {
currentSelect = this.parentNode.children[2]
currentSelect.disabled = !this.checked;
}
});
}
}
Related
Hi i would like some help where i have created a input field for number 1 - 7 where if number 1 mean i can only select 1 checkbox but if number 7 are choosen is it able to select 7 checkbox how can i do it ?
Here my code
<div class="container position">
<div class="row">
<input class="inputStyle" type="number" value="1" min="1" max="7"><label class="timeStyle">times per week</label>
<div class="container-fluid">
<div class="box">
<input type="checkbox" id="monday" name="monday" value="Monday">
<label for="monday"> Monday</label><br>
<input type="checkbox" id="tuesday" name="tuesday" value="Tuesday">
<label for="tuesday"> Tuesday</label><br>
<input type="checkbox" id="wednesday" name="wednesday" value="Wednesday">
<label for="wednesday"> Wednesday</label><br>
<input type="checkbox" id="thursday" name="thursday" value="Thursday">
<label for="thursday"> Thursday</label><br>
<input type="checkbox" id="friday" name="friday" value="Friday">
<label for="Friday"> Friday</label><br>
<input type="checkbox" id="saturday" name="saturday" value="Saturday">
<label for="saturday"> Saturday</label><br>
<input type="checkbox" id="sunday" name="sunday" value="Sunday">
<label for="Sunday"> Sunday</label><br>
</div>
</div>
</div>
</div>
You can use eventListeners to check if the number of checkboxes checked is bigger than the value of the number input :
$("input[type='checkbox']").change(function(){
let max = $(".inputStyle").val(); //times per week value
let cbx = $("input[type='checkbox']:checked").length; //number of checkboxes checked
if (cbx > max) {
$(this).prop("checked", false); //cancels the check
}
});
$("input[type='number'].inputStyle").change(function(){
let max = $(".inputStyle").val(); //times per week value
let cbx = $("input[type='checkbox']:checked").length; //number of checkboxes checked
if (cbx > max) {
$("input[type='checkbox']:checked").prop("checked", false); //uncheck all checked checkboxes
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container position">
<div class="row">
<input class="inputStyle" type="number" value="1" min="1" max="7"><label class="timeStyle">times per week</label>
<div class="container-fluid">
<div class="box">
<input type="checkbox" id="monday" name="monday" value="Monday">
<label for="monday"> Monday</label><br>
<input type="checkbox" id="tuesday" name="tuesday" value="Tuesday">
<label for="tuesday"> Tuesday</label><br>
<input type="checkbox" id="wednesday" name="wednesday" value="Wednesday">
<label for="wednesday"> Wednesday</label><br>
<input type="checkbox" id="thursday" name="thursday" value="Thursday">
<label for="thursday"> Thursday</label><br>
<input type="checkbox" id="friday" name="friday" value="Friday">
<label for="Friday"> Friday</label><br>
<input type="checkbox" id="saturday" name="saturday" value="Saturday">
<label for="saturday"> Saturday</label><br>
<input type="checkbox" id="sunday" name="sunday" value="Sunday">
<label for="Sunday"> Sunday</label><br>
</div>
</div>
</div>
</div>
hi I don't remove parnet.
My code:
<div class="prdctfltr_add_scroll">
<div class="prdctfltr_checkboxes">
<label class="prdctfltr_ft_">
<input type="checkbox" value="">
<span>
<img src="" onerror="delNoneOptionFilters(this)" class="product_filter_none_option">
<script>function delNoneOptionFilters( x ){ $(x).closest('label').remove; }</script>
</span>
</label>
<label class="prdctfltr_ft_popularity">
<input type="checkbox" value="popularity">
<span>Popularity</span>
</label>
<label class="prdctfltr_ft_rating">
<input type="checkbox" value="rating">
<span>Average rating</span>
</label>
<label class="prdctfltr_ft_date">
<input type="checkbox" value="date">
<span>Newness</span>
</label>
<label class="prdctfltr_ft_price">
<input type="checkbox" value="price">
<span>Price: low to high</span>
</label>
<label class="prdctfltr_ft_price-desc">
<input type="checkbox" value="price-desc">
<span>Price: high to low</span>
</label>
</div>
</div>
I want delete label class="prdctfltr_ft_"
remove is not a property It is a function you have to use like this $(x).closest('label').remove().
function delNoneOptionFilters( x ){
$(x).closest('label').remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="prdctfltr_add_scroll">
<div class="prdctfltr_checkboxes">
<label class="prdctfltr_ft_">
<input type="checkbox" value="">
<span>
<button onclick="delNoneOptionFilters(this)">delete</button>
</span>
</label>
<label class="prdctfltr_ft_popularity"><input type="checkbox" value="popularity"><span>Popularity</span></label><label class="prdctfltr_ft_rating"><input type="checkbox" value="rating"><span>Average rating</span></label><label class="prdctfltr_ft_date"><input type="checkbox" value="date"><span>Newness</span></label><label class="prdctfltr_ft_price"><input type="checkbox" value="price"><span>Price: low to high</span></label><label class="prdctfltr_ft_price-desc"><input type="checkbox" value="price-desc"><span>Price: high to low</span></label>
</div>
</div>
Please Try This:-
function delNoneOptionFilters( x ){ $(x).parents('label').remove(); }
I want to select a radio button depending on an input field. This seems very simple but its not working. Basically a user fills out a form and depending on the state input field, it picks the state tax radio button.
The code below is not firing for some reason, any idea's?
The input field
<div class="form-group">
<label for="state" class="col-sm-3 control-label">State</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="state" name="state" placeholder="State" onblur="picktax();" required />
</div>
</div>
The radio button
<div class="form-group">
<label for="emailaddress" class="col-sm-3 control-label">Tax</label>
<div class="col-sm-9">
<br>
<div class="col-sm-9">
<label class="checkbox-inline">
<input type="radio" class="px" name="tax2" id="radio1" class="radio" value="0" / />
<span class="lbl">Tax Exempt</span>
</label>
<br>
</div>
<div class="col-sm-9">
<label class="checkbox-inline">
<input type="radio" class="px" name="tax2" id="radio2" class="radio" value="0.0875" />
<span class="lbl">NYC 8.875%</span>
</label>
<br>
</div>
<div class="col-sm-9">
<label class="checkbox-inline">
<input type="radio" class="px" name="tax2" id="radio3" class="radio" value="0.08625" />
<span class="lbl">LI 8.625%</span>
</label>
<br>
</div>
<div class="col-sm-9">
<label class="checkbox-inline">
<input type="radio" class="px" name="tax2" id="radio4" class="radio" value="0.07" />
<span class="lbl">NJ 7%</span>
</label>
<br>
</div>
<div class="col-sm-9">
<label class="checkbox-inline">
<input type="radio" class="px" name="tax2" id="radio5" class="radio" value="0.06" />
<span class="lbl">Philly 6%</span>
</label>
<br>
</div>
<div class="col-sm-9">
<label class="checkbox-inline">
<input type="radio" class="px" name="tax2" id="radio6" class="radio" value="0.0635" />
<span class="lbl">CT 6.35%</span>
</label>
<br>
</div>
</div>
The script
<script>
function picktax() {
var statevalue = document.getElementById('state').value;
var nyvalue = "NY";
var livalue = "LI";
var njvalue = "NJ";
if (statevalue == nyvalue) {
$("#radio2").prop("checked", true)
} elseif (statevalue == livalue) {
$("#radio3").prop("checked", true)
} elseif (statevalue == njvalue) {
$("#radio4").prop("checked", true)
} else {
alert("test");
}
}
</script>
updated, still not firing
Your example shows that you are new to JavaScript so whilst I wouldn't code it quite like this myself here's your code corrected enough to work.
As mentioned in the comments there is no elseif keyword in JS and you must use double or triple equals operator for evaluating.
Nethertheless, you were getting close to something workable.
function picktax() {
var statevalue = document.getElementById('state').value;
var nyvalue = "NY";
var livalue = "LI";
var njvalue = "NJ";
if (statevalue == nyvalue) {
$("#radio2").prop("checked", true)
} else if (statevalue == livalue) {
$("#radio3").prop("checked", true)
} else if (statevalue == njvalue) {
$("#radio4").prop("checked", true)
} else {
alert("test");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label for="state" class="col-sm-3 control-label">State</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="state" name="state" placeholder="State" oninput="picktax();" required />
</div>
</div>
<div class="form-group">
<label for="emailaddress" class="col-sm-3 control-label">Tax</label>
<div class="col-sm-9">
<br>
<div class="col-sm-9">
<label class="checkbox-inline">
<input type="radio" class="px" name="tax2" id="radio1" class="radio" value="0" / />
<span class="lbl">Tax Exempt</span>
</label>
<br>
</div>
<div class="col-sm-9">
<label class="checkbox-inline">
<input type="radio" class="px" name="tax2" id="radio2" class="radio" value="0.0875" />
<span class="lbl">NYC 8.875%</span>
</label>
<br>
</div>
<div class="col-sm-9">
<label class="checkbox-inline">
<input type="radio" class="px" name="tax2" id="radio3" class="radio" value="0.08625" />
<span class="lbl">LI 8.625%</span>
</label>
<br>
</div>
<div class="col-sm-9">
<label class="checkbox-inline">
<input type="radio" class="px" name="tax2" id="radio4" class="radio" value="0.07" />
<span class="lbl">NJ 7%</span>
</label>
<br>
</div>
<div class="col-sm-9">
<label class="checkbox-inline">
<input type="radio" class="px" name="tax2" id="radio5" class="radio" value="0.06" />
<span class="lbl">Philly 6%</span>
</label>
<br>
</div>
<div class="col-sm-9">
<label class="checkbox-inline">
<input type="radio" class="px" name="tax2" id="radio6" class="radio" value="0.0635" />
<span class="lbl">CT 6.35%</span>
</label>
<br>
</div>
</div>
As pointed in the comments, your code has some syntax errors. Also, there are a few ways you could improve it, for example I use a switch instead of if. Nothing wrong with if, I'm just providing an example. Fixed code would be:
function picktax() {
var statevalue = $('#state').val();
var radio = $();
switch (statevalue) {
case "NY":
radio = $("#radio2");
break;
case "LI":
radio = $("#radio3");
break;
case "NJ":
radio = $("#radio4");
break;
default:
alert("test");
break;
}
radio.prop("checked", true);
}
I swear I tried a lot before asking you guys, but I just can't make it work properly. I have a radio and a checkbox area as it follows:
<form class="form-horizontal text-left">
<div class="form-group">
<label>Plans</label>
<div>
<label class="radio-inline">
<input type="radio" name="linePlan" value="100000">Plan 1
</label>
</div>
<div>
<label class="radio-inline">
<input type="radio" name="linePlan" value="126000">Plan 2
</label>
</div>
<div>
<label class="radio-inline">
<input type="radio" name="linePlan" value="160000">Plan 3
</label>
</div>
</div>
<div class="form-group">
<label>Options</label>
<div class="checkbox">
<label>
<input type="checkbox" id="english" value="3000">English
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="portuguese" value="3000">Portuguese
</label>
</div>
</div>
<div class="form-group">
<label>Plans</label>
<div>
<label id="resultPlan" style="color:blue"></label>
<label id="sumPlan" style="color:blue"></label>
</div>
<label>Options</label>
<div>
<label id="resultOption" style="color:blue"></label>
<label id="sumOption" style="color:blue"></label>
</div>
<label>TOTAL</label>
<label id="sumTotal" style="color:blue"></label>
</div>
</form>
I want to sum the user's choices and display it as texts and numbers. The selected radio will be displayed as text inside #resultPlan and it's value inside #sumPlan. The selected checkbox(es) will be displayed as text inside #resultOption and it's value inside #sumOption. If the user checks both boxes, #resultOption will have a comma separating each option and #sumOption will be the sum of both values. Finally, the label #sumTotal will get all the values selected, summed and displayed as a number.
I hope you guys got what I'm trying to do. I hope to find a solution that works with IE, so JS or Jquery.
UPDATE 1:
The code I created (but with no success) was based on each possible case of the use'r choice. That was the basic structure:
$("input[name=linePlan]").on('change',function(){
var linePlan = $('input[name=linePlan]:checked');
if ($(linePlan).is(':checked') && $(this).val() == '100000' && $('#english').prop('checked', false) && $('#portuguese').prop('checked', false)) {
$('#resultPlan').text("Plan 1")
$('#sumPlan').text('100000～')
$('#totalLine').text((Math.round(100000 * 1.08)) + '～') //1.08 is a tax fee
} else if ($(linePlan).is(':checked') && $(this).val() == '126000' && $('#english').prop('checked', false) && $('#portuguese').prop('checked', false)) {
$('#resultPlan').text("Plan 2")
$('#sumPlan').text('126000～')
$('#sumTotal').text((Math.round(126000 * 1.08)) + '～')
}
});
Of course that's not the full code, but that is pretty much what I tried.
Thank you for all the help!
I just created a code for your question. If you need the taxes, just add conditional statements below. Hope this helps.
Check this code :
$("input[name=linePlan],input[type=checkbox]").on('change', function() {
var planvalue = parseInt($('input[name=linePlan]:checked').val());
var plantext = $('input[name=linePlan]:checked').parent().text();
var optionsvalue = 0;
var options = [];
$('input[type="checkbox"]').each(function() {
if ($(this).is(':checked')) {
optionsvalue += parseInt($(this).val());
options.push($(this).parent().text());
}
});
var optionstext = options.join(',');
$('#resultPlan').text(plantext);
$('#sumPlan').text(planvalue);
$('#resultOption').text(optionstext);
$('#sumOption').text(optionsvalue);
if (optionsvalue == 0)
$('#resultOption').text("No Options");
$('#sumTotal').text(planvalue + optionsvalue);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal text-left">
<div class="form-group">
<label>Plans</label>
<div>
<label class="radio-inline">
<input type="radio" name="linePlan" value="100000">Plan 1
</label>
</div>
<div>
<label class="radio-inline">
<input type="radio" name="linePlan" value="126000">Plan 2
</label>
</div>
<div>
<label class="radio-inline">
<input type="radio" name="linePlan" value="160000">Plan 3
</label>
</div>
</div>
<div class="form-group">
<label>Options</label>
<div class="checkbox">
<label>
<input type="checkbox" id="english" value="3000">English
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="portuguese" value="3000">Portuguese
</label>
</div>
</div>
<div class="form-group">
<label>Plans</label>
<div>
<label id="resultPlan" style="color:blue"></label>
<label id="sumPlan" style="color:blue"></label>
</div>
<label>Options</label>
<div>
<label id="resultOption" style="color:blue"></label>
<label id="sumOption" style="color:blue"></label>
</div>
<label>TOTAL</label>
<label id="sumTotal" style="color:blue"></label>
</div>
</form>
I have the following fields on a form and was wondering if it is possible to update the hidden input field (itemValue) value based on the user selection from radio buttons? So that the hidden field input value will be equal to the value of the selected radio button...Any example is highly appreciated. Thanks
<form name="clientPaymentForm" id="clientPaymentForm" action="https://...." method="post" target="_top">>
<div>
<fieldset>
<input id="name" type="text" required placeholder="Client Name">
...
...
<input type="hidden" name="itemValue" value="">
...
<div>
<div>
<label class="label_radio" for="item1">
<span class="labelText">$5</span>
<input type="radio" id="item1" name="item1" value="5"/>
</label>
</div>
<div>
<label class="label_radio" for="item2">
<span class="labelText">$10</span>
<input type="radio" id="item2" name="item2" value="10"/>
</label>
</div>
<div>
<label class="label_radio" for="item3">
<span class="labelText">$15</span>
<input type="radio" id="item3" name="item3" value="15"/>
</label>
</div>
<div>
<label class="label_radio" for="item4">
<span class="labelText">$20</span>
<input type="radio" id="item4" name="item4" value="20"/>
</label>
</div>
</div>
....
....
</div>
</form>
Your radio buttons are currently all independent of each other, meaning that you can quite literally select all 4 of them at the same time. In order to get them to work together (so you can only ever select one at any given time), you'll need to give them all an identical name. For example:
<input type="radio" id="item1" name="item" value="5"/>
...
<input type="radio" id="item2" name="item" value="10"/>
Notice how these both have a name of "item"?
Once you've done that, you can use jQuery like this:
$('[name="item"]').on('change', function() {
$('[name="itemValue"]').val($(this).val());
});
JSFiddle demo. (Note that I've used a text input element rather than a hidden one to easily show you that the value changes.)
$("input[type=radio]").change(function () {
if ($(this).prop(":checked")) {
$('#yourId').val($(this).val())
}
});
<form name="clientPaymentForm" id="clientPaymentForm" action="https://...." method="post" target="_top">>
<div>
<fieldset>
<input id="name" type="text" required placeholder="Client Name">
...
...
<input type="hidden" name="itemValue" value="">
...
<div>
<div>
<label class="label_radio" for="item1">
<span class="labelText">$5</span>
<input type="radio" id="item1" name="item" value="5"/>
</label>
</div>
<div>
<label class="label_radio" for="item2">
<span class="labelText">$10</span>
<input type="radio" id="item2" name="item" value="10"/>
</label>
</div>
<div>
<label class="label_radio" for="item3">
<span class="labelText">$15</span>
<input type="radio" id="item3" name="item" value="15"/>
</label>
</div>
<div>
<label class="label_radio" for="item4">
<span class="labelText">$20</span>
<input type="radio" id="item4" name="item" value="20"/>
</label>
</div>
</div>
....
....
</div>
</form>
JQuery>
$(function(){
$("input[name='item']").change(function(){
$("input[name='itemValue']").val($(this).val());
alert($("input[name='itemValue']").val());
});
});
$('input:radio').change(function () {
if (this.checked) {
$('#hidfld').val($(this).val()));
}
});