Clearing a textbox field when a radio button is selected in Javascript - javascript

I have a web form which allows users to donate money using the predefined radio buttons with a value assigned to them (all different numbers). I also have a choose your own amount textfield which they can write in a custom amount they wish to donate. I want to clear the custom textfield if a user selects a predefined choice.
So far I have created this:
HTML:
<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"><label>Other</label>
<input type="text" name="CP_otheramount" value="" id="theamount" disabled="disabled"/>
JAVASCRIPT:
$('input[name="am_payment"]').on('click', function() {
if ($(this).val() === '') {
$('#theamount').removeProp("disabled");
}
else {
$('#theamount').prop("disabled", "disabled");
$('input[name="CP_otheramount"]').val("");
}
});
But basing it on a value === true for value="" just doesn't seem right.
Is there a way to improve this?
Thanks

To disable/enable an element you need to set the value of the disabled property to true/false, removing the property doesn't work so you need
$('input[name="am_payment"]').on('click', function() {
if ($(this).val() === '') {
$('#theamount').prop('disabled', false);
} else {
$('#theamount').prop("disabled", true).val('');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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">
<label>Other</label>
<input type="text" name="CP_otheramount" value="" id="theamount" disabled="disabled" />

Use removeAttr instead of removeProp and I have modified your code to accept amounts on textbox based on radio button selected
$('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($(this).val());
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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"><label>Other</label>
<input type="text" name="CP_otheramount" value="" id="theamount" disabled="disabled"/>
Update
From your comments I hope you are expecting below functionality.
$('#theamount').on('focus', function() {
$("input:radio").prop("checked",false);
$("input[value='']").prop("checked",true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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"><label>Other</label>
<input type="text" name="CP_otheramount" value="" id="theamount" disabled="disabled"/>

Related

Radio buttons in the form, if one checked then unchecked the others?

I have three different group of radio buttons in my form. If I click on the radio button I don't see attribute checked set to true. I'm wondering what is the best way to handle this in JQuery/JavaScript? Here is example:
$("input[type=radio]").on('click', function() {
var secondClick = true;
$(this).change(function() {
secondClick = false;
});
$(this).click(function() {
if (secondClick) {
$(this).prop("checked", false);
}
secondClick = true;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="myForm" id="myForm" method="POST" action="#">
<div class="formItem">
<label for="evaluation">Evaluation</label>
<input type="radio" name="frm_eval" id="frm_eval1" value="0" />Yes
<input type="radio" name="frm_eval" id="frm_eval2" value="1" />No
</div>
<div class="formItem">
<label for="conditions">Conditions</label>
<input type="radio" name="frm_cond" id="frm_cond1" value="0" />Good
<input type="radio" name="frmhs_cond" id="frm_cond2" value="1" />Fair
<input type="radio" name="frm_cond" id="frm_cond3" value="2" />Poor
</div>
<div class="formItem">
<label for="responses">Responses</label>
<input type="radio" name="frm_res" id="frm_res1" value="0" />Good
<input type="radio" name="frm_res" id="frm_res2" value="1" />Fair
<input type="radio" name="frm_res" id="frm_res3" value="2" />Poor
</div>
</form>
Function above did not change/set the attribute checked=true on the element that I clicked. I would like to see selected element with an attribute checked true and all other check boxes to be set to false.
var radioInputs = $("#myForm input[type=radio]")
radioInputs.on('change',function() {
var $this = $(this)
if ($this.is(':checked')) {
radioInputs.not($this).removeAttr('checked')
}
})
Your second input in conditions was named frmhs_cond instead of frm_cond
<form name="myForm" id="myForm" method="POST" action="#">
<div class="formItem">
<label for="evaluation">Evaluation</label>
<input type="radio" name="frm_eval" id="frm_eval1" value="0" />Yes
<input type="radio" name="frm_eval" id="frm_eval2" value="1" />No
</div>
<div class="formItem">
<label for="conditions">Conditions</label>
<input type="radio" name="frm_cond" id="frm_cond1" value="0" />Good
<input type="radio" name="frm_cond" id="frm_cond2" value="1" />Fair
<input type="radio" name="frm_cond" id="frm_cond3" value="2" />Poor
</div>
<div class="formItem">
<label for="responses">Responses</label>
<input type="radio" name="frm_res" id="frm_res1" value="0" />Good
<input type="radio" name="frm_res" id="frm_res2" value="1" />Fair
<input type="radio" name="frm_res" id="frm_res3" value="2" />Poor
</div>
</form>

How do I grab the selected radiobox value from a particular form?

I have some generated HTML along the lines of this.
<form id="form_56">
<input type="radio" name="option" value="0">
<input type="radio" name="option" value="1">
<input type="radio" name="option" value="2">
<input type="radio" name="option" value="3">
<input type="radio" name="option" value="4">
<input type="radio" name="option" value="5">
<input type="radio" name="option" value="6">
</form>
The form id can be anything, but I want to take a form ID and return the selected value from 0 to 6.
I tried following the questions here, but they didn't seem to translate easily to a specific form.
$('#form_56:radio[name=option]:checked').val();
I'm able to use the selector to grab the proper form, but everything I've attempted to get the selected value has returned undefined.
Thanks for your time.
First, you need to change the colon to a space or " > ".
Second you need to change radio to input.
$('#form_56 input[name=option]:checked').val();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form_56">
<input type="radio" name="option" value="0">
<input type="radio" name="option" value="1">
<input type="radio" name="option" value="2">
<input type="radio" name="option" value="3">
<input type="radio" name="option" value="4">
<input type="radio" name="option" value="5">
<input type="radio" name="option" value="6">
</form>
<a href="javascript:console.log($('#form_56 input[name=option]:checked').val());">
<button>Test</button>
</a>
$("#form_56 input:radio[name='option']").val()
You need an event for listening when it changes
see example
$(function() {
$("#form_56 input:radio[name='option']").click(function() {
var val = $(this).val();
alert(val);
});
});
https://jsfiddle.net/rodrigo/cp8rd7h0/
problem in your code: on change event not assign to radio button so undefined alert popup
here is solution:
$(document).ready(function () {
$('input[type=radio]').on('change', function () {
alert($('input[name=option]:checked', '#form_56').val());
});
});
For any form:
$('form>input[type="radio"]:checked').val()
With id:
$('#form_56>input[type="radio"]:checked').val()
It will return selected value or undefined, if no value selected.
Good luck!
function getSelectedValue()
{
return $('form>input[type="radio"]:checked').val();
}
$(function() {
$('button').on(
'click',
function() {
console.log(getSelectedValue() + ' selected');
}
);
});
form {display: inline}
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<form id="randomId-839054763">
<input type="radio" name="option" value="0">
<input type="radio" name="option" value="1">
<input type="radio" name="option" value="2">
<input type="radio" name="option" value="3">
<input type="radio" name="option" value="4">
<input type="radio" name="option" value="5">
<input type="radio" name="option" value="6">
</form>
<button>Log value</button>

Checking if a particular checkbox in a checkbox list is checked

I have a list of checkboxes:
<input name="choice" type="checkbox" id="choice1" value="A" />
<input name="choice" type="checkbox" id="choice2" value="B" />
<input name="choice" type="checkbox" id="choice3" value="C" />
<input name="choice" type="checkbox" id="choice4" value="D" />
Name is the same for all but id is different.
I need to check if a particular checkbox (for example the one with id=choice3 is checked.
Tried
if (this.choice.id === "choice3" && this.choice[2].checked) {
alert("checked!");
}
but it does not work - the alert is never reached
P.S. I need to use javascript not jquery
Thats how you do it without jQuery:
Suppose your form is like this:
<form id="myForm" action="test.php">
<input name="choice" type="checkbox" id="choice1" value="A"/>
<input name="choice" type="checkbox" id="choice2" value="B"/>
<input name="choice" type="checkbox" id="choice3" value="C"/>
<input name="choice" type="checkbox" id="choice4" value="D"/>
<input type="button" onclick="validate();" value="Submit form">
</form>
You can do the validation on submit this way:
function validate() {
if (document.getElementById('choice3').checked) {
alert("checked");
} else {
alert("You didn't check it! ");
}
}

Enabling and disabling checkboxes with javascript

I have been trying to figure out the solution to my problem for a few hours now. I'm still fairly new to Javascript, so please forgive me if I sound stupid. Sadly I don't know jQuery and I'm starting to think that it's inhibiting me to come up with a solution.
What I am trying to do is have a check box that enables disabled radio buttons. If that makes sense.
Example:
Choice 1
sub choice
sub choice
sub choice
I would like to be able to click the first checkbox (Choice 1) to enable the sub choices. If it's not clicked, the sub choices should be disabled. :-)
Here is what I've got so far:
<script>
function enableRadios(x) {
var formElement = eval("checkbox" + x)
if (formElement[0].disabled) {
formElement[0].disabled = false
formElement[1].disabled = false
} else {
formElement[0].disabled = true
formElement[1].disabled = true
}
}</script>
<body><input type="checkbox" name="main" value="main" onClick="enableRadios(x)">
<input disabled type="radio" value="1" name="x">
<input disabled type="radio" value="2" name="x">
<input disabled type="radio" value="3" name="x">
<input disabled type="radio" value="4" name="x">
<input disabled type="radio" value="5" name="x">
<input disabled type="radio" value="6" name="x"></body>
I really appreciate your help!
You need to pass a string containing the radio name 'x', not pass a variable x:
<script>
function toggleRadios(name) {
var elems = document.getElementsByName(name);
for(i=0; i<elems.length; i++) {
elems[i].disabled = !elems[i].disabled;
}
}
</script>
<input type="checkbox" name="main" value="main" onclick="toggleRadios('x')">
<input disabled type="radio" value="1" name="x">
<input disabled type="radio" value="2" name="x">
<input disabled type="radio" value="3" name="x">
<input disabled type="radio" value="4" name="x">
<input disabled type="radio" value="5" name="x">
<input disabled type="radio" value="6" name="x">
http://jsfiddle.net/samliew/B6tF7/

JavaScript radio buttons

I have a few radio buttons, and when I select one of them, I also have to check another one.
For example, if I select yes on a radio button, another radio button must be automatically checked with no.
I tried a few scripts but don't seem to work.
Does anyone know a solution? I'm new in JS.
Thanks in advance!
             > Live Demo <              
<!--HTML-->
<input type="radio" name="group_1" value="yes" id="r1">Yes<br>
<input type="radio" name="group_1" value="no" id="r2">No<br>
<br>
<input type="radio" name="group_2" value="yes" id="r3">Yes<br>
<input type="radio" name="group_2" value="no" id="r4">No<br>​
//Script
$("input[name='group_1']").click(function(){
if(this.value=="yes"){
$("input#r4").attr("checked",true);
}else{
$("input#r3").attr("checked",true);
}
});
$("input[name='group_2']").click(function(){
if(this.value=="yes"){
$("input#r2").attr("checked",true);
}else{
$("input#r1").attr("checked",true);
}
});​
I'm not very certain on what you are trying to achieve but by using the "name" attribute this automatically happens...when you check one radio...the others with the same name get set to unchecked.
<input type="radio" name="someoption" value="0" />0
<input type="radio" name="someoption" value="1" />1
<input type="radio" name="someoption" value="2" />2
checking any one of the above will cause the other 2 to be unchecked
unless do you may be mean checkboxes or multiple option sets ?
javascript:
$('#myradio1').bind('change', function () {
$('#myradio3').attr('checked', 'checked');
});
html
<input type="radio" name="cols1" value="1" id="myradio1" />
<input type="radio" name="cols1" value="2" id="myradio2" />
<input type="radio" name="cols2" value="1" id="myradio3" />
<input type="radio" name="cols2" value="2" id="myradio4" />
see working example at http://jsfiddle.net/9jXbv/
For HTML markup like below:
<div>
<input type="radio" name="one" value="yes"> yes
<input type="radio" name="one" value="no"> no
</div>
<div>
<input type="radio" name="two" value="yes"> yes
<input type="radio" name="two" value="no"> no
</div>
you can use this JavaScript code:
$(":radio").on("change", function() {
var that = this;
$(":radio").filter(function() {
return this.value == "no" && this.name != that.name;
}).prop("checked", true);
});​
DEMO: http://jsfiddle.net/nKLMX/
With jquery:
​$("#radio1").change(function() {
$("#radio2").removeAttr("checked");
});​​​
http://jsfiddle.net/
I've mocked up a pure JS solution to this ( No libraries )
<input type="radio" name="g1" value="1" />Yes
<br />
<input type="radio" name="g1" value="0" />No
<br /><br />
<input type="radio" name="g2" value="1" />Yes
<br />
<input type="radio" name="g2" value="0" />No
<script type="text/javascript">
var g1 = document.getElementsByName('g1'); // store g1 elements
var g2 = document.getElementsByName('g2'); // store g2 elements
// handle click functionality
function radio_checked_event(obj, f) {
if(obj.addEventListener) {
obj.addEventListener('click', f, false);
} else if(obj.attachEvent) {
obj.attachEvent('onclick', f);
}
}
// when you click on g1 yes
radio_checked_event(g1[0], function() {
//set g1 no to checked
g2[1].setAttribute('checked', 'checked');
});
</script>

Categories

Resources