I need to find a way to enable the input field with a value and change it or deactivate it with value 0
$("#tax").value(19).prop("disabled",false);
$("#tax").value(0).prop("disabled",true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>tax %</label><br>
<input type="radio" checked>Get tax
<input type="radio"> No tax
<input type="text" class="form-control" name="tax" id="tax" required="">
Update input box value on changing radio button
$('input[name=taxs]').change(function (e) {
$('#tax_value').val(e.target.value)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li><input type="radio" name="taxs" value="10"> 10</li>
<li><input type="radio" name="taxs" value="20"> 20</li>
<li><input type="radio" name="taxs" value="30"> 30</li>
<li><input type="radio" name="taxs" value=""> No Tax</li>
</ul>
<input type="text" id="tax_value">
replace $("#tax").value(...
with $("#tax").val(...
Related
I would like to validate the below code in js so that the user has to check one but i do not know how to. The form name is 'registration'
<li>
<input type="checkbox" name="en" value="en" />
<span>English</span>
</li>
<li>
<input type="checkbox" name="nonen" value="noen" />
<span>Non English</span>
</li>
Use an input of type radio instead.
Here is a link to the MDN documentation, basically all inputs of type radio that have the same name property are grouped together and the user can select only one of them.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio
You could try this one
<input type="radio" name="raden" id="english" checked>
<label for="english">English</label>
<input type="radio" name="radnon" id="nonenglish">
<label for="nonenglish">Non-English</label>
<li><input type="checkbox" name="en" value="en" /><span>English</span></li>
<li><input type="checkbox" name="en" value="en" /><span>Non English</span></li>
In check box name must be same if all check boxes are selected. Try thid code.
<li>
<input type="radio" name="nonen" value="en" checked/>
<span>English</span>
</li>
<li>
<input type="radio" name="nonen" value="noen"/>
<span>Non English</span>
<li>
<input type="radio" name="nonen" value="en" checked/>
<span>English</span>
</li>
<li>
<input type="radio" name="nonen" value="noen"/>
<span>Non English</span>
The case is basically like this:
I have 2 questions (have to answer both questions):
1. Do you smoke? a. Yes b. No
2. Do you drink? a .Yes b. No
If the user choose a. in question 1, then value will be 2
If the user choose b. in question 1, then value will be 1
If the user choose a. in question 2, then value will be 2
If the user choose b. in question 2, then value will be 1
After that, I will be sum up the value for selected radio buttons of both questions and display it.
The code for the radio buttons will be:
<ul>
<li>Do you smoke cigarettes?<br>
<input type="radio" name="smoke" id="yes1" value="Y" checked="checked">
<label for="yes1">Yes</label>
<input type="radio" name="smoke" id="no1" value="N">
<label for="no1">No</label><br>
</li>
<li>Do you drink?<br>
<input type="radio" name="drink" id="yes2" value="Y" checked="checked">
<label for="yes2">Yes</label>
<input type="radio" name="drink" id="no2" value="N">
<label for="no2">No</label><br><br></li>
</ul>
I know that the value in the radio button can be changed but I want to assign value in the javascript function. (The value in the radio button has it's own purpose.)
That's it. Even though I googled it around but still no solution that solve my problem. Any advice or suggestion will be appreciated.
Thank you in advance.
i think this is what you want. please let me.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<body>
<ul>
<li>Do you smoke cigarettes?<br>
<input type="radio" name="smoke" id="yes1" data-vale = '2' value="Y" checked="checked">
<label for="yes1">Yes</label>
<input type="radio" name="smoke" id="no1" data-vale = '1' value="N">
<label for="no1">No</label><br>
</li>
<li>Do you drink?<br>
<input type="radio" name="drink" id="yes2" data-vale = '2' value="Y" checked="checked">
<label for="yes2">Yes</label>
<input type="radio" name="drink" id="no2" data-vale = '1' value="N">
<label for="no2">No</label><br><br>
</li>
</ul>
<input type="button" value="Get Value">
<script type="text/javascript">
$(document).ready(function(){
$("input[type='button']").click(function(){
var radioValue = $("input[name='smoke']:checked").attr('data-vale');
var radioValue2 = $("input[name='drink']:checked").attr('data-vale');
console.log( parseInt(radioValue) +parseInt(radioValue2) )
});
});
/*
* OR if you dont want to change HTML and may be this will work for you
*
$(document).ready(function(){
$("input[type='button']").click(function(){
var radioValue = $("input[name='smoke']:checked").val() == 'Y' ? 2 : 1;
var radioValue2 = $("input[name='drink']:checked").val() == 'Y' ? 2 : 1;
console.log( parseInt(radioValue) +parseInt(radioValue2) )
});
});
*/
</script>
</body>
</html>
Im not sure that i understand you right and i do not now why you want something like this. But this should work
<ul>
<li>Do you smoke cigarettes?<br>
<input type="radio" name="smoke" id="yes1" value="Y" checked="checked" onchange="yesSelected(this)">
<label for="yes1">Yes</label>
<input type="radio" name="smoke" id="no1" value="N" onchange="noSelected(this)">
<label for="no1">No</label><br>
</li>
<li>Do you drink?<br>
<input type="radio" name="drink" id="yes2" value="Y" checked="checked" onchange="yesSelected(this)">
<label for="yes2">Yes</label>
<input type="radio" name="drink" id="no2" value="N" onchange="noSelected(this)">
<label for="no2">No</label><br><br></li>
</ul>
<script type="text/javascript">
function yesSelected(input){
input.value = 2
console.log(input.value)
}
function noSelected(input){
input.value = 1
console.log(input.value)
}
</script>
From my understanding you could satisfy this with a script that uses event listeners, specifically the change of value in your radio buttons.
I would suggest also modeling a simple structure to capture your data. The following could be implemented. Instead of using an id for the question, associate them with an html data attribute. In this case we could specify something like data-question="1". It would also be more practical to assign the value you intend to use on the input element from the start. So instead of using value="Y" try value="2" or value="1". Now that we have our html set up we will use another structure, this time to capture the value. We declare a const question of type array that holds objects. Each object represents a question, the id property is the value we associate with the data-question attribute on our input. To find the inputs we use the document.querySelectorAll(selector) method because two radio buttons share the same attribute. After we simply attach our eventlistener with a handler function that just update our answer for that question. if you wanted to add the result you could use a forEach method on the question const and log it to the console or present it where you find appropriate. Hope this helps
`
<ul>
<li>Do you smoke cigarettes?<br>
<input type="radio" name="smoke" data-question="1" value="2" checked="checked">
<label for="yes1">Yes</label>
<input type="radio" name="smoke" data-question="1" value="1">
<label for="no1">No</label><br>
</li>
<li>Do you drink?<br>
<input type="radio" name="drink" data-question="2" value="2" checked="checked">
<label for="yes2">Yes</label>
<input type="radio" name="drink" data-question="2" value="1">
<label for="no2">No</label><br><br></li>
</ul>
<script>
const questions = [{id:1, answer:undefined},{id:2, answer: undefined}]
for(current of questions){
let inputs = document.querySelectorAll('[data-question="'+current.id+'"]');
for(input of inputs){
input.addEventListener('change',function(e){ current.answer = e.target.value})
}
}
</script>
`
I have several check boxes that I need to post the value of when a form is submitted. There is 4 at the moment and could be more so I was thinking of instead of adding individual functions is it possible to loop through them all and update respected fields in one go. I have seen a similar thing with form population with google maps but not quite the same. So I have a input like so:
function myCheck() {
var checkBox = document.getElementById("email_alerts");
if (checkBox.checked == true){
document.getElementById('form_email_alerts').value = 'YES'
} else {
document.getElementById('form_email_alerts').value = 'NO'
}
}
<ul class="confirm details">
<li class="selected">Please confirm your contact preferences</li>
<li><input type="checkbox" id="email_alerts" value="YES" onclick="myCheck()"> Receive email alerts</li>
<li><input type="checkbox" id="sms_alerts" value="NO" onclick="myCheck()"> Receive free SMS alerts</li>
<li><input type="checkbox" id="offers_alerts" value="NO" onclick="myCheck()"> Receive offers and discounts</li>
<li><input type="checkbox" id="instant_alerts" value="NO" onclick="myCheck()"> Receive Instant Notifications</li>
</ul>
<input id="form_email_alerts" type="hidden" value="">
<input id="form_sms_alerts" type="hidden" value="">
<input id="form_offers_alerts" type="hidden" value="">
<input id="form_instant_alerts" type="hidden" value="">
I could add this 4 times or more with different ID but can I just loop through so be quicker and cleaner? I have tried but cant get it to change the hidden values. Thanks
As your IDs have a good format, you can just loop all checkboxes:
document.querySelectorAll('input[type=checkbox]').forEach(e => {
e.onchange = () => document.getElementById('form_' + e.id).value = e.checked ? 'YES' : 'NO';
});
<ul class="confirm details">
<li class="selected">Please confirm your contact preferences</li>
<li><input type="checkbox" id="email_alerts" value="YES"> Receive email alerts</li>
<li><input type="checkbox" id="sms_alerts" value="NO"> Receive free SMS alerts</li>
<li><input type="checkbox" id="offers_alerts" value="NO"> Receive offers and discounts</li>
<li><input type="checkbox" id="instant_alerts" value="NO"> Receive Instant Notifications</li>
</ul>
<input id="form_email_alerts" type="text" value="NO">
<input id="form_sms_alerts" type="text" value="NO">
<input id="form_offers_alerts" type="text" value="NO">
<input id="form_instant_alerts" type="text" value="NO">
You could do that by looping on all your checkboxes and adding an event listener on each, updating the other input fields.
PS: here I removed the hidden type for you to see the value of every input.
document.querySelectorAll('ul.details li input').forEach(input => {
input.addEventListener('change', function(){
let finalInput = document.querySelector('#form_'+input.id);
if(finalInput) finalInput.value = input.checked ? 'YES' : 'NO';
});
});
<ul class="confirm details">
<li class="selected">Please confirm your contact preferences</li>
<li><input type="checkbox" id="email_alerts" value="YES"> Receive email alerts</li>
<li><input type="checkbox" id="sms_alerts" value="NO"> Receive free SMS alerts</li>
<li><input type="checkbox" id="offers_alerts" value="NO"> Receive offers and discounts</li>
<li><input type="checkbox" id="instant_alerts" value="NO"> Receive Instant Notifications</li>
</ul>
<input id="form_email_alerts" value="">
<input id="form_sms_alerts" value="">
<input id="form_offers_alerts" value="">
<input id="form_instant_alerts" value="">
This question already has answers here:
Escape square brackets when assigning a class name to an element
(4 answers)
Closed 5 years ago.
I have a set of checkboxes like this
<li id="apptax-15">
<label class="selectit">
<input value="15" type="checkbox" name="tax_input[apptax][]" id="in-apptax-15"> No</label>
</li>
generated by WordPress API now I need to select the chech box by it's name attribute like following but I am getting this error
Syntax error, unrecognized expression:
input:checkbox[name=tax_input[apptax][]]
can you please let me know how to fix this
$('input:radio[name=r3]').on('change', function() {
$('input:checkbox[name=tax_input[apptax][]]').removeAttr('checked');
console.log('changes happend')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="" data-wp-lists="list:" class=" form-no-clear">
<li id="apptax-15">
<label class="selectit">
<input value="15" type="checkbox" name="tax_input[apptax][]" id="in-apptax-15"> No</label>
</li>
<li id="apptax-17">
<label class="selectit">
<input value="17" type="checkbox" name="tax_input[apptax][]" id="in-apptax-17"> Maybe</label>
</li>
<li id="apptax-16">
<label class="selectit">
<input value="16" type="checkbox" name="tax_input[apptax][]" id="in-apptax-16"> Yes</label>
</li>
</ul>
<div class="panel-body">
<label class="checkboxer">
<input type="radio" name="r3" value="15"> No</label>
<label class="checkboxer">
<input type="radio" name="r3" value="17"> Maybe</label>
<label class="checkboxer">
<input type="radio" name="r3" value="16"> Yes</label>
</div>
You need to escape the brackets like this:
$('input:checkbox[name=tax_input\\[apptax\\]\\[\\]]').removeAttr('checked');
See working jsfiddle:
https://jsfiddle.net/8hw051vu/
You can just enclosed the name by "" like $('input:checkbox[name="tax_input[apptax][]"]')
$(document).ready(function(){
$('input:checkbox[name="tax_input[apptax][]"]').removeAttr('checked');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input value="15" type="checkbox" name="tax_input[apptax][]" id="in-apptax-15" checked/> No
Some characters simply won't work well on css selectors. If you can't avoid using them, then use an id if it's an unique element or create a class if they are expected to be many.
If you are in a hurry use #Ingal S. solution
Select the checkbox by the value of radio button to value of checkbox.
$('input:radio[name=r3]').on('change', function() {
var value = $(this).val()
$('input:checkbox[value='+value+']').removeAttr('checked');
console.log('changes happend')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="" data-wp-lists="list:" class=" form-no-clear">
<li id="apptax-15">
<label class="selectit">
<input value="15" type="checkbox" name="tax_input[apptax][]" id="in-apptax-15"> No</label>
</li>
<li id="apptax-17">
<label class="selectit">
<input value="17" type="checkbox" name="tax_input[apptax][]" id="in-apptax-17"> Maybe</label>
</li>
<li id="apptax-16">
<label class="selectit">
<input value="16" type="checkbox" name="tax_input[apptax][]" id="in-apptax-16"> Yes</label>
</li>
</ul>
<div class="panel-body">
<label class="checkboxer">
<input type="radio" name="r3" value="15"> No</label>
<label class="checkboxer">
<input type="radio" name="r3" value="17"> Maybe</label>
<label class="checkboxer">
<input type="radio" name="r3" value="16"> Yes</label>
</div>
I am working on my personal site and I am trying to nest my radio buttons.
I know I am supposed to have javascript running to do what I need it to do but I cant get a clear answer. What I am trying to do is as follows.
Options number 2 and 6 both have sub options to go with them. But I want that if i select 1 or 3-5 or 7 then the user cannot select any of the subs. and if the user selects a sub by mistake and tries to select one of the aforementioned numbers then it will clear the sub selection. please help. Or at lease can some one point me in the right direction? thanks so much.
<div class="one">
<div class="two">
<div class="three">
<div class="four">
<label class="five six">Section</label>
<div class="seven">
<label class="ten">
<input value="option_1" name="radios" type="radio" />
option 1</label>
</div>
<div class="seven">
<label class="ten">
<input value="option_2" name="radios" type="radio" />
option 2</label>
<br>
<div class="one">
<div class="one">
<div class="two">
<div class="three">
<div class="four">
<div class="eight">
<label class="nine">
<input type="radio" name="inline radio" value="sub_1">
Sub 1</label>
<label class="nine">
<input type="radio" name="inline radio" value="sub_2">
Sub 2</label>
<label class="nine">
<input type="radio" name="inline radio" value="sub_3">
Sub 3</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="seven">
<label class="ten">
<input value="option_3" name="radios" type="radio" />
option 3</label>
</div>
<div class="seven">
<label class="ten">
<input value="option_4" name="radios" type="radio" />
option 4</label>
</div>
<div class="seven">
<label class="ten">
<input value="option_5" name="radios" type="radio" />
option 5</label>
</div>
<div class="seven">
<label class="ten">
<input value="option_6" name="radios" type="radio" />
option 6</label>
<div class="one">
<div class="two">
<div class="three">
<div class="four">
<div class="eight">
<label class="nine">
<input type="radio" name="inline radio" value="sub_1">
Sub 1</label>
<label class="nine">
<input type="radio" name="inline radio" value="sub_2">
Sub 2</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="seven">
<label class="ten">
<input value="option_7" name="radios" type="radio" />
option 7</label>
</div>
</div>
</div>
</div>
</div>
Here's a little something using Jquery that might work if I understood your requirements correctly. The HTML is a dumbed down version of yours just to demonstrate the script.
<!doctype html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function(){
$("input[type=radio]").on("change",function(){
if($(this).hasClass("two") || $(this).hasClass("six") || $(this).hasClass("sub"))
$(".sub").removeAttr("disabled");
else
$(".sub").attr("checked",false).attr("disabled","disabled");
});
});
</script>
</head>
<body>
<form>
<input type=radio name="lvl1" class="one" value=""> Option 1<br>
<input type=radio name="lvl1" class="two" value=""> Option 2<br>
<input type=radio name="lvl2" class="sub two-sub" value=""> Sub 1<br>
<input type=radio name="lvl2" class="sub two-sub" value=""> Sub 2<br>
<input type=radio name="lvl2" class="sub two-sub" value=""> Sub 3<br>
<input type=radio name="lvl1" class="three" value=""> Option 3<br>
<input type=radio name="lvl1" class="four" value=""> Option 4<br>
<input type=radio name="lvl1" class="five" value=""> Option 5<br>
<input type=radio name="lvl1" class="six" value=""> Option 6<br>
<input type=radio name="lvl3" class="sub six-sub" value=""> Sub 1<br>
<input type=radio name="lvl3" class="sub six-sub" value=""> Sub 2<br>
<input type=radio name="lvl1" class="seven" value=""> Option 7<br>
</form>
</body>
</html>
Here's the fiddle to check online: https://jsfiddle.net/bds87fjt/
The same solution as above using pure Javascript:-
<!doctype html>
<html>
<head>
<script>
function disableSub(){
sub = document.querySelectorAll(".sub");
for(i=0; i<sub.length; i++){
sub[i].checked=false;
sub[i].disabled=true;
}
}
function enableSub(){
sub = document.querySelectorAll(".sub");
for(i=0; i<sub.length; i++){
sub[i].disabled=false;
}
}
</script>
</head>
<body>
<form>
<input type=radio name="lvl1" onclick=disableSub(); class="one" value=""> Option 1<br>
<input type=radio name="lvl1" onclick=enableSub(); class="two" value=""> Option 2<br>
<input type=radio name="lvl2" class="sub two-sub" value=""> Sub 1<br>
<input type=radio name="lvl2" class="sub two-sub" value=""> Sub 2<br>
<input type=radio name="lvl2" class="sub two-sub" value=""> Sub 3<br>
<input type=radio name="lvl1" onclick=disableSub(); class="three" value=""> Option 3<br>
<input type=radio name="lvl1" onclick=disableSub(); class="four" value=""> Option 4<br>
<input type=radio name="lvl1" onclick=disableSub(); class="five" value=""> Option 5<br>
<input type=radio name="lvl1" onclick=enableSub(); class="six" value=""> Option 6<br>
<input type=radio name="lvl3" class="sub six-sub" value=""> Sub 1<br>
<input type=radio name="lvl3" class="sub six-sub" value=""> Sub 2<br>
<input type=radio name="lvl1" onclick=disableSub(); class="seven" value=""> Option 7<br>
</form>
</body>
</html>
Here's the fiddle for above: https://jsfiddle.net/0omtop0t/
And here's another neat little solution using just HTML and CSS: http://jsfiddle.net/NhXUV/
Not sure, it'll work in your case though. Worth checking out.
I'd definitely go with JavaScript for this one.
Basically, you could write a function that would be called whenever a radio button from a div of the class, lets call it gotNestedStuff, has his selection changed. The toggle will show/hide the div with the class nestedStuff that contains the sub-options that can only be selected if the main option is.
Here's the basic function (with jQuery):
<script type="text/javascript">
//let's hide the nested stuff on page load
$(document).ready(function() {
$('.nestedStuff').hide();
});
//on click on an element that has class "gotNestedStuff", show it's hidden content
$('.gotNestedStuff .option').on('change', function(e) {
console.log($(e.relatedTarget));
$(e.target).parent('.gotNestedStuff').children('.nestedStuff').toggle();
});
</script>
Working with this HTML for example :
<div>
<div class="optionContainer">
<input class="option" type="radio" name="option" value="1">Option 1
</div>
<div class="optionContainer gotNestedStuff">
<input class="option" type="radio" name="option" value="2">Option 2<br>
<div class="optionContainer nestedStuff">
<input class="option" type="radio" name="option" value="2.1">Option 2.1<br>
<input class="option" type="radio" name="option" value="2.2">Option 2.2<br>
</div>
</div>
<div class="optionContainer">
<input class="option" type="radio" name="option" value="3">Option 3<br>
<div>
</div>
You could also call a function "onclick" from your element that would validate if an item with nested stuff hidden is selected, that it should show it to the user.
Ex. <input type="radio" onclick="myfunction()" />