I want to make the input field read only on the base of other input field value, for example,
<form action="">
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female <br/>
Age: <input type="text" name="age"><br>
</form>
If someone choose Female, then the age input should become read only, means that it should be fade out then no value can be entered. Is this possible, and how?
Have you tried using JQuery? try this
$('input[type=radio][name=sex]').change(function() {
if (this.value == 'female') {
$("#AgeId").prop("readonly",true);
}
else{
$("#AgeId").prop("readonly",false);
}
});
There are several options on this, but basically if you want a fade effect you need a color to go along with it to display a transition. My answer is an implementation of jQuery disable enable click event with fade
JQuery:
$('input[type=radio]').click(function () {
if ($(this).val() == "female") {
// disable input
$('input[name=age]').fadeOut(20, function () {
$(this).prop('disabled', true);
$(this).css('background', '#c0c0c0').fadeIn(1000);
});
} else {
//enable input
$('input[name=age]').prop('disabled', false);
$('input[name=age]').css('background', '#ffffff');
}
});
Here is a demonstration.
EDIT:
After playing with this a little bit more I changed the animation lengths to look more natural.
In simple way,you can do disable in javascript function.
<script language="javascript">
function female_CLK(){
document.getElementById("age").readOnly = true;
document.getElementById("age").style.backgroundColor = "#CCCCCC";
}
</script>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female" onclick="female_CLK()">Female <br/>
Age: <input type="text" name="age" id="age"><br>
Related
I have three radio each one has name started with delivery_option and a submit button with css class continue. I want to test if a radio is checked the button must be enabled, otherwise it should be disabled.
i made the code below
$(document).ready(function() {
$('#checkout-delivery-step input:radio').each(function() {
if ($("input:radio[name*='delivery_option']:checked").length != 0) {
$('.continue').prop('disabled', false);
} else {
$('.continue').prop('disabled', true);
}
});
});
but it does not work, what was the issue?
You are running the code only once. The code has to be run every time when the radio button is clicked or changed. So you need to use the following:
// Make this a function.
function checkProgress() {
if ($("input:radio[name*='delivery_option']:checked").length != 0) {
$('.continue').prop('disabled', false);
} else {
$('.continue').prop('disabled', true);
}
}
$(function () {
// Set the status once the doc loads.
checkProgress();
// Set it again when any of the radio buttons are clicked.
$("input:radio[name*='delivery_option']").on("click change", checkProgress);
});
Snippet
// Make this a function.
function checkProgress() {
if ($("input:radio[name*='delivery_option']:checked").length != 0) {
$('.continue').prop('disabled', false);
} else {
$('.continue').prop('disabled', true);
}
}
$(function () {
// Set the status once the doc loads.
checkProgress();
// Set it again when any of the radio buttons are clicked.
$("input:radio[name*='delivery_option']").on("click change", checkProgress);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Group 1</h3>
Option 1: <input type="radio" name="delivery_option_1" />
Option 2: <input type="radio" name="delivery_option_1" />
Option 3: <input type="radio" name="delivery_option_1" />
<h3>Group 2</h3>
Option 1: <input type="radio" name="delivery_option_2" />
Option 2: <input type="radio" name="delivery_option_2" />
Option 3: <input type="radio" name="delivery_option_2" />
<p>Submit?</p>
<input type="button" value="Submit" class="continue" disabled />
You can try something like this with removeAttr which will remove the attribute from any element which is already set.
Also, for the radio you can do this way, once it is clicked then you can enable the button because it doesn't provide a way to deselect it.
Finally, the name for elements can be the same if it is a group and only the id must be unique. Check here.
So, proper code will be
<label for="delivery_option1">Option1:</label><input type="radio" id="delivery_option1" name="delivery_option" />
<label for="delivery_option2">Option2:</label> <input type="radio" id="delivery_option2" name="delivery_option" />
<label for="delivery_option3">Option3:</label><input type="radio" id="delivery_option3" name="delivery_option" />
$(function(){
$("input:radio[name*='delivery_option']").click(function(){
$(".continue").removeAttr("disabled");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Option1: <input type="radio" name="delivery_option1" />
Option2: <input type="radio" name="delivery_option2" />
Option3: <input type="radio" name="delivery_option3" />
<input type="button" value="Submit" class="continue" disabled />
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>
guys I tried a lot for this code but nothing come up for conversion from javascript to jquery..
This code is irrelevant cuz u find this in working fiddle.. I added this chunk of code cuz stackoverflow dont allow me to post without a code..
<div class="rButtons">
<input type="radio" name="numbers" value="10" onclick="uncheck();" />10
<input type="radio" name="numbers" value="20" onclick="uncheck();" />20
<input type="radio" name="numbers" value="other" onclick="check(this);"/>other
<input type="text" id="other_field" name="other_field" onblur="checktext(this);"/>
</div>
Check this fiddle
http://jsfiddle.net/gDxqj/
It is working well. on clicking "other" radio button the text field comes up and on clicking any other radio button it disappears.. This is the function of this script and it is working well..
Now when i tried changing it to jquery code it died.. I can show what code i made in jquery but to no help..
Fiddle for the same will help a lot..
Thanks in advance..
This is what i did
<script>
var $radios = $('input:radio[name=numbers]');
if ($radios.is(':checked') === true) {
$("#other_field").show();
}
else
{
$("#other_field").hide();
}
</script>
I put it put that in a function and invoke it in "onchange" of radiobutton but not worked
$(':radio').on('change', function () {
$('#other_field')[$(this).val() === 'other' ? 'show' : 'hide']();
});
$('#other_field').on('blur', function () {
var val = $(this).val();
if(isNaN(val)) {
alert('only numbers are allowed..');
}
else if(parseInt(val, 10) % 10 > 0) {
alert('only multiples of 10..');
}
});
with:
<div class="rButtons">
<input type="radio" name="numbers" value="10" /> 10
<input type="radio" name="numbers" value="20" /> 20
<input type="radio" name="numbers" value="other" />other
<input type="text" id="other_field" name="other_field" />
</div>
demo: http://jsfiddle.net/BZGsw/
You just need to remove the onclick and onblur from your inputs and attach the events through jQuery:
$(function(){
$('.rButtons').on('click', 'input[type="radio"]', function(ev){
var val = $(this).val();
val == 'other' ? check(this) : uncheck();
});
$('.rButtons').on('blur', '#other_field', function(ev){
checktext(this);
});
});
See Demo
You can use .change() to bin the change event to check the state of the selected radio button then apply .toggle() on #other_field to show or hide it.
#other_field {
display: none;
}
<div class="rButtons">
<input type="radio" name="numbers" value="10">10
<input type="radio" name="numbers" value="20">20
<input type="radio" name="numbers" value="other">other
<input type="text" id="other_field" name="other_field">
</div>
$("[name=numbers]").change(function() {
$("#other_field").toggle(this.value === "other");
});
$("#other_field").change(checktext);
I modified your CSS to use display set to none instead of visibility.
See it here.
I'm using this in a form to check whether a radio button group has a certain value (Yes/No). The HTML for one of these is:
<form id="registerHere">
<div class="control-group">
<label class="radio">
<input type="radio" value="Yes" name="freemedia">
Yes
</label>
<label class="radio">
<input type="radio" value="No" name="freemedia" checked="checked">
No
</label>
</div></form>
And I'm using the following JS (jQuery.validate.js is included):
<script type="text/javascript">
$(document).ready(function(){});
$("#registerHere").validate({
rules:{
freemedia:{
required:true,
equalTo: "Yes"
},
},
messages:{
freemedia:{
required:"Please select",
equalTo:"Please apply to the 'freemedia' group first.</a>"
},
},
});
});
</script>
However, it is not checking the value correctly, as it always shows me the message, regardless of whether 'Yes' or 'No' is checked.
Where am I going wrong?
I cleaned up some of your jquery, you had a few errors in there.
Also, digging around in the plugin I noticed that you can use the 'equalTo' parameter to specify which control is required. It just uses the 'equalTo' as a selector for a query. So if you treat your 'equalTo' setting as a jquery selector, it should work. It may be a bit of a hack, but I had it working.
All you need to do is assign an id to your radio buttons and you should be good to go
<div class="control-group">
<label class="radio">
<input id="chkYes" type="radio" value="Yes" name="freemedia" />
Yes
</label>
<label id="chkNo" class="radio">
<input type="radio" value="No" name="freemedia" />
No
</label>
<input type="submit" value="Submit" />
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#registerHere").validate({
rules:
{
freemedia:
{
required: true,
equalTo: "#chkYes"
}
},
messages:
{
freemedia:
{
required: "Please select",
equalTo: "Please apply to the 'freemedia' group first."
}
}
});
});
</script>
You want to check your value selected at the time of form submission ,That's the good way to do it Give a predefined selected radio button and then check the selected Radio at the time of form sub mission that what done here
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<input type="radio" name="sex" value="Male" checked>Male</input>
<input type="radio" name="sex" value="Female">Female</input>
<input type="radio" name="sex" value="Unknown" >Unknown</input>
<div onclick="CheckMe();"> check Selected Radio button</div>
</body>
<script>
function CheckMe()
{
alert("value selected "+$('input:radio[name=sex]:checked').val());
}
</script>
</html>
Now Suppose you have not selected any Radio button by default then you can check that whether user has selected any radio butoon or not and if selected what is it?
Following code helps you in doing that
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<input type="radio" name="sex" value="Male">Male</input>
<input type="radio" name="sex" value="Female">Female</input>
<input type="radio" name="sex" value="Unknown">Unknown</input>
<div onclick="CheckMe();"> check Selected Radio button</div>
</body>
<script>
function CheckMe()
{
if ($('input:radio[name=sex]:checked').val())
alert("value selected "+ $('input:radio[name=sex]:checked').val());
else
alert("Please select Radio button");
}
</script>
</html>
Enjoy..!
In jquery validation plug-in "equalTo" is used to compare value between the fields, not on same field.(It's my study if any one knows more about it.Please let me know.)
You can add your custom method to it.
$.validator.addMethod("check_for_yes", function(value, element) {
return $('.freemedia').val() != "Yes"
}, "* Please apply to the 'freemedia' group first.");
Validation -
rules : {
freemedia : {
check_for_yes: true
}
}
OR
You can check it on Jquery click event of radio button by showing alert.
I wrote this code to switch between radio buttons and show my custom alert.
<script>
function test() {
if (radio[0].checked = true) {
alert("hello1");
}
if (radio[1].checked = true) {
alert("hello2");
}
}
</script>
<input type="radio" onclick="test()" value="0">
<input type="radio" onclick="test()" value="1">
When check any of radio buttons it must show specific alert.
What is wrong?
You should name your radio buttons, and call them from javascript.
<script>
function test() {
if (document.getElementById('radio1').checked == true) {
alert("hello1");
}
if (document.getElementById('radio2').checked == true) {
alert("hello2");
}
}
</script>
<input type="radio" id="radio1" onclick="test()" value="0">
<input type="radio" id="radio2" onclick="test()" value="1">
Two things you need to take note here:
1) You must use the 'name' attribute in the radio button. Otherwise you won't be able to check the radio button.
2) You cannot use radio[0] to point to the radio button. You can assign an ID to it and use getElementById method to use it in Javascript. Another easy way is to pass the object to the function. Please refer to the sample code below:
<script>
function test(radioObj) {
if(radioObj.value == "0")
alert("Hello1");
else if (radioObj.value == "1")
alert("Hello2");
}
</script>
<input type="radio" name="test" onclick="test(this)" value="0">
<input type="radio" name="test" onclick="test(this)" value="1">
radio[0] and radio[1] are defined in your html but not in your javascript. You can try using JQuery or one of the many javascript selector libraries. Or use getElementById