We help IT Professionals succeed at work.

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

465 Views
Last Modified: 2013-11-19
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.
Comment
Watch Question

b0lsc0ttIT Manager
CERTIFIED EXPERT

Commented:
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

Author

Commented:
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
b0lsc0ttIT Manager
CERTIFIED EXPERT

Commented:
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

Author

Commented:
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>
b0lsc0ttIT Manager
CERTIFIED EXPERT

Commented:
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

Author

Commented:
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.
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

Author

Commented:
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>
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
b0lsc0ttIT Manager
CERTIFIED EXPERT

Commented:
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
b0lsc0ttIT Manager
CERTIFIED EXPERT

Commented:
>> 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

Author

Commented:
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

This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
IT Manager
CERTIFIED EXPERT
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
b0lsc0ttIT Manager
CERTIFIED EXPERT

Commented:
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>;' ?>
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?

Author

Commented:
the alert is working properly now :)

Im messing with showing it when yes was previously selected.

Author

Commented:
 <?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.
b0lsc0ttIT Manager
CERTIFIED EXPERT

Commented:
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

Author

Commented:
works in IE and FF.  Thanks for all the help!
No problem, glad to help.

And thanks for giving me my first Expert points!  :^)
b0lsc0ttIT Manager
CERTIFIED EXPERT

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

bol
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.