Refresh page with a radio button

[joanne22]

Hi,I am hoping someone can help me. I am new to javascript and am creating a questionnaire. I want to make it so that when someone selects a particular answer, the page will refresh with specific questions depending on their answers for the previous, does anyone know how to do this??Thanks very much!!

[Pollux]

I'm sure theres a number of different ways you could do this. The first idea that jumps to mind is to create a div which contains the question and form elements which you want to optionally display. Give this div an id attribute and set its style so display="none" to make it invisible. Then write a javascript function which is called onchange of the form element it is dependent upon. This function will need to check the answer to that question by retrieving the value and comparing it to your expected result. Based on whether that answer was correct or not, you'll need to dynamically change the div's style so display="block" to make the div visible.

var elem = "divId";document.getElementById(elem).style.display="block";

Once you've got it working, you'll probably want to make it slightly more generic so you can reuse the same JS function to make other new questions appear. Probably by passing in the id of the div to display as a parameter to the function when it's called.Hopefully that's at least slightly helpful! But say if you need any of it in more detail.

[vijay1440]

I'm sure theres a number of different ways you could do this. The first idea that jumps to mind is to create a div which contains the question and form elements which you want to optionally display. Give this div an id attribute and set its style so display="none" to make it invisible. Then write a javascript function which is called onchange of the form element it is dependent upon. This function will need to check the answer to that question by retrieving the value and comparing it to your expected result. Based on whether that answer was correct or not, you'll need to dynamically change the div's style so display="block" to make the div visible.

var elem = "divId";document.getElementById(elem).style.display="block";

Once you've got it working, you'll probably want to make it slightly more generic so you can reuse the same JS function to make other new questions appear. Probably by passing in the id of the div to display as a parameter to the function when it's called.Hopefully that's at least slightly helpful! But say if you need any of it in more detail.

<{POST_SNAPBACK}>

Hi! try out this. if ur button is a radio button as follows,<INPUT type="radio" > , add an event handler for that button as<INPUT type="RADIO" onclick="f()">and the defination of the function f() is,function f(){ document.urForm.submit();}********thats itand the prerequesite is that u have to have a form which u want to submit 'urForm'Bye

[joanne22]

Thanks that is great! I've managed to get that working. Do you have any idea how you would manipulate it if the user was to go back to the original question and change their answer, because at the moment if you select different answers the questions all end up being displayed on the page anyway?

[Pollux]

Glad you've made progress! It sounds like you've implemented it the way I described, so I'll explain for that, but if you based it somehow upon vijay's response, then this won't be all that helpful, and I'll just go off and crawl under a rock. All you need to do is as well as setting the style for the newly selected radio button's new question, you also need to set the display style for all the other alternatives which weren't selected to "none", so they don't display. If you post the code you've come up with so far then it will be easier to see and explain the best way to go about this.

[joanne22]

Yeah, I implemented it your way, I think I may have explained my initial problem a bit vaguely! My code for the first question is...<div class="start" id="main"><form name="eBayform"><table class="center"><h3>1) Do you have a buyer/seller account registered with eBay?</h3> <tr> <td><input type="radio" name="account" value="buyer" onClick="onchangeQu1(this,document.getElementById ('both'));" /> Buyer</td> <td><input type="radio" name="account" value="seller" onClick="onchangeQu1(this,document.getElementById ('both'));" /> Seller</td> <td><input type="radio" name="account" value="both" onClick="onchangeQu1(this,document.getElementById ('both'));" /> Both</td> <td><input type="radio" name="account" value="neither" onClick="onchangeQu1(this,document.getElementById ('neither'));" /> Neither</td> </tr> </table></form></div>and then the function...function onchangeQu1(theRadio, theObject){ if(theRadio.checked) theObject.style.display='block'; else theObject.style.display='none';}I have questions targeted for respondents who either use ebay for buying/selling or not at all, therefore if a user initially selects 'neither' but then changes their choice to 'seller', the current state of the code means that all the questions are displayed!! Thanks very much for you help!!

[Pollux]

ah, I see! Ok, well theres a couple of things I'd recommend you change first. You only need to send the element id in the call to onchangeQu1, then get the actual object reference by calling getElementById in the function. That will simplify your function calls some what.Also, your html contains a <h3></h3> inside a table but outside a cell which isn't valid, so you probably meant to put a new row with one cell in there.The simplest way of only displaying the correct div is to keep an array of all of them outside the function. It could be done in a neater way, but this is probably the easiest and simplest way of doing it. Heres the updated script:

var qu1Div = new Array(2);qu1[0] = "both";qu1[1] = "neither";function onchangeQu1(theRadio, theObjectId){    theObject = document.getElementById(theObjectId);	    if(theRadio.checked){        // Remove all.        for(i=0; i<qu1.length; i++){            document.getElementById(qu1[i]).style.display = "none";        }        // Display the correct one.        theObject.style.display='block';    }else{        theObject.style.display='none';    }}

[joanne22]

Hi again!I implemented the code as you said, changing the headings and the code in the tables to:<td><input type="radio" name="account" value="buyer" onClick="onchangeQu1('both'));" /> Buyer</td>but the questions are all still showing when I click on the different radio buttons, it must be something really simple but I just can't see what it is! Any idea what I might be doing wrong?Thanks

[Pollux]

Hi there! You've got an extra bracket around your parameter in the code you posted.That's probably not the actual problem though if it's running the function semi-correctly. So, if you can post all your code again I'll see if I can see what's happening.

[joanne22]

ah thanks for that! Its still not working though, here is what I havevar qu1Div = new Array(2);qu1[0] = "both";qu1[1] = "neither";function onchangeQu1(theRadio, theObjectId){ theObject = document.getElementById(theObjectId); if(theRadio.checked){ //Remove all. for(i=0; i<qu1.length; i++){ document.getElementById(qu1).style.display = "none"; } //Display correct one theObject.style.display='block'; } else{ theObject.style.display='none'; } }and the other part...<div class="start" id="main"><form name="eBayform"><h3>1) Do you have a buyer/seller account registered with eBay?</h3><table class="center"> <tr> <td><input type="radio" name="account" value="buyer" onClick="onchangeQu1('both');" /> Buyer</td> <td><input type="radio" name="account" value="seller" onClick="onchangeQu1('both');" /> Seller</td> <td><input type="radio" name="account" value="both" onClick="onchangeQu1('both');" /> Both</td> <td><input type="radio" name="account" value="neither" onClick="onchangeQu1('neither');" /> Neither</td> </tr> </table></form></div>

[Pollux]

ah, one mistake (mine I'm afraid ) is the array is named qu1Div but referenced qu1. Just change it to:

var qu1 = new Array(2);

Let me know if thats it, otherwise I'll keep looking!

[joanne22]

yeah thats right, but its still not working! Is there any chance it could be something I've coded elsewhere, in the style or something?Thanks

[Pollux]

Theres another problem in the code, your fault this time! Your call to onchangeQu1 is only passing one value, but the function code uses both of its arguments.

<input type="radio" name="account" value="neither" onClick="onchangeQu1(this, 'neither');" />

[joanne22]

again, thank you! I think I misunderstood what you initially said about the function calls! all this changed still not working though, its getting on my nerves now!

[Pollux]

I think there must be a problem else where in your code because this is working fine for me now. It could be some of your styles are conflicting. Can you post the rest of the html document? Particularly the "both" and "neither" divs.We'll get it eventually!

[joanne22]

yeah, i wondered if that was the case! my code is really really long as i have coded all the questions, would it be better to email it to you?Thanks

[Pollux]

Ok, you can use the "Send E-mail" feature on profile.Alternatively you can just post the divs, but if thats not the problem then I'll have to keep asking you to post more bits.

[Pollux]

Strangely, your code seems to be working fine for me in both IE and Firefox. There are a couple of errors (such as closing the style and script tags: <style type="text/css" /> before their contents, you need to remove the slashes) also the javascript function should be in the head really. But these things apparently aren't stopping it working for me. Just to make sure I completely understand what you're seeing: after pressing all the radio buttons one at a time you end up with question 1), questions 2) -> 3) and questions 4) -> 12) ALL showing at once?You import an external javascript "utility.txt" (which should be named .js really btw). What's in this file?

[joanne22]

ah I think thats the problem! Yeah that is what happens but I want it to display qus 2 and 3 only if the person selects neither, the questionnaire will then terminate as the questions will be irrelevant to them. What I wanted to do was that if someone accidentally selected 'neither' (2 and 3 would be displayed) and then selected one of the other options instead - 2 and 3 would then disappear but at the moment everyone just sees everything!That utility file was an experiment that went wrong, I don't need it so will delete it!

[Pollux]

Sorry you lost me a bit there, what was the problem? Does it work now then?

[joanne22]

Sorry!It works to a certain degree, i.e if a user selects neither qu2 and qu3 are displayed and if they select ,buyer/seller/both qu 4 is displayed. I was just wanting to cater for the situation when a user intends to select buyer for instance but selects neither by mistake. This will display qu2 and 3. If they then change their mind and select buyer qu2/3 will still be displayed with qu4 following. If the user is a buyer I don't want them to answer 2 and 3 because that doesn't really make sense so I want the questions to disappear if the user behaves in this manner. Am I making sense now?