Basically I have two radio buttons which sit in a form. When the first radio button is checked, a form appears which enables a new user to register on the site. The second one is for already registered users who want to sign in.
I've included some jVal form validation. Now, if I check the second radio button, and type an invalid password in the password field (something that doesn't pass the jVal validation), an error message appears. The behavior so far is okay. However, if I now check the first radio button (the one for new users), the error message stays there. I've tried to override this by adding a click event to the first radio button, which should hide the error message from the previous screen once clicked.
radioButton.on('click', function(){
errorDiv.popover('hide');
console.log('click event registered');
});
The problem is that I need to click the radio button twice in order to get the click event to register...
Anyone got a clue on the issue and why do I have to click the radio button twice so that the event can be registered?
This demo shows a solution in action: DEMO
It is a very simple Jquery:
<body>
<form>
<input type="radio" value="1" name="test" />Value1
<br />
<input type="radio" value="2" name="test" />Value2
<br />
<input type="radio" value="3" name="test" />Value3
</form>
<script>
$(document).ready(function(){
$("input[name='test']").click(function(){
alert($(this).val());
})
})
</script>
</body>
Related
Is it possible to have a radio button's "onchange" event fire when the radio button is checked via an external function, and not by clicking on the radio button itself?
I have created a demo of my issue below, feel free to put the following in a text file and save it as .HTML:
<!DOCTYPE html>
<html>
<body>
<p>
This example demonstrates how the "onchange" event on radio buttons does not fire if the button is selected externally, i.e. by setting its "checked" value to "true".
<br />
You can test this by clicking one of the radio buttons invididually, then by clicking the "Select 1" or "Select 2" buttons.
<br />
The radio buttons have an "onchange" event registered such that an alert box should pop up when one of them is selected.
</p>
1: <input type="radio" value="1" id="1" name="myradio" onchange="myFunction()" /> <input type="button" value="Select 1" onclick="document.getElementById('1').checked=true;" /><br />
2: <input type="radio" value="2" id="2" name="myradio" onchange="myFunction()" /> <input type="button" value="Select 2" onclick="document.getElementById('2').checked=true;" />
<script>
function myFunction() {
alert("A radio button was selected.");
}
</script>
</body>
</html>
This is not a duplicate of How to trigger event in JavaScript?, and this is how:
If I were to fire the event manually, that would require me to look at the radio button and compared to the last time I looked at it, and fire the "onchange" event accordingly. The issue is that the radio button can be selected through a multitude of ways (click, keyboard press, touch/tap, external function etc) and rather than monitor each avenue of selection, I'd rather have the input element do that for me. If I can achieve what I am asking in the question, it will simplify this.
Use .click()
<input type="button" value="Select 2" onclick="document.getElementById('2').click();" />
You should avoid using inline js.
Javascript:
if (GetCookie('prev_radio_value')!=null){
alert(GetCookie('prev_radio_value'));
$(":radio[value="+GetCookie('prev_radio_value')+"]").attr('checked',true);
$(":radio[value="+GetCookie('prev_radio_value')+"]").triggerHandler('click');
$(':radio:checked').triggerHandler('click');
$('input:radio[name=theme]:checked').click();
}else{
alert("clicking first");
$("input:radio:first").attr("checked", true).trigger("click");
}
HTML code:
<ul>
<li><input type="radio" name="theme" value="theme1"/>Theme1</li>
<li><input type="radio" name="theme" value="theme2"/>Theme2</li>
</ul>
this code is inside div -> 'checkbox_div'
click function :
$("#checkbox_div input:radio").click(function() {
alert("clicked") ;
});
I have used the trigger click in 3 ways but none of them worked or triggered the click event.
example link : http://jsbin.com/ezesaw/1/edit is not triggering the click event upon selection of first radio button.
Just call "click()" without the function as an argument
$("#checkbox_div input:radio").click();
It works just fine:
http://jsbin.com/ivojoz/1/edit
The problem may be that you are not selecting the radio correctly
try
$('#checkbox_div input[type="radio"]').click(function() {
alert("clicked") ;
});
$("#checkbox_div").on('click','input:radio', function() {
alert("clicked");
});
Give this code a shot. It worked for me.
In case u are still interested in this question:
The click event is implied when selecting/checking a radio button, all you need is to bind a procedure to it, this is just ONE way:
//js for radio button click
$('input[type="radio"]').on('click', function(){
window.alert($(this).val());
})
<!--html-->
<input type="radio" value="first" name="same"/>
<input type="radio" value="second" name="same"/>
<input type="radio" value="third" name="same"/>
Whether done manually or programmatically, it seems that clicking an already checked radio button does not necessarily have any effect!
Assuming HTML of:
<input type="radio" name="rv_submit" value="delete" id="rb2" checked>
Trigger the required action via jQuery as follows:
$('#rb2').prop('checked', false); // Turn off 'checked' ...
$('#rb2').click(); // ... or click() has no effect
I am wondering whether you can make a button, function like a HTML Radio button. I am trying to create a form where the user clicks on the said button and a value is thus selected, but the user is not directed until selecting another option and submitting the form. Does anyone know how to go about doing this?
(I don't mind the use of other languages including javascript etc.)
jQueryUI has a Button Widget that converts radio buttons or checkboxes into buttons.
Example from the site:
http://jqueryui.com/demos/button/#radio
<script>
$(function() {
$( "#radio" ).buttonset();
});
</script>
<div class="demo">
<form>
<div id="radio">
<input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
<input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label>
<input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
</div>
</form>
</div>
You can visit the link to see it in action.
First, on the page you're talking about, it sounds as if the user is taken somewhere else -- i.e., a submit-like action is taken -- merely by his selecting a radio button. I don't believe that this is the very best practice.
Second, you should imo keep the two radio buttons: they work great and, once selected, a radio button can't be cleared except by selecting another button. This is just what you want.
To be sure that the two buttons you require have been selected, give each button an onclick handler that sets a switch: some button in this group was selected.
Then, when he clicks submit, check those two switches and tell him if he forgot to click a button.
Yes, you need JavaScript to do all this.
I want the form to be submitted when the user chooses one of the radio button options. I know how to do this with select fields:
<select name='something' onchange="this.form.submit()">
But how to do this with radio buttons?
You can use onclick:
<input type="radio" name="something" onclick="this.form.submit()">
You can test for compatibility (of keyboard entry like left/right or tabbing then pressing space/enter and even keyboard only navigation plugins) using this example.
Try hooking into the onclick event.
<input type="radio" name="something" value="somethingvalue" onclick="this.form.submit();" />
In the callback of a HttpRequest I have, I run this jQuery code:
$("input[value='"+data.notetype+"']").click();
So the radio button with the value of data.notetype is selected. This works fine. But I need to perform an action based on what button is now selected.
If I use the change() method like this
$("input[name='note_type']").change(function () {
var clicked = $("input[name='note_type']:checked").val()
alert(clicked);
});
it works fine when I click on the radio buttons, but when the radio button is set by the first line of code above, nothing happens.
If I use the click() method like this
$("input[name='note_type']").change(function () {
var clicked = $("input[name='note_type']:checked").val()
alert(clicked);
});
it works fine when I click on the radio buttons, but when the radio button is set by the first line of code above, the message box shows the value of the radio button that was selected, not the one it is changing to.
Can anyone let me know how to fix this problem? Thanks for reading.
$("input[name='note_type']").click(function () {
var clicked = $(this).val();
alert(clicked);
});
Here is a solution for this problem, I think this will help you
For example following is your html
<input type="radio" name="some_name" value="1"> 1 <br />
<input type="radio" name="some_name" value="2"> 2 <br />
<input type="radio" name="some_name" value="3"> 3 <br />
<input type="radio" name="some_name" value="4"> 4 <br />
Try following jquery for this html
$('input[type=radio]').bind('click', function() { alert( $(this).val() ); });
I hope this will help