I posted this on the PHP forum, but I think it may be more appropriate here, since I'm working with a form that hides elements (as divs) and unhides them depending on user selection.
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
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>
<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> </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 <input type="radio" name="dinner" value="Fish">Fish <input type="radio" name="dinner" value="Veggie" />Veggie <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
<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: <input type="radio" name="numbguests" value="1" />1
<input type="radio" name="number" value="2" />2
<input type="radio" name="number" value="3" />3
<input type="radio" name="number" value="4" />4
<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>