asked on

show div and make required on form radio select. Javascript.

I have 2 sets of radio buttons.
<form action="rsvp.php?updateguest=1" method="post">
Will you be attending?<br>
<input name="attending" type="radio" value="Yes" <?php if ($attending == "Yes") echo "Checked"; ?>>Yes<br>

<input name="attending" type="radio" value="No" <?php if ($attending == "No") echo "Checked"; ?>>No<br>

<input name="attending" type="radio" value="Not Sure" <?php if ($attending == "Not Sure") echo "Checked"; ?>>Not Sure<br>
<br>

<DIV ID="dinner">
Please select a dinner type:<br>

<input name="dinner" type="radio" value="Adult" <?php if ($dinner == "Adult") echo "Checked"; ?>>Adult<br>

<input name="dinner" type="radio" value="Vegetarian" <?php if ($dinner == "Vegetarian") echo "Checked"; ?>>Vegetarian<br>

<input name="dinner" type="radio" value="Kid" <?php if ($dinner == "Kid") echo "Checked"; ?>>Kid<br>
</DIV>

When the page loads I would like the dinner DIV to start hidden.

If attending YES is selected the div should display. If NO or Not Sure is selected the div should stay hidden or hide if yes had been selected first.

Also if yes is selected in attending a selection must be made in the dinner select. Otherwise it isnt required.

I would like to not put anything into the body onload"" as this is only on one page and the body tag is included on many other pages.

b0lsc0tt

You won't have to use body onload to do this. Make your page something like ...

<head>
<script type="text/javascript">
function doDiv(ele) {
      var div = document.getElementById('dinner');
      if (ele.checked) {
            div.style.display = (ele.value == 'Yes')? '' : 'none';
      }
}
function chkForm() {
      if (document.form1.attending.value == 'Yes') {
            if (document.form1.dinner.value == '' ) return false;
      }
      return true;
}
</script>
<style type="text/css">
#dinner {
      display: none;
}
</style>
</head>

<body>
<form name="form1" id="form1" action="rsvp.php?updateguest=1" method="post" onsubmit="return chkForm();">
Will you be attending?<br>
<input name="attending" onclick="doDiv(this);" type="radio" value="Yes" <?php if ($attending == "Yes") echo "Checked"; ?>>Yes<br>

<input name="attending" onclick="doDiv(this);" type="radio" value="No" <?php if ($attending == "No") echo "Checked"; ?>>No<br>

<input name="attending" onclick="doDiv(this);" type="radio" value="Not Sure" <?php if ($attending == "Not Sure") echo "Checked"; ?>>Not Sure<br>
<br>

<div id="dinner">
Please select a dinner type:<br>

<input name="dinner" type="radio" value="Adult" <?php if ($dinner == "Adult") echo "Checked"; ?>>Adult<br>

<input name="dinner" type="radio" value="Vegetarian" <?php if ($dinner == "Vegetarian") echo "Checked"; ?>>Vegetarian<br>

<input name="dinner" type="radio" value="Kid" <?php if ($dinner == "Kid") echo "Checked"; ?>>Kid<br>
</div>

Give this a try. Let me know if you have a question or need more information.

bol

livegirllove

ASKER

The div starts hidden. But when clicking on YES it doesn't display. No errors are thrown in Firebug. Same problem in FF and IE7.

any ideas.
thanks

b0lsc0tt

The problem is in the line below which I have corrected.

div.style.display = (ele.value == 'Yes')? 'block' : 'none';

I usually hide the div a little different so my normal method (using '') to show didn't work. Use 'block' instead and that will work.

Let me know how this works or if you have a question.

bol

livegirllove

ASKER

Ok that works perfectly.

Now I need it to alert.

If attending YES is selected. a dinner selection must be made other wise throw an alert.

If no is selected a dinner selection is not required.

If not sure is selected. a comment must be left or alert.
<form name="form1" id="form1" action="rsvp.php?updateguest=1" method="post" onsubmit="return chkForm();">
Will you be attending?<br>
<input name="attending" onclick="doDiv(this);" type="radio" value="Yes" <?php if ($attending == "Yes") echo "Checked"; ?>>Yes<br>

<input name="attending" onclick="doDiv(this);" type="radio" value="No" <?php if ($attending == "No") echo "Checked"; ?>>No<br>

<input name="attending" onclick="doDiv(this);" type="radio" value="Not Sure" <?php if ($attending == "Not Sure") echo "Checked"; ?>>Not Sure<br>
<br>

<div id="dinner">
Please select a dinner type:<br>

<input name="dinner" type="radio" value="Adult" <?php if ($dinner == "Adult") echo "Checked"; ?>>Adult<br>

<input name="dinner" type="radio" value="Vegetarian" <?php if ($dinner == "Vegetarian") echo "Checked"; ?>>Vegetarian<br>

<input name="dinner" type="radio" value="Kid" <?php if ($dinner == "Kid") echo "Checked"; ?>>Kid<br>
</div>
<br>
Comments:<br>
<textarea name="comments" cols="25" rows="5"><? echo $comments; ?></textarea>

b0lsc0tt

The alert would be in the chkForm function.

function chkForm() {
if (document.form1.attending.value == 'Yes') {
if (document.form1.dinner.value == '' ) {
alert('You need to choose a dinner');
return false;
}
}
return true;
}

You can use any message you want but that is where it should go. If it doesn't work as it is then it is because of the radio buttons and I can provide another way to do it.

bol

livegirllove

ASKER

doesnt work as is.

Also noticed that if the value was selected and then submited and then you go back to the page the dinner is still hidden even though Yes is selected. Until you click no and then yes.

If they never entered anything it works as expected.

digitalseraphim

If you have saved the "yes" choice in the database, then try changing the style block to the following:

<style type="text/css">
#dinner {
display: <?php if ($attending == "YES" || $attending == "Not Sure") echo "block";else echo "none"; ?>
}
</style>

Not sure that this will work all of the time. If you hit the back button it may not be refreshed from the server unless you set the page to not cache:

<?php
header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); // Date in the past
?>
(from http://php.net/header)

And I'm not sure that this will even work, but it's definitely worth a try!

-ds

livegirllove

ASKER

good idea but the header is called separately and is before the query.

thanks.

Im not sure why the alert isnt working. It seems to be correct in theory..

<style type="text/css">
#dinner {
display: none;
}
</style>
<script type="text/javascript">
function doDiv(ele) {
var div = document.getElementById('dinner');
if (ele.checked) {
div.style.display = (ele.value == 'Yes')? 'block' : 'none';
}
}
function chkForm() {
if (document.form1.attending.value == 'Yes') {
if (document.form1.dinner.value == '' ) {
alert('You need to choose a dinner');
return false;
}
}
return true;
}
</script>

<form name="form1" id="form1" action="rsvp.php?updateguest=1" method="post" onSubmit="return chkForm();">
Will you be attending?<br>
<input name="attending" onClick="doDiv(this);" type="radio" value="Yes" <?php if ($attending == "Yes") echo "Checked"; ?>>Yes<br>

<input name="attending" onClick="doDiv(this);" type="radio" value="No" <?php if ($attending == "No") echo "Checked"; ?>>No<br>

<input name="attending" onClick="doDiv(this);" type="radio" value="Not Sure" <?php if ($attending == "Not Sure") echo "Checked"; ?>>Not Sure<br>
<br>

<div id="dinner">
Please select a dinner type:<br>

<input name="dinner" type="radio" value="Adult" <?php if ($dinner == "Adult") echo "Checked"; ?>>Adult<br>

<input name="dinner" type="radio" value="Vegetarian" <?php if ($dinner == "Vegetarian") echo "Checked"; ?>>Vegetarian<br>

<input name="dinner" type="radio" value="Kid" <?php if ($dinner == "Kid") echo "Checked"; ?>>Kid<br>
</div>
<br>
Comments:<br>
<textarea name="comments" cols="25" rows="5"><? echo $comments; ?></textarea>

digitalseraphim

perhaps document.form1.dinner.value != ''. it may be null instead, in which case the comparison would fail, and you would not get the alert.
-ds

b0lsc0tt

Change the function to ...

function chkForm() {
for (var i = 0; i < document.form1.dinner.length; i++) {
if (document.form1.dinner[i].checked) return true;
}
alert('not');
return false;
}

Dinner is actually like an array since it uses the radio buttons. The function above will work.

bol

b0lsc0tt

>> Also noticed that if the value was selected and then submited and then you go back to the page the dinner is still hidden even though Yes is selected. <<

Is this still a problem? How are they "going back"? Since the function to show/hide doesn't run onload of body then that would be the case. Using PHP to write the style, as Digitalseraphim suggested, is a good idea. Let me know if that doesn't work and is still a problem. The style will need some script and javascript would need to use body's onload.

Let me know if you have a question with either of these comments.

bol

livegirllove

ASKER

the function as written alerts on yes no and not sure.

Well after they submit the form they can go back at a later time to change their answer. When they come back after selecting yes the first time the div is hidden.

I would use the PHP in the header but there is some other stuff happening on the page and haveing it called in the header won't work because the query hasnt happened yet.

I tried to run the onload in the php of the form but that didnt seem to work. ie
<input name="attending" onClick="doDiv(this);" type="radio" value="Yes" <?php if ($attending == "Yes") echo "onLoad=\"doDiv(this);\"Checked"; ?>>Yes

SOLUTION

digitalseraphim

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER CERTIFIED SOLUTION

b0lsc0tt

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

b0lsc0tt

I left the semicolon off the end of the php line. I realized that just as I submitted the last comment. Use this instead ...

<?php if ($attending == "Yes") echo '<script type="text/javascript">document.getElementById('dinner').style.display = "block";</script>;' ?>

digitalseraphim

I think you had it ok the first time. If a semicolon is needed anywhere, wouldn't it be _after_ the last single quote, not before?

livegirllove

ASKER

the alert is working properly now :)

Im messing with showing it when yes was previously selected.

livegirllove

ASKER

<?php if ($attending == "Yes") echo "<script type=\"text/javascript\">document.getElementById('dinner').style.display = \"block\";</script>"; ?>

you need the semicolon for the JS and one to end the line of PHP. I went ahead and just escaped the quotes and used " cause thats what I know...

This works when put at the botton of the page!!

There is actually some more HTML before the </body> but it still works.

hmm FF at least. Ill test in IE now.

b0lsc0tt

Yes, the semicolon needs to be in both but mine should've been after the string was closed, not right before. There are some differences to using single and double quotes for strings but it seems like you have the line I meant to give you. Let me know if you want details about the difference or need help with that line. It might need to be moved all the way to the bottom (it depends on the body's contents) but if it worked where you placed it in FF then IE should also work. Both browsers should handle this the same. If it doesn't work then move it all the way to the end, just before the body's closing tag.

Let me know if you have any questions about this. It is too late and I am making mistakes so I will have to help tomorrow if you need more.

bol

livegirllove

ASKER

works in IE and FF. Thanks for all the help!

digitalseraphim

No problem, glad to help.

And thanks for giving me my first Expert points! :^)

b0lsc0tt

Your welcome! I'm glad I could help. Thanks for the grade, the points and the fun question.

bol