[Locked] Can't get my Javascript to work

Report · Sep 25, 2009

I have a questionnaire form where in many cases, the answer from one question - they're mostly "Yes/No" radio button groups - determines which question is next. I've successfully used some javascript functions to move the focus accordingly, but there's one troublesome situation. When Question 1 is answered "No", focus goes directly to Ques. 2 - this works fine. If, however, the answer is "Yes", I have to display a date-of-birth in a readonly text field, then immediately go to question 2; The dob is stored in a variable ($dob) which was passed via a file (for now) from the previous form, and fetched by a php script when the form loads. I've been trying all day to make this happen; I must have tried a hundred different ways, and I've exhausted the w3 schools tutorials & references. Can someone tell me how to do this?

Heres a picture of the first two questions on the form:

Yes No 1. Are you at least age 16, but under age 40? Date Of Birth (w/only show if Yes):

Yes No 2. Are you an active duty Veteran of the U. S. Armed Forces (If No, Question 3 w/be next)?

There's a read only text field at the end of the question 1 line, which stays blank if the answer is No, but is to display the dob if the answer is Yes. The field never needs to have focus.

Report · Sep 25, 2009

no code?

Report · Sep 25, 2009

Right now there isn't any, and I tried so many different ways that I wouldn't know which code to show. I tried executing a function (coded dozens of ways from ideas in w3schools) executed from the onChange event of the Yes/No radio buttons, but couldn't get the field to display anything then skip to the next Yes/No group. Don't know what to code in the function either. Tried executing a function in the onFocus event of the text field then skip out in the onChange; no matter how I coded the function, the data didin't dislay nor did the focus change. I tried using an inline script, and that didn't work either. I even tried making the text field hidden, then change it to visible if the Q1 answer was Yes, but I couldn't get that to work either.

I simply do not know how to code this issue. I just started learning Javascript yesterday, and the wschools tutorial is surface level at best, and the reference material there is no better. I live 125 miles from the nearest city that has bookstores, so I can't just pop in an buy some books, and I have a schedule to meet. I'm really in a quandry, and any assistance will be very much appreciated.

What I can do is show the code for the affected part of the form, though I don't know if that will help. Here's the code for the two radio buttons:

      <input type="radio" name="RadioGroup1" value="Yes" id="RadioGroup1_1" tabindex="1" onChange="setFocus_y1()">
      <label>No</label>
      <input type="radio" name="RadioGroup1" value="No" id="RadioGroup1_2" onChange="setFocus_n1()">

Here's the code for the text field:

      <input name="DOB" type="text" id="DOB"  readonly value="<?php echo $db2; ?>" onChange="setFocus_n1()" style="text-align: center; color: #006; text-transform: none; font-variant: normal; font-weight: bold; line-height: normal; font-style: normal; font-size: 10pt; font-family: Arial, Helvetica, sans-serif;" tabindex="2" size="10" maxlength="10">

Here're the functions mentioned in the radio buttons:

 function setFocus_y1()
 {
  document.getElementById("RadioGroup2_0").focus()
 }
 function setFocus_n1()
 {
  document.getElementById("RadioGroup2_0").focus()
 }

setFocus_y1() is supposed to, somehow, display the date of birth in the text field, then go to the second radio group. The dob is stored in $dob (by the php script at the top of the form). That part works, because when I changed the value= php script to echo $dob, it did so as soon as the form was displayed, as would be expected. I've been trying to find some way to copy the dob from $dob to $db2) a variable also defined, but without a value. in the php script at the top of the form. Nothing I tried worked. I've removed all that code from setFocus_y1(), for the time being, because it was giving me trouble; sometimes fatal errors.

Report · Sep 25, 2009

OK so I'm not very good at javascript (or at least not as good as I wish I were) but I think this is what you need to do:

Set an id for the area you want to display the birthday then use GetElementById to write the php birthday variable into the id that you've setup to display the bday.

<label>Yes</label>
<input type="radio" name="RadioGroup1" value="Yes" id="RadioGroup1_1" onChange="setFocus_y1()">
<br><span id="show_birthday"></span>

<label>No</label>
<input type="radio" name="RadioGroup1" value="No" id="RadioGroup1_2" onChange="setFocus_n1()">

function setFocus_y1()
{
document.getElementById("RadioGroup2_0").focus();
document.getElementById("show_birthday").write("<?php echo $dob ?>");
}

function setFocus_n1()
{
document.getElementById("RadioGroup2_0").focus()
}

Report · Sep 26, 2009

Hi, and thanks for the help; I really appreciate it. I had been trying something like that, but was dancing around the edges. Couldn't figure out how to make the $dob appear. I never would have guessed to embed a php echo in the document.write.

I pretty much folowed your code, but it still didn't work. The focus goes where It's supposed to go, but the dob doesn't display. Here's my code:

OK so I'm not very good at javascript but I think this is what you need to do:

Unequivocally, you certainly know much more than I do with only 3 days experience.

1. The Javascript function is:


 function setFocus_y1()
 {
  document.getElementById("DOB").write("<?php echo $dob ?>");  // "DOB" is the id= of the field in the form
  document.getElementById("RadioGroup2_0").focus()
 }

2. The field code in the form is:


<input name="DOB" type="text" id="DOB" style="text-align: center; color: #006; text-transform: 
none; font-variant: normal; font-weight: bold; line-height: normal; font-style: normal; font-size:
 10pt; font-family: Arial, Helvetica, sans-serif;" tabindex="2" size="10" maxlength="10">

I tried surrounding the field with <span> </span> as in your code, but that caused the form to go all askew, so I took them back out.

Then I tried removing the <input tag, replacing it with your code:

<span id="DOB"></span>

But not only did that not work, but the focus didn't even change to the next radio group.

By all that's holy, I would've expected that your code would work, so I suspect I'm still doing something wrong. Do you/anyone have any idea what it might be?