unable to verify preselected radio button - javascript

I have a form which contains data that will be dynamically added to my form. Once the data has been added, I would like to verify the value (specifically if a radio button has been checked) of a radio button and then do different things based on which radio button is checked.
Currently, I am unable to do so as no matter the state of the radio button (i.e checked OR unchecked) I am always getting the alert ("Button is no checked").
Code:
<!DOTYPE HTML>
<html>
<head>
<link type='text/css' rel='stylesheet' href='style.css'>
<!--jQuery Validation-->
<!--Loads JQuery and JQuery validate plugin-->
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type='text/javascript'>
$(document).ready(function ()
{
function checkradio(radio)
{
if (radio.checked)
{
alert("no is checked");
}
else
{
alert("no is not checked");
}
}
function radiocheck()
{
checkradio($('#no'));
}
$('#submit1').click(function ()
{
radiocheck();
})
});
</script>
</head>
<body>
<input type='radio' id='yes' name='radiobutton' value='yes'>yes
<input type='radio' checked='checked' id='no' name='radiobutton' value='no'>no
<input type='button' id='submit1' name='submit' value='submit'>
</body>
</html>

You are trying to use native DOM element checked property on a jQuery object.
Can use:
if(radio.is(':checked'));
Or pass the native DOM element to checkradio() rather than the jQuery object
checkradio($('#no')[0]);

function checkradio(radio){
if(radio.prop('checked'))
{
alert("no is checked");
}
else
{
alert("no is not checked");
}
}
OR
$('#submit1').click(function(){
if($('#no').prop('checked')){
alert("is checked");
}else{
alert("is not checked");
}
})

try this
checkradio($("input:radio[name=radiobutton]"));

change your code like
checkradio($("input[name='radiobutton']")); //This will give all radio buttons with name "radiobutton"
and in if()
add radio.is(':checked')
FIDDLE

Related

jQuery to disable radio button not working [duplicate]

I'm trying to disable these radio buttons when a the loadActive link is clicked but for some reason it only disables the first in the order and then skips the rest.
<form id="chatTickets" method="post" action="/admin/index.cfm/">
<input id="ticketID1" type="radio" checked="checked" value="myvalue1" name="ticketID"/>
<input id="ticketID2" type="radio" checked="checked" value="myvalue2" name="ticketID"/>
</form>
Load Active
And Here is the jquery i'm using:
jQuery("#loadActive").click(function() {
//I have other code in here that runs before this function call
writeData();
});
function writeData() {
jQuery("input[name='ticketID']").each(function(i) {
jQuery(this).attr('disabled', 'disabled');
});
}
Remove your "each" and just use:
$('input[name=ticketID]').attr("disabled",true);
That simple. It works
I've refactored your code a bit, this should work:
jQuery("#loadActive").click(writeData);
function writeData() {
jQuery("#chatTickets input:radio").attr('disabled',true);
}
If there are more than two radio buttons on your form, you'll have to modify the selector, for example, you can use the starts with attribute filter to pick out the radios whose ID starts with ticketID:
function writeData() {
jQuery("#chatTickets input[id^=ticketID]:radio").attr('disabled',true);
}
just use jQuery prop
$(".radio-button").prop("disabled", false);
$(".radio-button").prop("disabled", true); // disable
First, the valid syntax is
jQuery("input[name=ticketID]")
second, have you tried:
jQuery(":radio")
instead?
third,
why not assign a class to all the radio buttons, and select them by class?
I just built a sandbox environment with your code and it worked for me. Here is what I used:
<html>
<head>
<title>test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<form id="chatTickets" method="post" action="/admin/index.cfm/">
<input id="ticketID1" type="radio" checked="checked" value="myvalue1" name="ticketID"/>
<input id="ticketID2" type="radio" checked="checked" value="myvalue2" name="ticketID"/>
</form>
Load Active
<script>
jQuery("#loadActive").click(function() {
//I have other code in here that runs before this function call
writeData();
});
function writeData() {
jQuery("input[name='ticketID']").each(function(i) {
jQuery(this).attr('disabled', 'disabled');
});
}
</script>
</body>
</html>
I tested in FF3.5, moving to IE8 now. And it works fine in IE8 too. What browser are you using?
code:
function writeData() {
jQuery("#chatTickets input:radio[id^=ticketID]:first").attr('disabled', true);
return false;
}
See also: Selector/radio, Selector/attributeStartsWith, Selector/first
You can try this code.
var radioBtn = $('<input type="radio" name="ticketID1" value="myvalue1">');
if('some condition'){
$(radioBtn).attr('disabled', true); // Disable the radio button.
$('.span_class').css('opacity', '.2'); // Set opacity to .2 to mute the text in front of the radio button.
}else{
$(radioBtn).attr('disabled', false);
$('.span_class').css('opacity', '1');
}

Set attribute in checkbox on click

how can an HTML element/tag for example this:
<input type="checkbox" id="1234" checked onClick="replace(1234)"> I have a car<br>
replaced with this when clicked
<input type="checkbox" id="1234" unchecked onClick="replace(1234)"> I have a car<br>
I want to replace only the input tag and change HTML code in tha position
Thanks
$('#1234').click(function(){
if($(this).is(':checked')) {
$(this).attr('checked',true);
console.log('checked')
}
else {
$(this).attr('checked',false);
console.log('unchecked')
}
});
<!DOCTYPE html>
<html>
<header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</header>
<body>
<input type="checkbox" id="1234" checked > I have a car<br>
</body>
</html>
Kindly check the above snippet. It might help.
This will check if the element has the attribute checked, if so then it will remove it and set a new attribute called unchecked
function replace(id) {
var attr = $("#" + id).attr('checked');
// For some browsers, `attr` is undefined; for others,
// `attr` is false. Check for both.
if (typeof attr !== typeof undefined && attr !== false) {
$("#" + id).removeAttr('checked').attr("unchecked", "")
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="1234" checked onClick="replace(1234)"> I have a car<br>
You can directly call checkbox click event as shown in below code
$(document).on("click", "input[name='chk']", function() {
//alert(this.id);
debugger;
var ischecked2 = $(this).is(':checked');
if (ischecked2) { //checked
console.log("checked");
} else { //unchecked
console.log("unchecked");
}
});
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.0.min.js">
</script>
<input type="checkbox" id="1234" name="chk"> I have a car<br>
Use following code. It will help you:
$('#1234').click(function(){
if($(this).is(':checked'))
$(this).attr('checked',true);
else
$(this).removeAttr('checked');
});

Is it possible to have a checkbox contain a function?

What I am hoping to achieve is when I tick a checkbox it applies an integer to a total. When it is unchecked, the default value is zero.
With html:
<input id="my_checkbox" type="checkbox" />
<div id="my_total">0.00</div>
and jQuery script on domReady:
$(document).ready(function(){
$("#my_checkbox").change(function(){
if($(this).is(':checked')) {
$('#my_total').html('333.45');
} else {
$('#my_total').html('0.00');
};
}).trigger('change');
});

Show div when radio button selected

I am novice in javascript and jQuery.
In my html have 2 radio buttons and one div. I want to show that div if I check the first radio-button but otherwise I want it to be hidden
so: If radio button #watch-me is checked --> div #show-me is visible.
If radio button #watch-me is unchecked (neither are checked or the second is checked) --> div #show-me is hidden.
Here is what I have so far.
<form id='form-id'>
<input id='watch-me' name='test' type='radio' /> Show Div<br />
<input name='test' type='radio' /><br />
<input name='test' type='radio' />
</form>
<div id='show-me' style='display:none'>Hello</div>
and JS:
$(document).ready(function () {
$("#watch-me").click(function() {
$("#show-me:hidden").show('slow');
});
$("#watch-me").click(function(){
if($('watch-me').prop('checked')===false) {
$('#show-me').hide();}
});
});
How should I change my script to achieve that?
I would handle it like so:
$(document).ready(function() {
$('input[type="radio"]').click(function() {
if($(this).attr('id') == 'watch-me') {
$('#show-me').show();
}
else {
$('#show-me').hide();
}
});
});
Input elements should have value attributes. Add them and use this:
$("input[name='test']").click(function () {
$('#show-me').css('display', ($(this).val() === 'a') ? 'block':'none');
});
jsFiddle example
$('input[name=test]').click(function () {
if (this.id == "watch-me") {
$("#show-me").show('slow');
} else {
$("#show-me").hide('slow');
}
});
http://jsfiddle.net/2SsAk/2/
$('input[type="radio"]').change(function(){
if($("input[name='group']:checked")){
$(div).show();
}
});
var switchData = $('#show-me');
switchData.hide();
$('input[type="radio"]').change(function(){ var inputData = $(this).attr("value");if(inputData == 'b') { switchData.show();}else{switchData.hide();}});
JSFIDDLE

How to validate a form's input value

I am trying to validate a form's input value after clicking a button using jQuery and javascript.
Right now, if I put in a value for the input and click submit the input field and button just disappears. Any idea what I have wrong here?
The HTML file...
<!DOCTYPE html>
<html>
<head>
<title></title>
<link/>
<script type='text/javascript' src='script.js'></script>
</head>
<body>
<form>
<input type="text" id='input_1'>
<input type="submit" value="Send" id="send">
</form>
</body>
</html>
The script file...
$(document).ready(function() {
$('.send').click(function() {
validateInput(document.getElementById('#input_1'));
function validateInput(inputValue){
if (inputValue === 3) {
alert("Element cannot be equal to 3");
}
}
});
});
$(document).ready(function() {
$('#send').live('click',function() { //Because send is the id of your button
if(validateInput(document.getElementById('#input_1'))){
alert("Element cannot be equal to 3");
return false;
}
else{
//Do something else
}
function validateInput(inputValue){
if (inputValue == 3) {
return false;//Will prevent further actions
}
}
});
});
this $('.send').click(function() {
should be $("#send").click(function() {.
Notice the Hash symbol and not the dot (.), dot is used if the selector is a class whereas the # is used if the selector is an ID.
2.You should move the validation function outside the $(document).ready(function().. Hope that helps
Thank you all for your responses. Unfortunately, I wasn't able to get it to work using your recommendations. I decided to use jQuery to get the element and appended a message to a div instead of using alert. This was a different approach but ended up working.
HTML...
<!DOCTYPE html>
<html>
<head>
<title></title>
<link/>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<form>
<input type="text" name="input"/>
</form>
<button id="send">Send</button>
<div class="error">
</div>
</body>
</html>
SCRIPT...
$(document).ready(function() {
$('#send').click(function(){
var toValidate = $('input[name=input]').val();
if (toValidate == 3) {
jQuery('.message').html('');
$('.error').append('<div class="message">' + toValidate + " is invalid" + '</div>');
}
else {
jQuery('.message').html('');
$('.error').append('<div class="message">' + toValidate + " is valid" + '</div>');
}
});
});

Categories