Form with hidden DIVs

flashbbeb · Mar 18, 2006

I need form help, but not on the PHP side. Actually, thanks to a friend, I have PHP code to send (HTML form data) and receive to and from a MySQL database.

My problem is adding javascript/DHTML functionality to it.
The form is an RSVP form for my wedding, that which has different menu options that appear upon different selections. For example:

Will you be attending?
If invitee selects "no" radio button, a comment field and submit button appear.
If invitee selects "yes" radio button, then a hidden DIV appears that contains 1) meal choices and 2)"Will you be bringing guests?" and yes/no radio buttons.

If the user selects "yes" to guests, I want to be able to have the invitee select or enter a number of guests, then have that integer passed to a function that creates a corresponding number of name fields and meal choice radio button groups.

Thus far, I have found code (thanks to the Apple Developers' site, see modified code below) that will change divs for the "Will you be attending?" part, but nothing for the nested section (yes to guests, number of guests...guest name and meal choice).

Any help would be greatly appreciated!
-EB

Code:

<html>
<head><title>Choose A Form</title>

<!-- <script src="utility.txt"></script> -->

<script type="text/javascript">
<!--

// function switchDiv()
//  this function takes the id of a div
//  and calls the other functions required
//  to show that div, getStyleObject and changeObjectVisibility
//

function switchDiv(div_id)
{
  var style_sheet = getStyleObject(div_id);    //getStyleObject is below
  if (style_sheet)
  {
    hideAll();
    changeObjectVisibility(div_id,"visible");
  }
  else 
  {
    alert("sorry, this only works in browsers that do Dynamic HTML");
  }
}

// function hideAll()
//  hides a bunch of divs
//
function hideAll()
{
   changeObjectVisibility("attending","hidden");
   changeObjectVisibility("notattending","hidden");
   changeObjectVisibility("noguests", "hidden");
   changeObjectVisibility("yesguests", "hidden");
}

// function getStyleObject(string) -> returns style object
//  given a string containing the id of an object
//  the function returns the stylesheet of that object
//  or false if it can't find a stylesheet.  Handles
//  cross-browser compatibility issues.
//
function getStyleObject(objectId) {
  // checkW3C DOM, then MSIE 4, then NN 4.
  //
  if(document.getElementById && document.getElementById(objectId)) {
	return document.getElementById(objectId).style;
   }
   else if (document.all && document.all(objectId)) {  
	return document.all(objectId).style;
   } 
   else if (document.layers && document.layers[objectId]) { 
	return document.layers[objectId];
   } else {
	return false;
   }
}

function changeObjectVisibility(objectId, newVisibility) {
    // first get a reference to the cross-browser style object 
    // and make sure the object exists
    var styleObject = getStyleObject(objectId);
    if(styleObject) {
	styleObject.visibility = newVisibility;
	return true;
    } else {
	// we couldn't find the object, so we can't change its visibility
	return false;
    }
}
// -->
</script>


</head>
<body>
<h1>WILL YOU BE ATTENDING?</h1>
<form name="rsvpform">
  <p><b>Name:</b>&nbsp; &nbsp; &nbsp;
    <input type="text" name="namefield" />
    <br />
    <br />

    <input type="radio" name="attendance" value="Y" onClick="switchDiv('attending');">
    Yes
    <input type="radio" name="attendance" value="N" onClick="switchDiv('notattending');">
    No
    <!-- <input type="radio" name="form_type" value="full" onClick="switchDiv('superduper');">Super-Complete Form -->
</p>
  <p>&nbsp;  </p>
</form>

<!------------------------------------------------DIVS------------------------------------------------------------------>

<!-- Attendee Not Attending -->
<div id="notattending" style="position:absolute;visibility:hidden;">
<form name="full_form" method="POST" action="submit1.php">
<table>
<tr><td>Message to the Couple:</td><td><textarea name="comments" cols="40" rows="8"></textarea></td><tr>
</table>
<input type="submit" value="Submit">
</form>
</div>

<!-- Attendee is Attending -->
<div id="attending" style="position:absolute;visibility:hidden;">
<form name="yes_attending">
<table>
<tr><td>Dinner Choice:</td><td><input type="radio" name="dinner" value="Chicken">Chicken &nbsp;&nbsp; <input type="radio" name="dinner" value="Fish">Fish &nbsp;&nbsp; <input type="radio" name="dinner" value="Veggie" />Veggie &nbsp;&nbsp; <input type="radio" name="dinner" value="Kids Food" />Kids Food</td>
<tr><td>Will you be bringing guests?</td><td>
<input type="radio" name="guests" value="Y" onClick="switchDiv('yesguests');">Yes &nbsp;&nbsp;
<input type="radio" name="guests" value="N" onClick="switchDiv('noguests');">No
</td></tr>
</table>
</form>
</div>


<div id="noguests" style="position:absolute;visibility:hidden;">
<form name="noguests" method="POST" action="submit1.php">
<input name="Submit" type="button" value="Submit" />
</form>
</div>

<div id="yesguests" style="position:absolute;visibility:hidden;">
<form name="counter">
Number of Guests:  &nbsp;&nbsp; <input type="radio" name="numbguests" value="1" />1
&nbsp;&nbsp; <input type="radio" name="number" value="2" />2
&nbsp;&nbsp; <input type="radio" name="number" value="3" />3
&nbsp;&nbsp; <input type="radio" name="number" value="4" />4
&nbsp;&nbsp; <input type="radio" name="number" value="5" />5
<!-- <input type="text" name="number" size="5"> -->

<span id="cust" style="position:relative;"></span>

</form>
</div>



</div>


</body>
</html>

jpadie · Mar 18, 2006

guess you would be better off posting this query in the javascript forum.

but for what it's worth, i ALWAYS use the display property for this kind of thing. i have found it has the best cross browser compatibility. get rid of the absolute positioning too (unless you really really need it in which case shove it in a style sheet).

in the wedding spirit i have taken the liberty of rewriting your code. btw with radio boxes i always recommend preselecting the default value:

Code:

<?
if (isset($_POST['submit'])):
$contents = $_POST['namefield'];
switch ($_POST['attendance']):
	case "Y":
		$contents .= " can attend the wedding. ";
		switch ($_POST['guests']):
			case "Y":
				$contents .= $_POST['namefield'] ." will be bringing ". $_POST['numbguests'] ." and has requested a dinner of ". $_POST['dinner'];
			break;
			case "N":
				$contents .=  $_POST['namefield'] ." will not be bringing any guests  and has requested a dinner of ". $_POST['dinner'];
			break;
		endswitch;
	break;
	case "N":
		$contents .= " cannot attend the wedding";
		if (!empty($_POST['comments'])):
			$contents .= " and has left the following message: ". nl2br($_POST['comments']);
		else:
			$contents .= " and has not left any message." ;
		endif;
	break;
endswitch;
echo $contents;
echo "<br/>";
endif;
?>
<html>
<head><title>Choose A Form</title>

<!-- <script src="utility.txt"></script> -->

<script type="text/javascript">
function changeObjectVisibility(id, status) {
  var elem = document.getElementById(id);
  elem.style.display = status;
}

function hideAll()
{
   changeObjectVisibility("attending","none");
   changeObjectVisibility("notattending","none");
   changeObjectVisibility("yesguests", "none");
}
function switchDiv(type) {
	switch (type) {
		case "attending":
			hideAll();
			changeObjectVisibility("attending", "block");
			break;
		case "notattending":
			hideAll();
			changeObjectVisibility("notattending", "block");
			break;
	}
}

window.onload = function() {
	switchDiv('attending');
}
</script>


</head>
<body>
<h1>WILL YOU BE ATTENDING?</h1>
<form name="rsvpform" action="<?=$_SERVER['PHP_SELF']?>" method="post">
  <p><b>Name:</b>&nbsp; &nbsp; &nbsp;
    <input type="text" name="namefield" />
    <br />
    <br />

    <input type="radio" name="attendance" checked value="Y" onClick="switchDiv('attending');">
    Yes
    <input type="radio" name="attendance" value="N" onClick="switchDiv('notattending');">
    No
    <!-- <input type="radio" name="form_type" value="full" onClick="switchDiv('superduper');">Super-Complete Form -->
</p>
  <p>&nbsp;  </p>

<!------------------------------------------------DIVS------------------------------------------------------------------>

<!-- Attendee Not Attending -->
<div id="notattending">
<table>
	<tr>
		<td>
			Message to the Couple:
		</td>
		<td>
			<textarea name="comments" cols="40" rows="8"></textarea>
		</td>
	</tr>
</table>
</div>

<!-- Attendee is Attending -->
<div id="attending">
<table>
<tr><td>Dinner Choice:</td><td>
<input type="radio" name="dinner" value="Chicken" checked >Chicken &nbsp;&nbsp; 
<input type="radio" name="dinner" value="Fish">Fish &nbsp;&nbsp; 
<input type="radio" name="dinner" value="Veggie" />Veggie &nbsp;&nbsp; 
<input type="radio" name="dinner" value="Kids Food" />Kids Food</td>
<tr><td>Will you be bringing guests?</td><td>
<input type="radio" name="guests" value="Y" onClick="changeObjectVisibility('yesguests','block');">Yes &nbsp;&nbsp;
<input type="radio" name="guests" value="N" checked onClick="changeObjectVisibility('yesguests','none');" />No
</td></tr>
</table>
</div>

<div id="yesguests">
Number of Guests:  &nbsp;&nbsp; 
<input type="radio" name="numbguests" value="1" checked />1
&nbsp;&nbsp; <input type="radio" name="numbguests" value="2" />2
&nbsp;&nbsp; <input type="radio" name="numbguests" value="3" />3
&nbsp;&nbsp; <input type="radio" name="numbguests" value="4" />4
&nbsp;&nbsp; <input type="radio" name="numbguests" value="5" />5
<!-- <input type="text" name="number" size="5"> -->
</div>
<input type="submit" value="Submit" name="submit" />

</form>

</body>
</html>

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Form with hidden DIVs

flashbbeb

MIS

jpadie

Technical User

Similar threads

Part and Inventory Search

Sponsor