I'm using a Twitter Bootstrap 3 form with (4) Radio form controls. When a user clicks on any of the four radio controls, an <input type="text"> appears. How do I make it, so that the first input, on any radio option select is "autofocus".
To see code, if you may, please visit: https://von.host/cart.php?a=add&pid=20
It just seems silly to have the user click a radio button, than click again on the input field and type, than click once more on submit button...instead of three clicks, I wish to make it two.
p.s. - i added "autofocus" to all (4) input fields, but it only worked for the first one...of course ^ _ ^
I think, you can this only with a little part of javascript :) for example:
$('input[type="radio"]').focus(function(){
$(this).parent().find('input[type="text"]').focus();
});
In nutshell, this code pass the focus for the input field, when the radio give it.
Keep the autofocus attribute in the first one and use this jQuery code:
$('.domainoptions .option input:radio[name="domainoption"]').change(
function(){
$(this).parent().next().find('input[type="text"]').first().focus();
}
);
Related
I have an input box and a radio box. When I click on the input box and then click on the radio box, I suppose the control should transfer to the radio box immediately. Instead, the first time, it shows the error message and the second time, it transfers the control to the radio box.
You can find a plunker of the issue here: No transfer of control to the radio box except after the second click
Yes, that's because you're showing the error as a block, this shifting the radio button.
To image that, imagine that the error pops when the mouse button goes down, while the radio box is checked when the mouse button goes up.
It might be a split second, but it's enough for your user to be fooled.
I would recommend either displaying your error in another way / Findign another layout for your form, or just validate the form on submit.
To validate the form on submit, Use the second parameter of the FormBuilder.group call :
this.myForm = fb.group({...}, { updateOn: 'submit' });
Here is an example of a working form, because the error is blurred out instead of removed (hidden vs style.opacity) : https://next.plnkr.co/edit/QEEviTpocGJ7QHus?open=lib%2Fapp.ts&deferRun=1
I've spent so much time trying to figure this out myself (hours and hours!) and I am slowly figuring it out but at this stage I could really do with some help.
Right now, I think the problem is that the radio button has a ID only so I cannot trigger both together.
Objective:
I need to default a specific radio input that exists in 2 forms on the same page. The radio button has the same ID in each form. I cannot change the code these forms use directly. I can only manipulate it with javascript or jquery.
Each form is wrapped in it's own unique div so I have tried to search and find the radio input in each unique div and trigger the click hoping both would be clicked but only one radio button is clicked.
Please see my JSFiddle Code below
//Form 1
<div id="tmp_order2step-70097"><input type="radio" id="pid-909272"
name="purchase[product_id]" value="909272"></div>
//Form 2
<div id="tmp_order2step-70097-154"><input type="radio" id="pid-909272"
name="purchase[product_id]" value="909272"></div>
//Trying to click Form 1's radio button
$(function () {
$(document.getElementById('tmp_order2step-70097')).find("#pid-
909272").trigger("click");
});
//Trying to click Form 2's radio button
$(function () {
$(document.getElementById('tmp_order2step-70097-154')).find("#pid-
909272").trigger("click");
});
Result - Only one radio button/input clicked.
http://jsfiddle.net/0j5tyhq8/
Thank you for any help/advice with this!
UPDATE: Thanks for the advice. I cannot change radio names without breaking the code so I have started over and used one form which works fine of course.
I am using jQuery validation for my application.I have a form that having 2 select boxes.The second select box is disabled according to the first select box value. Also these boxes are coming under an add more functionality. So the form may have multiple such boxes. Thus I am added the validation rules using addClassRules. example code is below.
$.validator.addClassRules("classname", { required: true});
The validation working fine. I want to remove the validation for second dropdown when the first dropdown having a specific value. Currently I have the following issue
once the validation works
change the dropdown value
second box disabled.
click on the second dropdown and then click on out side the error message displayed for second dropdwon.
Form will submit when click on submit button.
I have tried with $('form').validate({ignore:":disabled"}); inside first dropdown's onchange function. but it is not working.
I hope will get a solution for this problem.
Thanks in advance
I'm wondering how I can use JavaScript to accomplish the following:
I have an input area with five dropdownlists, and each one has a corresponding radio button. When a dropdownlist is clicked to make a selection, I would like the radio button paired with it to become checked right then. Any help would be appreciated.
Its kind of simple really. Here is a small code for you.
ID the 5 listboxes as "sel1", "sel2" ,...
ID the 5 radio buttons "rad1", rad2,.. Make sure the radio buttons have same name though!
Next, put this function in as a javascrip:
function makeSelection(radioid){
document.getElementById(radioid).checked=true;
}
In the select boxes, attach onchanged listeners:
ie;
<select ... onchange="makeSelection('rad1');" >.. for the 1st select box,
<select ... onchange="makeSelection('rad2');" >.. for the 2ns select box, etc.
I'm posting the link where I am having the problem. I'm having issues with the radio buttons.
I have three images and I'm suppose to be able to click on a radio button and the image changes. That part works great. But when I go for another button, the last one I clicked on stays checked. How do I make it uncheck? I only want what is selected to be checked. ty!!!!!
http://www-desi.iro.umontreal.ca/~valiquki/tp3Kim/TP3KimValiquette.html
The radio buttons have to have the same "name" attribute to be a part of the same group.
Make sure that all of the radio buttons are in the same group. See this for how to do so.
Basically, use the name attribute to assign a group name. That way they will be part of a group and the browser will handle selection/deselection. Name is not the name of the radio button, but the name of the group.
You could use 'side-dishes' if you like for all of them.