I can't seem to find any information on whether what I would like to do is possible or not.
Here is my current code: http://jsfiddle.net/richerdk/zudCf/
Is it possible to have a radio button within the result of another radio button ex:
User selects yes radio button this is the result:
<div id="div1" class="tab">
<p>Why do you think the sky is blue, is blue your favorite colour? </p>
</div>
Could I add another yes/no radio button inside of this?
If not how would I go about writing if else statements so I could have different results based on the yes/no selections.
Thanks,
Richerd
With you current code you need to update the nav var
var nav = document.getElementById('nav').getElementsByTagName('input');
http://jsfiddle.net/pjdicke/zudCf/2/
It's valid but you will need to set different name attributes to them and set as disable the radio buttons when not active or the will be serialized on submit. A server side validation will do too.
Related
I'm trying to make my radio buttons look like normal buttons - how would I do that? I have seen a lot of other questions regarding this but i am not able to get a definite answer. This is what I have tried:
<input name="question${questionNumber}" id="q&a" class="press" type="radio" value="${letter}"><label for="q&a">${letter}</label>
However, my javascript code is not logging it and I am still having to click the radio button for the javascript to recognise that I have clicked the button and it's value is only found if I click a radio button. How do I solve this issue?
Why use a radio button at all if you want it to look like a normal button? Radio buttons are for selecting 1 option out of many, like in a multiple-choice test. Their design reflects this purpose and most people know how to interact with radio buttons when they see them. If you use a normal button, you can use
Element.addEventListener(“click” function() {
// do your stuff
})
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.
So this is tough to describe but I cannot figure it out, I feel like i am close however!
Basically I have a list of things, that need to be organised.
lets pretend its books, I have all these books, with all the information on them (author, length, title, genre). If I wanted to search my array of books specifically for comedic books. I would tick the comedy tickbox and hit search.
I have gotten this to work easily! the tricky part is that I would like it to search straight away when it is selected, however my javascript searches through checkboxes to see which checkboxes are selected before it runs my code that eliminates the answers that are irrelevant. so it needs to be a checkbox value that is submitted.
Is there a way I can have an image that functions as a button, that carries a value of a checkbox...???
so far I have gotten this close:
<div class="wells">
<input type="image" value="comedy" src="img/pieces/comedy.png"
alt="comedy" onclick="myFunction()" checked>
</div>
I know myFunction works and does what it is told.
I literally need the value of the checkbox to be used as a submit button.
the long way is like this:
<img class="imgcomedy" src="img/pieces/comedy.png"> :
<input type="checkbox" class="roundedOne" name="comedy" value="comedy">
then the user would scroll to the submit button and hit send, sending the value of the checkbox to the function myFunction().
I know myFunction works and does what it is told.
I literally need the value of the checkbox to be used as a submit button.
You can give image which behaves as checkbox, when you click on submit it gives values like true.or false for that check box.
One possible solution, depending on what your actual requirements are...
You can use a <button> instead of a checkbox; the contents of a button are fully customizable with essentially any HTML...
<button type="submit" class="roundedOne" name="comedy" value="comedy">
<img class="imgcomedy" src="img/pieces/comedy.png">
</button>
You may want this as a submit button, and/or attach a javascript click-handler.
If you need several categories chosen together, such as "list things in either category drama or comedy" which you can do with checkboxes, you have several options.
You could also include a checkbox but keep it hidden, and then check/uncheck it by using your click-handler attached to the button.
You could keep an <input type="hidden" value=""> field and set the value in your click-handler, adding and removing categories; for example
initial: value=""
after clicking the comedy button: value="comedy"
after clicking the dramay button: value="comedy,drama"
after clicking the comedy button again: value="drama"
A quick question which is driving me a little insane. I have some radio buttons on a lightbox that is fired when a user wishes to edit some entered values. This is an old system which I didn't write. Now the problem/solution is relatively easy however when testing in IE7 I've noticed some issues with:
document.getElementById(thisID).checked = true; // thisID is the ID of a radiobutton
Basically the above code doesn't set the checked value on a radio button.
I thought I could sort this by using:
document.getElementById(thisID).defaultChecked = true;
However if I return and change my radio button values previous radio buttons remain selected, as their .defaultChecked status hasn't been updated! I can't control the number of radio buttons as they are generated on the server (as are their IDs) and the values for the radiobuttons are stored on the client until the form is submitted.
Is there a way around the document.getElementById(thisID).checked bug in IE7?
I just had to loop through all the radiobuttons and set the .defaulChecked to false before resetting... damned IE7!
There is an possible duplicate which consists of the same issue in which the checking of the radio button is not working in IE7.
Kindly go through the link Check Here
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.