Can not select the radio button with value using jquery - javascript

I need one help .I need to check radio button and set the value using Jquery/Javascript.I did something but its not working.
<input type="radio" name="con" id="con" value="" onClick="checkCon();">Country
<button type="button" id="btn">Check</button>
document.getElementById('btn').onclick=function(){
var condata='123';
$("input[name=con][value=" + condata+ "]").prop('checked', true).trigger('click');
}
Here when user will click on check button it can not check the check box and can not set the value.Please help me.

try this, it can help:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
<script>
$(document).ready(function(){
var condata = '123';
$("#btn").click(function(){
$('#con').val(condata).prop('checked', true).trigger("click");
});
});
function checkCon()
{
alert($('#con').val());
}
</script>
</head>
<body>
<input type="radio" name="con" id="con" value="" onClick="checkCon();">Country
<button type="button" id="btn">Check</button>
</body>
</html>
this code is working I've checked this, you can also try
its probably because you are mixing up javascript and jQuery , either you should use jQuery or JavaScript. Hope the above code help. and make sure you have added jQuery library before using this code

You have to use the cotes.
Reference
$("input[name='con'][value='" + condata+ "']").prop('checked', true).trigger('click');

It's clear that there's no radio button with value '123'.
Note 1 : You don't need to prop and trigger at the same time, just prop or trigger the click events.
$("input[name=con][value=" + condata+ "]").trigger('click');
Note 2 : Click trigger automatically change the radio button properties. If you want to force it checked, do something like this.
$("input[name=con][value=" + condata+ "]").on('click', function(e) {
e.preventDefault();
$(this).prop('checked', true);
});

<input type="radio" name="con" id="con" value="" onClick="checkCon();">
Your radio button don't have value="123"
That is why it's not getting checked.
This is the corrected tag
<input type="radio" name="con" id="con" value="123" onClick="checkCon();">
and it will work as intended

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');
}

How to trigger the 'change' event if jQuery sets the value?

How to trigger the 'change' event if jQuery sets the value from that button? Is it possible?
Code Snippet attached below:
$(".first").change(function() {
alert('something');
})
$(".button").click(function() {
$(".first").val('Button Value');
})
<!DOCTYPE html>
<html>
<head>
<title>Change</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<input type="text" name="" class="first">
<input type="button" name="" class="button" value="Change">
</body>
</html>
The answer is in the question!!! Use .trigger()!
$(".first").change(function(){
alert('something');
})
$(".button").click(function(){
$(".first").val('Button Value').trigger("change");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="" class="first">
<input type="button" name="" class="button" value="Change">
It wont call the change event, may be you can call it manually like this.
$(".first").on('change',function(){
alert($(".first").val());
})
$(".button").click(function(){
$(".first").val('Button Value');
$(".first").change();
})
Update:
Use oninput which is raised when an element value changes.
$(".first").on('input', function(){
alert('something');
})
here is simple example
$(".first").on('input', function(){
alert('something$(".first").on('input', function(){
alert('something');
})');
})
I guess you want to pop an alert on the page when the button is clicked, i.e. when the user submits some data to the form instead of alerting at the exact moment, you wish to pop an alert when the user clicks the button. Cause that is what i understood from your question. Maybe to do that all we can do is:
$(".button").click(function(){
alert("something");
$(".first").css("outline", "1px solid #3366BB";
});
See if this helps any.

Add required to input of hidden div when radio is checked

What I'm trying to do is to set hidden div with inputs depended on checked radio input.
This is the logic:
If the first radio is checked the first div is shown, there I want to add hidden inputs with some values...
If the second radio is checked I want the input to be added with required..
And, it shouldn't be required if the 2nd radio isn't checked...
I've tried a few things over some time and got some effects but can't get it work as I want, Here is the code that i'm currently trying to work with, sorry but it's messed up and fails...
So Any help will be much appreciated...
/*
// this code is working but I messed the HTML while trying to get it work with the other code below...
$(document).ready(function() {
$("div.hiddendiv").hide();
check();
$("input[name$='name02']").change(check);
function check() {
var test = $("input[name$='name02']:checked").val();
$("div.hiddendiv").hide();
$("#" + test).show();
}
}
*/
// The code i'm trying to work with...
$(function() {
var radio = $("#closed");
var hidden = $("#hide");
hidden.hide();
checkbox.change(function() {
if (checkbox.is(':checked')) {
hidden.show();
//add required
$('#name02').prop('required', true);
} else {
hidden.hide();
//clear when hidden checked
$("#name02").val("");
//remove required
$('#name02').prop('required', false);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" id="closed" value="01"> Closed
<input type="radio" id="open" value="02"> Open
<div name="01" class="hiddendiv">
<input name="name01" type="hidden" value="code">
</div>
<div name="02" id="hide" class="hiddendiv">
<input name="name02" type="text" value="">
</div>
Here is the JSFiddle,
try this code
give same name of radio button so it will work as a group and
also set id of input tag as name02 so its use as a #name02 in jquery
so it will work
$(function() {
var radio = $("#closed");
var hidden = $("#hide");
hidden.hide();
$(this).click(function() {
if ($('#closed').is(':checked')) {
hidden.show();
$('#name02').prop('required', true);
} else {
hidden.hide();
//clear when hidden checked
$("#name02").val("");
//remove required
$('#name02').prop('required', false);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name='btn' id="closed" value="01"> Closed
<input type="radio" name='btn' id="open" value="02"> Open
<div name="01" class="hiddendiv">
<input name="name01" type="hidden" value="code">
</div>
<div name="02" id="hide" class="hiddendiv">
<input name="name02" id="name02" type="text" value="">
</div>
Part of your problem is that you need to set the name attribute of your radio buttons to be the same value, otherwise the HTML won't know that they belong to the same group.
I've updated the JSfiddle here
https://jsfiddle.net/hba4d83k/2/
What i have done is add a change event handler to your the radio group and then did some conditional logic to show/hide the relevant inputs.

how to remove text box value on check box unchecked?

Hi i have two check boxes PlanA AND AndroidApps and one textbox when i checked check box then text box enable and when i unchecked thrn text dox disabled but problem is when tex box is enable and i write something in text box and then unchecked my checkbox then my textbox disabled but that text which i typed it does not delete and text box does not clear
Here is my code
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#main_box').on('change',function(e) {
console.log("dfsd");
$("#a2").prop("checked",this.checked);
$("#emailid").prop("disabled", !$(this).is(':checked'));
});
});
</script>
</head>
<body>
<input id="main_box"type="checkbox" name="PlanA" value="A"><label for="PlanA"><span style="font-weight:bold">PlanA</span></label><br>
<input name="PlanA" type="hidden" value=0 />
<input type="checkbox" name="AndroidApps" id="a2" value=1><label for="AndroidApps"><span style="font-weight:bold">AndroidApps</span></label><br>
<input name="AndroidApps" type="hidden" value=0 />
<input type="text" name="emailid"id="emailid"disabled="disabled" required size="45" >
</body>
</html>
How can i achieve this
Thanks in advance
You can use val() to set the value of your input:
$("#emailid").val('');
Updated Fiddle
Add a condition
$(document).ready(function () {
$('#main_box').on('change', function (e) {
$("#a2").prop("checked", this.checked);
$("#emailid").prop("disabled", !this.checked);
if(!this.checked){
$("#emailid").val('');
}
});
});
Demo: Fiddle
Use this Link::
http://jsfiddle.net/rjha999/DM9b9/
contains code for checkbox check ::
$("#chk").click(function(){
if($("#chk").is(":checked"))
{
$("#txt").val('');
}
})
You can use val() to set the value of your input:
$("#emailid").val('');
and if your are retrieving values, you use:
$(selector).val()
Don't get confused with those two
Hope this helps..

jQuery click event on radio button doesn't get fired

I've got the following code to trigger a click event on some radio buttons! but it doesn't get fired! can any one help me with this!
CODE :
$("#inline_content input[name='type']").click(function(){
if($('input:radio[name=type]:checked').val() == "walk_in"){
$('#select-table > .roomNumber').attr('enabled',false);
}
});
RADIO BUTTONS
<form class="type">
<input type="radio" name="type" checked="checked" value="guest">In House</input>
<input type="radio" name="type" value="walk_in">Walk In</input>
</form>.
Update
Tried onChange() too but not working.
It fires. Check demo http://jsfiddle.net/yeyene/kbAk3/
$("#inline_content input[name='type']").click(function(){
alert('You clicked radio!');
if($('input:radio[name=type]:checked').val() == "walk_in"){
alert($('input:radio[name=type]:checked').val());
//$('#select-table > .roomNumber').attr('enabled',false);
}
});
There are a couple of things wrong in this code:
You're using <input> the wrong way. You should use a <label> if you want to make the text behind it clickable.
It's setting the enabled attribute, which does not exist. Use disabled instead.
If it would be an attribute, it's value should not be false, use disabled="disabled" or simply disabled without a value.
If checking for someone clicking on a form event that will CHANGE it's value (like check-boxes and radio-buttons), use .change() instead.
I'm not sure what your code is supposed to do. My guess is that you want to disable the input field with class roomNumber once someone selects "Walk in" (and possibly re-enable when deselected). If so, try this code:
HTML:
<form class="type">
<p>
<input type="radio" name="type" checked="checked" id="guest" value="guest" />
<label for="guest">In House</label>
</p>
<p>
<input type="radio" name="type" id="walk_in" value="walk_in" />
<label for="walk_in">Walk in</label>
</p>
<p>
<input type="text" name="roomnumber" class="roomNumber" value="12345" />
</p>
</form>
Javascript:
$("form input:radio").change(function () {
if ($(this).val() == "walk_in") {
// Disable your roomnumber element here
$('.roomNumber').attr('disabled', 'disabled');
} else {
// Re-enable here I guess
$('.roomNumber').removeAttr('disabled');
}
});
I created a fiddle here: http://jsfiddle.net/k28xd/1/
Personally, for me, the best solution for a similar issue was:
HTML
<input type="radio" name="selectAll" value="true" />
<input type="radio" name="selectAll" value="false" />
JQuery
var $selectAll = $( "input:radio[name=selectAll]" );
$selectAll.on( "change", function() {
console.log( "selectAll: " + $(this).val() );
// or
alert( "selectAll: " + $(this).val() );
});
*The event "click" can work in place of "change" as well.
Hope this helps!
A different way
$("#inline_content input[name='type']").change(function () {
if ($(this).val() == "walk_in" && $(this).is(":checked")) {
$('#select-table > .roomNumber').attr('enabled', false);
}
});
Demo - http://jsfiddle.net/cB6xV/
Seems like you're #inline_content isn't there! Remove the jQuery-Selector or check the parent elements, maybe you have a typo or forgot to add the id.
(made you a jsfiddle, works after adding a parent <div id="inline_content">: http://jsfiddle.net/J5HdN/)
put ur js code under the form html or use $(document).ready(function(){}) and try this.
$('#inline_content input[type="radio"]').click(function(){
if($(this).val() == "walk_in"){
alert('ok');
}
});

Categories