Weird a+label+input interaction - javascript

$(document).ready(function () {
$('a').click(function(e) {
console.log('a clicked');
if ($('.is_force:checked').length) {
$(this).closest('div').find('input').click();
}
e.preventDefault();
});
$('label[for]').click(function(e) {
console.log('label clicked');
});
$('input[id]').click(function(e) {
var $input = $(this);
//if ($input.is('[type=radio]')) $input.prop('checked', 'checked');
console.log('input clicked', $input.is(':checked'));
setTimeout(
function() {
console.log($input.is(':checked'));
},
0
);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input class="is_force" type="checkbox"> Force checkbox/radio click when clicking on link</label>
<br>
<br>
<div>
<input id="c" type="checkbox" name="checkbox" value="1">
<label for="c">
Text
Link
</label>
</div>
<br>
<div>
<input id="r1" type="radio" name="radio" value="1">
<label for="r1">
Text
Link
</label>
</div>
<div>
<input id="r2" type="radio" name="radio" value="2">
<label for="r2">
Text
Link
</label>
</div>
Open you console to see the output.
When you click on checkbox/radio, everything works as intended.
It works as intended when you click on labels also.
But, when you click on a link inside a label: link clicks, label clicks, but input associated with the label does not get clicked.
You can "fix" this by programmatically clicking associated input from inside link click handler. To see this in action, check the top checkbox.
The fix works OK for checkboxes. But does not for radios: inside input click handler, the first console.log() shows that clicked radio is not checked. But the second console.log() from inside setTimeout() shows that it actually is checked.
This again can be "fixed" by checking the radio programmatically - see the commented line inside input click handler. But that gets way too hacky.
I have a few questions about this:
Why corresponding input doesn't get clicked when a link inside a label is clicked?
Can this be fixed "the right way" without hacky programmatic clicks?
Why radio input "checks" with a delay, while a checkbox works OK?
How to fix this without even more hacky "checked" property setting?

Related

How to display different messages when clicking on two different radio button in javascript?

I have two radio buttons as shown below :
<input type="radio" name="country" value="India" class="website">India
<input type="radio" name="country" value="UAE" class="website">UAE
I have written the jquery for this :
$("input[type='radio']").click(function () {
var selection=$(this).val();
alert("Radio button selection changed. Selected: "+selection);
});
But this is only working when the first radio button is clicked. It wont work when the second radio button is clicked.
Can anyone help me out in this ?
When a form element is disabled you cannot trigger click events on the element. However, you can put a non-form element such as a span around each input and add the click event to the span if you would like.
Note: Using a label calls the click twice which is why I didn't use it.
$("span").click(function() {
var selection = $(this).children().first().val();
alert("Radio button selection changed. Selected: " + selection);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span><input type="radio" name="country" value="India" class="website">India</span>
<span><input type="radio" name="country" value="UAE" class="website" disabled="disabled">UAE</span>

Checkboxes control Radio Checked/Unchecked

I have a checkout page with two radio buttons one for 'Register Account' and 'Guest Account' checkout methods.
I want a single checkbox that when it is checked, it checks the Register Account radio button and when it isn't checked it checks the Guest Account checkout radio button.
Here is my code so far:
http://jsfiddle.net/hQbpZ/160/
HTML:
Remember Me for Future Purposes :<input type="checkbox" id="checkbox1"/> <br/><br/>
Register Account :<input type="radio" id="radio1" name="radio"/><br>
Guest Checkout :<input type="radio" id="radio2" name="radio"/><br>
JS:
jQuery('#checkbox1').click(function(){
jQuery('#radio1').attr('checked', true);
});
jQuery('#checkbox1').click(function(){
jQuery('#radio2').attr('checked', false);
});
I got part of the functionality down but I don't know how to uncheck a radio button when a checkbox is unchecked.
You can do it like this:
jQuery('#checkbox1').click(function () {
jQuery('#radio1').prop('checked', $(this).is(':checked'));
jQuery('#radio2').prop('checked', !$(this).is(':checked'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Remember Me for Future Purposes :
<input type="checkbox" id="checkbox1" />
<br/>
<br/>Register Account :
<input type="radio" id="radio1" name="radio" />
<br>Guest Checkout :
<input type="radio" id="radio2" name="radio" />
<br>
Just add a toggle variable and link the checked attribute to it
http://jsfiddle.net/hQbpZ/163/
var registered = false;
jQuery('#checkbox1').click(function(){
registered = !registered
jQuery('#radio1').attr('checked', registered);
jQuery('#radio2').attr('checked', !registered);
});
It is impossible to manually uncheck radio buttons, simply because they're not meant to be used that way (read more). The only way to have a radio button uncheck is by creating multiple radio buttons sharing the same name tag, meaning your HTML is already correct.
Your JavaScript does need some changes. It is not necessary to bind a function twice to the same event, so you could reduce it to one binding. Inside that binding you check whether the clicked checkbox is now on or off, and depending on that you check one of the two radio buttons, like so:
$('#checkbox1').click(function() {
if($('#checkbox1').prop('checked') === true) {
$('#radio1').attr('checked', true);
} else {
$('#radio2').attr('checked', false);
}
});

check box validation before clicking proceed button

Proceed </button>
<input type="checkbox" name="checkbox3" value="yes">
By checking the box, I certify that have read the above disclaimers and agree to the rules. </input>
I have a checkbox and a button which will take me to next page. But, before I press the button the check box has to be ticked. If not, a label has to be displayed below the check box saying "accept to rules first". Help? Also, it would be great if i can highlight the checkbox to red if i click proceed without checking the checkbox. Can use javascript/jquery.
Try this it works
<form action="page.html">
<input type="checkbox" name="checkbox3" value="yes" required>
By checking the box, I certify that have read the above disclaimers and agree to the rules. </input>
<input type="submit" name ="submit"/>
</form>
To get you started:
<input id="checkboxAgree" type="checkbox" name="checkbox3" value="yes">
function checkAgree()
{
if (document.getElementbyId("checkboxAgree").getAttribute("checked") )//checkbox is checked
{
location.href = "page.html"; //load the next page.
}
else
{
Alert("You need to check the box before you can continue");
}
}
document.getElementById("proceed-button").addEventListener("click", checkAgree ,false);
addEventListener add an onclick event to the button. When clicked this executes the function checkAgree. When the checkbox has the attribute checked it is checked and the ifwill render true. location.href will load page.html.
Please delete the a that surrounds your button.

Radio Button Onclick Event Requires Two Clicks to Fire/Execute on Firefox

Hoping someone has a solution to this weirdness on Firefox 3.
I basically have 3 radio buttons and 3 text input fields (see following code):
<input type="radio" name="group1" id="preloaded" value="preloaded_img" checked="checked" onclick="SetVals();" />
<input type="text" name="text1" id="text1" />
<input type="radio" name="group1" id="custom" value="custom_img" onclick="SetVals();" />
<input type="text" name="text2" id="text2" />
<input type="radio" name="group1" id="vector" value="vector_img" onclick="SetVals();" />
<input type="text" name="text3" id="text3" />
Now, every time I click on a specific Radio Button, the text input elements for the other two buttons should get cleared and also become disabled (see following code).
function SetVals() { // using JQuery + straight JS for this...
$(document).ready(function() {
$(":radio").click(function(event) {
// use event.target to determine which radio button was clicked
if (event.target.id=="preloaded") {
document.getElementByID("text1").disabled=false;
$("#text2").val("");
$("#text3").val("");
document.getElementById("text2").disabled=true;
document.getElementById("text3").disabled=true;
} else if (event.target.id=="custom") {
document.getElementByID("text2").disabled=false;
$("#text1").val("");
$("#text3").val("");
document.getElementById("text1").disabled=true;
document.getElementById("text3").disabled=true;
} else if (event.target.id=="vector") {
document.getElementByID("text3").disabled=false;
$("#text1").val("");
$("#text2").val("");
document.getElementById("text1").disabled=true;
document.getElementById("text2").disabled=true;
}
});
});
}
Also, when the page is initially loaded, the text2 and text3 input fields are disabled via javascript as the text1 field is checked by default:
document.getElementById("text2").disabled=true;
document.getElementById("text3").disabled=true;
The problem I'm having is that it requires 2 (two) clicks to get this to work on Firefox. On Internet Explorer, it works as expected.
So, when clicking on a radio button the first time - nothing happens. When clicking on it a second time, that's when the Onclick Event is triggered.
NOTE: I'm using JQuery for this, but have also used straight Javascript to no avail.
You can simply copy and paste my code on an editor and open the page with Firefox to see issue firsthand.
Has anybody else encountered this? Is it some sort of Firefox bug? If so, is there a work-around?
Any and all help, comments, suggestions, and input are welcome.
Thanks in advance!
Since you are using jQuery to assign the event handler for the radio button click, you can remove the onClick attribute.
This should work for you:
$(function() {
$(":radio").click(function(event) {
if (this.id == "preloaded") {
$("#text1").removeAttr("disabled");
$("#text2, #text3").val("").attr("disabled", true);
} else if (this.id == "custom") {
$("#text2").removeAttr("disabled");
$("#text1, #text3").val("").attr("disabled", true);
} else if (this.id == "vector") {
$("#text3").removeAttr("disabled");
$("#text1, #text2").val("").attr("disabled", true);
}
});
$("#text2, #text3").val("").attr("disabled", true);
});
Code example on jsfiddle.
Side note: since you are using jQuery you might as well use jQuery for almost all dom interactions since mixing the two will eventually lead to some pain. Let jQuery hide the inconsistencies in browsers.
You started using jQuery, and then returned to vanilla JavaScript... but you mis-typed the getElementById() function.
I would stick with jQuery if you have it, it will avoid IE bugs with this particular method too.
Cleaner HTML
<input type="radio" name="group1" id="preloaded" value="preloaded_img" checked="checked"/>
<input type="text" name="text1" id="text1"/>
<input type="radio" name="group1" id="custom" value="custom_img"/>
<input type="text" name="text2" id="text2"/>
<input type="radio" name="group1" id="vector" value="vector_img"/>
<input type="text" name="text3" id="text3"/>
and the jQuery...
$(document).ready(function(){
//bind the click event to the radio buttons
$(':radio').click(function(){
var radioID = $(this).attr('id');
if(radioID == 'preloaded'){
$('#text1').removeAttr('disabled');
$('#text2, #text3').val('').attr('disabled','disabled');
} else if(radioID == 'custom'){
$('#text2').removeAttr('disabled');
$('#text1, #text3').val('').attr('disabled','disabled');
} else if(radioID == 'vector'){
$('#text3').removeAttr('disabled');
$('#text1, #text2').val('').attr('disabled','disabled');
}
});
});
You could try the .change() event handler. I think that could work better.
EDIT: There are issues with the .change() event and IE.

javascript jquery radio button click

I have 2 radio buttons and jquery running.
<input type="radio" name="lom" value="1" checked> first
<input type="radio" name="lom" value="2"> second
Now, with a button I can set onClick to run a function. What is the way to make radio buttons run a function when I click on one of them?
You can use .change for what you want
$("input[#name='lom']").change(function(){
// Do something interesting here
});
as of jQuery 1.3
you no longer need the '#'. Correct way to select is:
$("input[name='lom']")
If you have your radios in a container with id = radioButtonContainerId you can still use onClick and then check which one is selected and accordingly run some functions:
$('#radioButtonContainerId input:radio').click(function() {
if ($(this).val() === '1') {
myFunction();
} else if ($(this).val() === '2') {
myOtherFunction();
}
});
<input type="radio" name="radio" value="creditcard" />
<input type="radio" name="radio" value="cash"/>
<input type="radio" name="radio" value="cheque"/>
<input type="radio" name="radio" value="instore"/>
$("input[name='radio']:checked").val()
this should be good
$(document).ready(function() {
$('input:radio').change(function() {
alert('ole');
});
});
There are several ways to do this. Having a container around the radio buttons is highly recommended regardless, but you can also put a class directly on the buttons. With this HTML:
<ul id="shapeList" class="radioList">
<li><label>Shape:</label></li>
<li><input id="shapeList_0" class="shapeButton" type="radio" value="Circular" name="shapeList" /><label for="shapeList_0">Circular</label></li>
<li><input id="shapeList_1" class="shapeButton" type="radio" value="Rectangular" name="shapeList" /><label for="shapeList_1">Rectangular</label></li>
</ul>
you can select by class:
$(".shapeButton").click(SetShape);
or select by container ID:
$("#shapeList").click(SetShape);
In either case, the event will trigger on clicking either the radio button or the label for it, though oddly in the latter case (Selecting by "#shapeList"), clicking on the label will trigger the click function twice for some reason, at least in FireFox; selecting by class won't do that.
SetShape is a function, and looks like this:
function SetShape() {
var Shape = $('.shapeButton:checked').val();
//dostuff
}
This way, you can have labels on your buttons, and can have multiple radio button lists on the same page that do different things. You can even have each individual button in the same list do different things by setting up different behavior in SetShape() based on the button's value.
it is always good to restrict the DOM search. so better to use a parent also, so that the entire DOM won't be traversed.
IT IS VERY FAST
<div id="radioBtnDiv">
<input name="myButton" type="radio" class="radioClass" value="manual" checked="checked"/>
<input name="myButton" type="radio" class="radioClass" value="auto" checked="checked"/>
</div>
$("input[name='myButton']",$('#radioBtnDiv')).change(
function(e)
{
// your stuffs go here
});

Categories

Resources