How to disable input unless a radio button is clicked? - javascript

I'm not so familiar with Javascript and I know this to be a very easy question, but I can't figure out where I'm going wrong.
I'm trying to disable two input fields unless a radio button with the id "custom" is selected.
HTML
<input type="radio" name="period" value="week" /> Weekly
<input type="radio" name="period" value="fortnight" /> Fortnightly
<input type="radio" name="period" value="month" /> Monthly
<input type="radio" name="period" value="quarter" /> Quarterly
<input type="radio" name="period" value="year" /> Annually
<input type="radio" name="period" id="custom" value="one-time" onchange="datedis()"/
<input type="date" name="from" disabled /> to <input type="date" name="to" disabled />
Javascript
function datedis() {
if(document.getElementsById("custom").checked) {
document.getElementsByName("from").disabled = false;
document.getElementsByName("to").disabled = false;
} else {
document.getElementsByName("from").disabled = true;
document.getElementsByName("to").disabled = true;
}
}
Here is my code in JSFiddle.

Multiple issues:
Use onclick instead of onchange, and make sure to assign the event handler to all radio buttons, not just custom, otherwise clicking away from custom will not disable the input field.
See also: OnChange event handler for radio button (INPUT type="radio") doesn't work as one value
It's getElementById, not getElementsById.
There's no document.getElementByName.
In jsfiddle, define a function with window.foo = function() {...}, not function foo() {...} (because that code is embedded in onload).
FYC: http://jsfiddle.net/MEsGH/

Related

Clear textbox and radio buttons onclick with Javascript

<input id="firstLocation" type="radio" />
<label for="firstLocation">text</label>
<input id="secondLocation" type="radio" />
<label for="secondLocation">text</label>
<input class="cityName" id="locationName" type="text" value="" />
So basically, this is my html. What I want to do now, is to use JavaScript, not jQuery, to clear the text input field (if something had previously been entered) whenever the radio buttons are clicked and to uncheck the radio buttons whenever someone clicks onto the text field. I quickly found a jQuery solution, but got the task to use JavaScript instead. As I'm not having very much experience with JS, I can't wrap my head around it to get it to work.
Any thoughts?
Would appreciate very much.
You can use .querySelectorAll() and .querySelector() in order to find the elemnts and .addEventListener() to attach the event handlers:
document.querySelectorAll('#firstLocation, #secondLocation').forEach(function(ele, idx) {
ele.addEventListener('change', function(e) {
document.querySelector('#locationName').value = '';
});
});
document.querySelector('#locationName').addEventListener('input', function(e) {
document.querySelectorAll('#firstLocation, #secondLocation').forEach(function(ele, idx) {
ele.checked=false;
});
})
<input id="firstLocation" type="radio" />
<label for="firstLocation">text</label>
<input id="secondLocation" type="radio" />
<label for="secondLocation">text</label>
<input class="cityName" id="locationName" type="text" value="" />

How to assign the input from two radio buttons to a single field?

I am new in coding. I have two radio buttons. If a “yes” is selected in either from them a certain field (here kouAP) must be AUTOMATICALLY set to a value (in this case 0.56). The problems are:
how to make both radio buttons to set the value to a single field?
How to keep the wished value if one of the is “yes” and the other is “no”? No matter of the order of clicking.
My JQuery makes no sense :(
Thanks you
HTML
<label for="Pre002">ccs</lable>
<br />
<input type="radio" id="Pre002o" name="css" value="0">
<label for="Pre002o">none</label>
<input type="radio" id="Pre002d" name="css" value="4">
<label for="Pre002d">yes</label>
<br />
<label for="Pre066">mi</lable>
<br />
<input type="radio" id="Pre066a" name="mi" value="0">
<label for="Pre066a">yes</label>
<input type="radio" id="Pre066b" name="mi" value="1">
<label for="Pre066b">no</label>
<br />
<input id="kouAP" type=“text” name="kouAP" readonly="true" placeholder="kouAP">
<label for="kouAP">at least one yes</label>
JQuery
$('input[type=radio].css; input[type=radio].mi').click(function(e){
if ($(this).attr("id") == "Pre002d" || $(this).attr("id") == "Pre066a" ){
$("#kouAP").val(0.5677075);
}
else {
$("#kouAP").val(0);
}
});
There is nothing wrong with code.
Just provide the name of the element you listen the click from.
Replace:
$('input[type=radio].css; input[type=radio].mi').click(...);
With:
$('input').click(...);
or:
$('input[type=radio]').click(...);
to avoid future errors.
I just advice you to go through the basics again :)
EDIT
For the second question, I guess it's just a work around with if..else. Hope it helps.
$('input').click(function(e){
if ($('#Pre002d').is(':checked') || $('#Pre066a').is(':checked')){
$("#kouAP").val(0.5677075);
}
else{
$("#kouAP").val(0);
}
});

on Focus not working when textbox selected

I have a form here which id like the users to be able to select the radio button to choose a pre-defined amount option, or press the textbox (focus) to select the custom amount. The purpose of the javascript below is to clear the textbox when a predefined amount has been selected. It also allows users to CLICK the textbox (onfocus) to enter a custom amount in the CP_otheramount field (also use the radio button as a fallback).
It all seems to be working except for the onfocus. It works perfectly on load...but try this scenario:
Load the page, click inside the textbox but then decide to change your mind by selecting the value 3 radio button (64)...and then decide to press inside the onfocus textbox amount again... it become disabled and stops you from clicking inside or writing a number in!
Can anyone see the problem here at all? Its strange because it works on Stackoverflow just not on the live site. ANy help would be really appreciated.
Here is what has been created so far:
function activate() {
$('#other').prop('checked', true);
$('#other').trigger('click');
$('#theamount').focus();
}
$('input[name="am_payment"]').on('click', function() {
if ($(this).val() === '') {
$('input[name="CP_otheramount"]').val('');
$('#theamount').removeAttr("disabled");
} else {
$('#theamount').prop("disabled", "disabled");
$('input[name="CP_otheramount"]').val('');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="radio" name="am_payment" value="3" checked="checked"> <strong>64</strong>
<input type="radio" name="am_payment" value="11" checked="checked"> <strong>100</strong>
<input type="radio" name="am_payment" value="32" checked="checked"> <strong>250</strong>
<input type="radio" value="" name="am_payment" id="other">
<label>Other</label>
<span onclick="activate();"><input type="text" name="CP_otheramount" value="" id="theamount" disabled="disabled"/></span>
The problem with your code is that you are checking every radio button without un-checking them.
function activate() {
// $('#other').prop('checked', true); Remove this line;
$('#other').trigger('click');
$('#theamount').focus();
}
$('input[name="am_payment"]').on('click', function() {
if ($(this).val() === '') {
$('input[name="CP_otheramount"]').val('');
$('#theamount').removeAttr("disabled");
} else {
$('#theamount').prop("disabled", "disabled");
$('input[name="CP_otheramount"]').val('');
}
});
And also
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Only check one, or none by Default -->
<input type="radio" name="am_payment" value="3" checked = "checked"> <strong>64</strong>
<input type="radio" name="am_payment" value="11"> <strong>100</strong>
<input type="radio" name="am_payment" value="32"> <strong>250</strong>
<input type="radio" value="" name="am_payment" id="other">
<label>Other</label>
<span onclick="activate();"><input type="text" name="CP_otheramount" value="" id="theamount" disabled="disabled"/></span>
UPDATE:
It was working for me but I don't know why it's not working for you, so I rewrote the functions..See if this works for you.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="radio" name="am_payment" value="3" checked = "checked"> <strong>64</strong>
<input type="radio" name="am_payment" value="11"> <strong>100</strong>
<input type="radio" name="am_payment" value="32"> <strong>250</strong>
<input type="radio" value="" name="am_payment" id="other">
<label>Other</label>
<span id="toggle"><input type="text" name="CP_otheramount" value="" id="theamount" disabled="disabled"/></span>
<script>
function activate(){
$('#theamount').attr('disabled',false);
$('#theamount').focus();
$('#other').click();
}
function deactivate(){
$('#theamount').val('');
$('#theamount').attr('disabled',true);
}
$('#toggle').click(function(){
activate();
});
$('input[name="am_payment"]').change(function(){
if($(this).val() != ""){
deactivate();
}else{
activate();
}
});
</script>

jQuery Radio Button function not working properly

I have a form with two radio buttons and a submit button which leads to a specific form based upon the user's selection.
I wanted to use jQuery to change between the two buttons but have gotten myself a bit lost.
Here is my javascript from another file in the proj:
function goTo()
{
var yesButton = $('#yesRad');
var noButton = $('#noRad');
if (yesButton[0].checked)
{
submitForm('yesForm') && noButton.Checked==false;
}
else (noButton[1].checked)
{
submitForm('noForm') && yesButton.Checked==false;
}
Inside the jsp I have the following code:
<form:form action="interested" commandName="user" name="yesForm" id="yesForm">
<input type="hidden" name="state" value="<c:out value="${requestScope.state}"/>" />
<input type="hidden" id="address" name="address" value="${user.address}" />
<input type="hidden" name="mode" value="1" />
<input type="radio" name ="radio"id="yesRad" value="yesForm" checked="checked" />Yes<br>
</form:form>
<form:form action="notinterested" commandName="user" name="noForm" id="noForm">
<input type="hidden" name="state" value="<c:out value="${requestScope.state}"/>" />
<input type="hidden" id="address" name="address" value="${user.address}" />
<input type="hidden" name="mode" value="1" />
<input type="radio" name="radio" id="noRad" value="noForm" />No<br>
</form:form>
Submit
<script>
$("#yesRad").change(function(){
var $input = $("#yesRad");
var $inputb = $("#noRad");
if($inputb.is(':checked'))
$("#yesRad").prop("checked", false);
else if($input.is(':checked'))
$("#yesRad").prop("checked",true) && $("#noRad").prop("checked",false);
});
</script>
I have gotten some functionality out of my jQuery but it's definitely far from correct..
I hope I was clear and thorough in my question. Thanks in advance!!
To begin with, don't use prop, use attr. prop is slower.
You've defined variables so let's not look them up again. In your if/else statement just use the variables.
I'm not entirely sure what you're trying to do with the &&. I suspect you're trying to set the value of the two inputs. If so, they should be separate statements. If inputb is checked there is no reason to set it to checked, so we can remove that piece.
You probably want this change to fire on both inputs.
$("#yesRad, #noRad").change(function(){
var $input = $("#yesRad");
var $inputb = $("#noRad");
if($inputb.is(':checked')){
$input.attr("checked", false);
} else if($input.is(':checked')){
$inputb.attr("checked",false);
}
});
Solved: Using javascript and taking the radio buttons out of the separate form elements.
First let's take a look at the JSP form elements involved:
<form:form action="interested" commandName="user" name="yesForm" id="yesForm">
<input type="hidden" name="state" value="<c:out value="${requestScope.state}"/>" />
<input type="hidden" id="address" name="address" value="${user.address}" />
</form:form>
<form:form action="notinterested" commandName="user" name="noForm" id="noForm">
<input type="hidden" name="state" value="<c:out value="${requestScope.state}"/>" />
<input type="hidden" id="address" name="address" value="${user.address}" />
</form:form>
<input name="radio" type="radio" id="Yes" value="yes" />Yes<br>
<input name="radio" type="radio" id="No" value="no"/>No<br>
What I did here was simply take the radio buttons out of the separate forms and grouped them together...pretty obvious; now let's look at the javascript file.
function goHere()
{
var yesButton = $('#Yes');
var noButton = $('#No');
var str ="Please select an option first then press the 'Submit' button";
if (yesButton[0].checked)
{
submitForm('yesForm');
}
else if (noButton[0].checked)
{
submitForm('noForm');
}
else
{
document.write(str.fontcolor.font("red"));
}
}
As you can see the function 'goHere();' is going to tell the submit button in the following code where we want to go based on the user's selection on our radio buttons.
Here's the call from our javascript function in a submit button on the form...
<div class="button-panel" id="Submit"><span class="buttons buttons-left"></span>
<button type="button" class="buttons buttons-middle" name="submitBtn" onClick="goHere();">Submit</button>
<span class="buttons buttons-right"></span>
That's it!! Simply put; sometimes, while it's invaluable to learn something new, if it's not broke--etc. Hope this helps someone later on down the line!

Not able to get the value of Radio Button

<input type="radio" name="animal" id="cat" value="Cat" />
<label for="cat">Cat</label>
<input type="radio" name="animal" id="radio-choice-2" value="choice-2"/>
<label for="radio-choice-2">Dog</label>
<input type="radio" name="animal" id="radio-choice-3" value="choice-3" />
<label for="radio-choice-3">Hamster</label>
<input type="radio" name="animal" id="radio-choice-4" value="choice-4" />
<label for="radio-choice-4">Lizard</label>
<input type="button" value="Get Radio Button Value" onclick="getValue();"
I want to get the value of selected Radio Button on click of button I had written the code
function getValue () {
alert("Value is :"+$('input[name=animal]:checked').val());
}
But its not working and getting Undefined
Update:
I have used js of Jquery and jquerymobile
for jquery its for fine but as i am using it for mobile app so i need both the js library so in second case it didnot work.
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
[Solved]
Hi I think you are getting the value without checking any radio button.
Load your page then select any one of radio button and then call getValue function
Alternatively you can put any radio button selected by default.
e.g.
replace first radio button with
<input type="radio" name="animal" id="cat" value="Cat" checked="true"/>
<label for="cat">Cat</label>
Try this
$("#myform input[type='radio']:checked").val();
OR
var myRadio = $('input[name=myRadio]');
//Use the filter() function, not find(). (find() is for locating child elements, whereas //filter() searches top-level elements in your selection.)
var checkedValue = myRadio.filter(':checked').val();

Categories