I have HTML like this:
<input type="radio" name="type" value="FL" checked="checked" />Fixed
<input type="radio" name="type" value="SV" />Saving
<input type="radio" name="type" value="L2" />Type 2
And following script
$(function () {
$('input[name=type]').change(function () {
alert($(this).val());
});
$('input[value=SV]').attr('checked', 'checked');
});
Firstly, have added a change event to radio button.
change event handler triggered if I am selecting radio button from UI.
But it does not triggered when I change selected radio button value pro-grammatically.
I want change event also to be triggered when I select radio button pro-grammatically.
You can use trigger() to programmatically raise an event:
$(function () {
$('input[name="type"]').change(function() {
console.log($(this).val());
});
$('input[value="SV"]').prop('checked', true).trigger('change');
});
It won't change automatically. You have to do one of the following:
either
$('input[value=SV]').attr('checked', 'checked').trigger("change")
or
$('input[value=SV]').attr('checked', 'checked').change();
Related
<input class="language-checkbox" name="languages-settings" disabled="true" type="radio" onclick="nonAvailable('englishLan');>
This radio button is disabled. But I cannot use the onclick.
So I was wondering how I can make a radio-button uncheckable, but I can still use the onclick
You can use event.preventDefault() inside the onClick function. as below:
document.querySelector("#languages-settings").addEventListener("click", (event) => {
console.log('I\'m unavailable.');
event.preventDefault();
}, false);
<input class="language-checkbox" id="languages-settings" name="languages-settings" type="radio">
I have two radio buttons which both have values. When one is selected, and a button/link is clicked, the value of the selected radio button needs to be outputted to a text box.
Here is my HTML:
<form class="discount-choice" method="post" action="#">
<ul>
<li>
<input type="radio" value="1" name="discount" id="1-month" class="discount-checkbox" />
<label for="1-month">1 Month - no discount</label>
</li>
<li>
<input type="radio" value="0.95" name="discount" id="4-months" class="discount-checkbox" />
<label for="4-months">4 months - 5% discount</label>
</li>
</ul>
Get Result
<input type="text" class="result" />
</form>
and my JavaScript (jQuery):
var discount = $(".discount-checkbox").on("click", function () {
return this.value;
});
$(".get-result").on("click", function() {
$(".result").attr("value", discount);
});
When I click the button (after having selected a radio button), I just get [object Object] in the text box.
I'm not sure of the syntax for setting a variable to be a jQuery function so this is likely where I am going wrong. If anyone could give me some guidance that would be awesome.
Thank you for any help :)
discount is set to the jQuery object returned by $(".discount-checkbox"). You need to bind a click handler that updates a variable:
var discount = 0;
$(".discount-checkbox").on("click", function () {
discount = this.value;
});
Use this:
$(".get-result").on("click", function(e) {
e.preventDefault();
$(".result").val( $('.discount-checkbox:checked').val() );
});
You do not need the click handler on the checkbox as #billyonecan has mentioned in the comments.
And ... if you really need to attach an event handler to the checkboxes, that would be a change event handler instead of click.
Try This Code:
var discount;
$(".discount-checkbox").on("click", function () {
discount= this.value;
});
$(".get-result").on("click", function() {
$(".result").attr("value", discount);
});
no need of discount-checkbox click event
$(".get-result").on("click", function() {
var discount = $(".discount-checkbox:checked").val();
$(".result").val(discount);
});
How to properly enable/disable input field on click with jQuery?
I was experimenting with:
$("#FullName").removeAttr('disabled');
which removes disabled="disabled" from this input field:
<input id="FullName" style="width: 299px" value="Marko" disabled="disabled" />
But how to add it again with click on another button or how to disable input field on click?
For jQuery version 1.6+ use prop:
$('#elementId').click(function(){
$('#FullName').prop('disabled', true\false);
});
For older versions of jQuery use attr:
$('#elementId').click(function(){
$('#FullName').attr('disabled', 'disabled'\'');
});
$("#FullName").prop('disabled', true);
Will do.
But keep in mind after you disable it (by the above code) onclick handler wont work as its disabled. To enable it again add $("#FullName").removeAttr('disabled'); in the onclick handler of another button or field.
$('#checkbox-id').click(function()
{
//If checkbox is checked then disable or enable input
if ($(this).is(':checked'))
{
$("#to-enable-input").removeAttr("disabled");
$("#to-disable-input").attr("disabled","disabled");
}
//If checkbox is unchecked then disable or enable input
else
{
$("#to-enable-input").removeAttr("disabled");
$("#to-disable-input").attr("disabled","disabled");
}
});
another simple method to enable/disable input feild
$("#anOtherButton").click(function() {
$("#FullName").attr('disabled', !$("#FullName").attr('disabled'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<input id="FullName" style="width: 299px" value="Marko" disabled="disabled" />
<br>
<br>
<input type="button" id="anOtherButton" value="disable/enable" />
This should do it.
$("#FullName").attr('disabled', 'disabled');
Shiplu is correct, but use this if you have are not using jquery 1.6+
$("#anOtherButton").click(function(){
$("#FullName").attr('disabled', 'disabled');
});
.attr( attributeName, value) function
Set one or more attributes for the set of matched elements
To toggle a field between disabled and enabled, try this:
$('#toggle_button').click(function () {
$('#FullName').prop("disabled",
function (i, val) {
return !val;
});
})
I'm very noob in javascript. My question is how do I show the value of my radio button when click?
I have this code:
<tr><td width="10px"></td><td width="60%">Neatness</td>
<td width="40%">
<input name="neat" type="radio" class="hover-star" value="1" title="Poor"/>
<input name="neat" type="radio" class="hover-star" value="2" title="Fair"/>
<input name="neat" type="radio" class="hover-star" value="3" title="Satisfactory"/>
<input name="neat" type="radio" class="hover-star" value="4" title="Outstanding"/>
</td></tr>
Say when my 1st radio button it will show 1 or so on.. How can I achieve this? Or better yet does anyone know how to do this in jquery.
Use the jQuery class selector and attach to the click event:
$('.hover-star').click(function () {
alert($(this).val());
}
Here's a working jsFiddle fiddle.
Alternatively, you could attach to the change event.
$('.hover-star').change(function () {
alert($(this).val());
}
Take a look at the jQuery selectors documentation.
With jQuery you can bind the click event to any element with class hover-star, and use the val method to get the value. This will fire whenever any radio button is clicked (even if the selection does not change):
$(".hover-star").click(function() {
var selectedVal = $(this).val();
});
You could also use the change event, which fires whenever the selected radio button changes:
$(".hover-star").change(function() {
var selectedVal = $(this).val();
});
You say you want to "show" the value of the radio button, but as you haven't provided more details it's difficult to say where you want to show it! But the principle will be the same as I have shown above - in the event handler function you can do whatever you need to with the value.
Update based on comments
As you want to put the value into a div, you can simply do this inside the change event handler:
$("#yourDivId").text($(this).val());
Try this
$('.hover-star').click(function () {
alert($(this).val());
}
Here you go ...
$('.hover-star').click(function (){$('#someDiv').text($(this).val());
Jquery COde:
$(".hover-star").change(function() {
var selectedVal = $(this).val();
alert(selectedVal);
});
See Demo: http://jsfiddle.net/rathoreahsan/wVa7c/
I have 2 radio buttons, what I want is if a user selects the top radio button then hide a textbox.
Not sure how to bind an event to a radio button.
Something like this:
<input type="radio" name="foo" value="top" />
<input type="radio" name="foo" value="bottom" />
And in jQuery:
$('input[name=foo]').click(function() {
if($(this).val() == "top") {
$('#textbox').hide();
} else {
$('#textbox').show();
}
});
click because change doesn't seem to work correctly on IE.
This will allow you to add the event to a selected radio, in case your radio's do not have the same name.
$('checkbox-selector').click(function() {
if ($(this).is(':checked')) {
$('textbox-selector').hide();
}
else {
$('textbox-selector').show();
}
});