2

Let's say I have a form where people can choose what kind of pet they want and - optionally - indicate a breed and age like this:

    <input type="radio" name="pet" value="P70" /> Cat<br> 
        Breed:<br> 
        <input type="radio" name="catbreed" value="P71" /> Persian  
        <input type="radio" name="catbreed" value="P72" /> Siamese
        <input type="radio" name="catbreed" value="P73" /> Tabby  <br> 
        Age:<br> 
        <input type="radio" name="catage" value="P74" /> Kitten
        <input type="radio" name="catage" value="P75" /> Adult
        <p>

    <input type="radio" name="pet" value="P78" /> Dog<br>
        Breed:<br>
        <input type="radio" name="dogbreed" value="P79" /> German Shepherd
        <input type="radio" name="dogbreed" value="P80" /> Golden Retriever
        <input type="radio" name="dogbreed" value="P81" /> Poodle  <br> 
        Age:<br> 
        <input type="radio" name="dogage" value="P82" /> Puppy
        <input type="radio" name="dogage" value="P83" /> Adult

If they first choose "cat" and then switch to "dog," the radio buttons will take care of that. But if they've already selected a breed or age for the cat, there's no way to deselect that. (And they're already 70 questions into the form, so resetting the whole thing is a hassle.)

How can I add a javascript that will deselect the breed and age for one pet if users change their minds and switch to a different pet?

UPDATE: I probably wasn't clear enough in my question. I'm not looking to add a button to reset the breed and age values, I just want it to be automatic and idiot-proof. Clicking "cat" should erase any values that might be there for dogbreed or dogage, and clicking "dog" should erase any values that are there for catbreed or catage.

1
  • Sorry about the +1/-1 on this ... clicked the friggin button by accident.
    – Dave G
    Jun 23, 2011 at 13:23

2 Answers 2

1

Since all your questions seem to have unique values, the easiest way would be to make all the cat and dog breeds the same name, like "animalbreed", and do something similar with "animalage".

This might require some rearranging on the backend, but it would solve your frontend problem in the easiest way.

1
  • Hmm... That would require the user to select a breed and age for the new pet too. But what if they just wanted to switch from a Siamese kitten to any kind of dog? (Remember, breed and age are optional.) I something that deselects catbreed and catage when the user clicks on "dog."
    – Trevor
    Jun 23, 2011 at 14:51
0

This is totally brute force. Gets all inputs, and in a loop if named catbreed, dogbreed, catage, or dogage, deslects them. It could be refined by only looping over the inputs with type radio.

function clearRadioButtons() {
    var inputs = document.getElementsByTagName("input");
    var numInputs = inputs.length;
    for (i = 0; i < numInputs; i++) {
        if (inputs[i].name == "catbreed" || inputs[i].name == "dogbreed" || inputs[i].name == "catage" || inputs[i].name == "dogage") {
           inputs[i].selected = false;
        }
    }
}

<button id='whatever' onclick='clearRadioButtons()'>Clickme</button>

See it in action on jsfiddle

2
  • This is probably on the right track, but when I go to jsfiddle to see it in action... it doesn't work. I assume the script needs to be called when I click on a button.
    – Trevor
    Jun 30, 2011 at 3:36
  • @Trevor oops I did have an error in there. Instead of selected = false it should have been checked = false. I've updated it above. Yes, to call it from a button you should wrap the whole thing in a function and call the function from the button's onclick Jun 30, 2011 at 11:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.