Script Doesn't Work Correctly In Browser

[creacon]

I have a page containing a questionnaire form which is mostly Yes/No radio buttons. For each radio button group, I execute a javascript function form on Change"", to move the focus to the next appropriate field, depending on the Yes or No answer (e.g. answer Yes to Question 2 takes it to Question 2 a, if No, goes to Question 3). I'm using Dreamweaver for my page/form development, and xampp, for my local server and Yahoo web hosting for my remote server. When I preview the form in Dreamweaver Live View, the first question is automatically highlighted - as it should be - and when I click the Yes or the No button, the focus moves and highlights the correct next question, etc. When, however, when I preview the page in IE 7, not only are the fields not highlighted, but I have to press the tab key to make the focus change. It does, in fact move to the correct next field and puts a dotted border arount it, instead of a highlight, but then when I select Yes or No again, I have to press tab to make it move.Here's a sample of the function and the radio button code:Here are the functions for the radio buttons for Question 2:

  <script type="text/javascript">	function setFocus_y2()	{		document.getElementById("RadioGroup3_1").focus()	}	function setFocus_n2()	{		document.getElementById("RadioGroup7_1").focus()	}  </script>	

Here's the radio button code for that question:

    <form name="QstnrPg1" method="post" onSubmit="return show_message();" action="<?php echo $_SERVER['PHP_SELF']; ?>" id="QstnrPg1">                              .                              .                              .<label>Yes</label>    <input type="radio" name="RadioGroup2" value="Yes" id="RadioGroup2_0" tabindex="3"onChange="setFocus_y2()">    <label>No</label>    <input type="radio" name="RadioGroup2" value="No" id="RadioGroup2_1"onChange="setFocus_n2()">

Can anyone tell me why the form behaves this way; what I'm doin wrong or not doing at all?

[jeffman]

Assuming "RadioGroup3_1" exists, there is nothing wrong with the way you call the focus method.Step one for debugging this kind of thing is to verify that your functions are actually being called. Put an alert statement at the top of one. See if it goes off when it should. If not, there is something wrong with your onchange assignment.From here, it looks like there is no space between a closing quotation mark and the onchange assignment in your button tag. Some browsers may not like that. Firefox doesn't seem to mind, but I can't speak for IE.To simplify your experiments, try this page: http://www.w3schools.com/js/tryit.asp?file...adio_focus_blur

[creacon]

Assuming "RadioGroup3_1" exists, there is nothing wrong with the way you call the focus method.Step one for debugging this kind of thing is to verify that your functions are actually being called. Put an alert statement at the top of one. See if it goes off when it should. If not, there is something wrong with your onchange assignment.From here, it looks like there is no space between a closing quotation mark and the onchange assignment in your button tag. Some browsers may not like that. Firefox doesn't seem to mind, but I can't speak for IE.To simplify your experiments, try this page: http://www.w3schools.com/js/tryit.asp?file...adio_focus_blur

Thanks for the response and the hint about the missing space. I fixed the ones that had the missing spaces, but that didn't help. Actually I know the functions are being executed, because (when I press the tab key) the focus moves to where it's supposed to go. The problems are that; 1) when the focus moves, it doesn't highlight the radio button; it just puts an almot invisible dotted border around it, and 2) HAVING TO PRESS Tab to make the focus move. This only happens in the browser; when I use Dreamweaver's "Live View", it all works perfectly. I know I must be missing something, but I just don't know what.

[jeffman]

Dreamweaver cannot be trusted as an accurate representation of what browsers really do. The code works fine for me in Firefox. There is nothing complicated about a focus() method. Since something DOES happen in your browser (is it IE?) I can only assume it's behaving correctly there also. I didn't realize before that you were actually getting results.You might try adjusting the behavior of input[type="radio]:focus in CSS. I have no idea if that'll work, but it's worth trying.

[justsomeguy]

Dreamweaver cannot be trusted as an accurate representation of what browsers really do.

Just to point out, Dreamweaver MX through CS3 used Opera's Presto engine, Dreamweaver CS4 uses Webkit. So it will show a decently accurate representation of a browser, but only one specific (relatively uncommon) browser.

[creacon]

Dreamweaver cannot be trusted as an accurate representation of what browsers really do. The code works fine for me in Firefox. There is nothing complicated about a focus() method. Since something DOES happen in your browser (is it IE?) I can only assume it's behaving correctly there also. I didn't realize before that you were actually getting results.You might try adjusting the behavior of input[type="radio]:focus in CSS. I have no idea if that'll work, but it's worth trying.

Yes I am using IE7, and this is driving me crazy. I can expect that the customers that'll be using this questionnaire w/most likely be using that also, so I rally need to get it working there. I looked up the CSS focus thing, but was completely snowed by it. I copied a piece of code form their "Tryit", but it didn't do anything, and I don't even understand how/what it does.Here's a link to the page that I used: http://www.w3schools.com/CSS/tryit.asp?fil...ycss_link_focusI copied the following code:

<style type="text/css">input:focus{background-color:yellow;}</style>

and pasted it in the corresponding location of my page, but nothing different happened. I'm so confused!?!?!?!

[justsomeguy]

The note on that tryit page indicates that IE7 and below does not support the focus class. If you want to use several things that various versions of IE don't support, you might find Google Chrome Frame useful:http://code.google.com/chrome/chromeframe/

[dsonesuk]

you could try something similar to thisfunction clearFocusBorder(){elementTotal = document.forms[0].elements.length;for(i=0;i<elementTotal;i++){if(document.forms[0].elements.type=="radio"){document.forms[0].elements.style.borderWidth="0px";}}}function setFocus_n2(){clearFocusBorder();document.getElementById("RadioGroup7_1").focus()document.getElementById("RadioGroup7_1").style.borderStyle="dotted";document.getElementById("RadioGroup7_1").style.borderWidth="1px";}a dotted square border is placed round radio button. but doing this way requires you to clear any previous formatting and that's where the clearFocusBorder() function comes in

[dsonesuk]

previous posted code is based on this, which I incorporated your form in<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/function setFocus(x){var next; next=x.tabIndex;elementTotal = document.forms[0].elements.length;for(i=0;i<elementTotal;i++){if(document.forms[0].elements.type=="radio"){document.forms[0].elements.style.borderWidth="0px";}} if(x.type!="radio") { document.forms[0].elements[next].focus(); } else { if(x.value.toLowerCase() !=="no") { next++; } document.forms[0].elements[next].focus(); }if(document.forms[0].elements[next].type=="radio"){document.forms[0].elements[next].style.borderStyle="dotted";document.forms[0].elements[next].style.borderWidth="1px";} }function keypressed(e,x){ e = e? e : window.event;var Key = e.keyCode? e.keyCode : e.which? e.which : null;if (Key == 13){setFocus(x);if(e.preventDefault)e.preventDefault(); e.returnValue=false;e.cancel = true;};}/*--*//*]]>*/</script> </head><body><form id="QstnrPg1" method="post" onsubmit="return show_message();" action="<?php echo $_SERVER['PHP_SELF']; ?>"><label>Yes</label><input type="radio" value="Yes" name="r1" tabindex="1" onclick="setFocus(this)"><label>No</label><input type="radio" value="No" name="r1" tabindex="2" onclick="setFocus(this)"><label>Yes</label><input type="radio" value="Yes" name="r2" tabindex="3" onclick="setFocus(this)"><label>No</label><input type="radio" value="No" name="r2" tabindex="4" onclick="setFocus(this)"><label>blah blah</label><input value="" tabindex="5" onkeypress="keypressed(event,this)"><input value="" tabindex="6"></form></body></html>

[jeffman]

The note on that tryit page indicates that IE7 and below does not support the focus class.

<headbang!>

[justsomeguy]

[creacon]

you could try something similar to thisfunction clearFocusBorder(){elementTotal = document.forms[0].elements.length;for(i=0;i<elementTotal;i++){if(document.forms[0].elements.type=="radio"){document.forms[0].elements.style.borderWidth="0px";}}}function setFocus_n2(){clearFocusBorder();document.getElementById("RadioGroup7_1").focus()document.getElementById("RadioGroup7_1").style.borderStyle="dotted";document.getElementById("RadioGroup7_1").style.borderWidth="1px";}a dotted square border is placed round radio button. but doing this way requires you to clear any previous formatting and that's where the clearFocusBorder() function comes in

Actually I tried EXACTLY that - I cut and pasted and simply changed the id's appropriately, and the poorly highlighted border problem is fixed. That was certainly some important progress.However, the "clearFocusBorder()" function doesn't seem to work. I read the code, I think I understand it, and looks like it should do the job (based on my understanding of it), but the borders are not clearing. I know it's being executed because I put an alert box at the begining of it, and the alert box shows up for each move of the focus. BTW FWIW I also tried the form in Firefox and guess what. The tabbing works correctly, as it did before, but the new code for the borders doesn't occur. Could you check that code and see if I'm missing somethingAs for the tabbing problem, I don't think that's fixable because it truly appears to be an IE shortcoming (I tried it in Firefox, and it works perfectly).Is there some way to programmagically invoke the tab key in each of those focus-move functions?

[dsonesuk]

well, the reason the formatting of firefox radio buttons does not work IS because IT NEVER HAS.The code i gave was to highlight the radio button of a IE browser, which can be be formatted to give a similar effect as the highlighting (dotted outline) of a radio button produced in Firefox.how many form tags <form> do you have, because at present it is set to clear the radio border of the first form only.

[creacon]

well, the reason the formatting of firefox radio buttons does not work IS because IT NEVER HAS.The code i gave was to highlight the radio button of a IE browser, which can be be formatted to give a similar effect as the highlighting (dotted outline) of a radio button produced in Firefox.how many form tags <form> do you have, because at present it is set to clear the radio border of the first form only.

Actually there're two; the first one is display only - displays the name/dob passed from the first page. The second on is the one with all the radio buttons.I'm not sure what changes need to be made to the clear function; I tried changing "...document.forms[0]..." to "...document.forms[1]...", but then NONE of the border functions worked.OH GLUBBBE! I just looked, and, being the dunce that I am, I only changed the 0 to 1 in the "elementTotal = " code line. When I changed the digits in the rest of the code, VOILA! It worked. I know it's hard to believe, but I'm learning (whenever somthing bangs me in the head - DUHHH!). I even find it hard to believe myself that I'm learning, but I think I am.Thanks a hundred gozillion for this help. Now if I could just, somehow, miraculously programmagically invoke a tab key press, everything would be perfect.

[dsonesuk]

also, as mention before focus does not work for IE (well except for IE8 I think), that why the focus() can be used for browsers other than IE, the elements[next].border change etc forces the focus on that element to give that effect.the below code uses tabindex to move from on radio button to another and then set highlight.i t gathers what radio button was clicked, find out its tabindex and moves to next required radio button depending on chosen option, 'Yes'-move up two tabindex values, 'No' move up one(which will probably require adjusting to your needs). function setFocus(x){var next;next=x.tabIndex;elementTotal = document.forms[0].elements.length;for(i=0;i<elementTotal;i++){if(document.forms[0].elements.type=="radio"){document.forms[0].elements.style.borderWidth="0px";}}if(x.type!="radio"){document.forms[0].elements[next].focus();}else{if(x.value.toLowerCase() !=="no"){next++;}document.forms[0].elements[next].focus();//NON IE}if(document.forms[0].elements[next].type=="radio"){document.forms[0].elements[next].style.borderStyle="dotted";//for IEdocument.forms[0].elements[next].style.borderWidth="1px";//for IE}}you require tabindexes + onclick="setFocus(this) for this to work.<label>Yes</label><input type="radio" value="Yes" name="r1" tabindex="1" onclick="setFocus(this)" /><label>No</label><input type="radio" value="No" name="r1" tabindex="2" onclick="setFocus(this)" /><label>Yes</label><input type="radio" value="Yes" name="r2" tabindex="3" onclick="setFocus(this)" /><label>No</label>

[creacon]

also, as mention before focus does not work for IE (well except for IE8 I think), that why the focus() can be used for browsers other than IE, the elements[next].border change etc forces the focus on that element to give that effect.the below code uses tabindex to move from on radio button to another and then set highlight.i t gathers what radio button was clicked, find out its tabindex and moves to next required radio button depending on chosen option, 'Yes'-move up two tabindex values, 'No' move up one(which will probably require adjusting to your needs).

Thanks for the alternative code, but since we (You & I) got it working properly, save for having to press the tab key to make the focus move, I'm going to keep the earlier method; it will allow me to meet my schedules better.what I'd really like to know is whether there's some way to programmagically simulate the operator pressing the tab key, in order to make the focus moving automatic in IE, the way it is in firefox. I know I've been able to do that in local programming languages (like Paradox), but haven't found whether it can be done in web languages.