Forum Moderators: open
In the following code, the forms are expanded when the "checkbox" are checked.
I want to change the checkboxes to buttons, so when the button is clicked to expand the form.
Also, if its able, when the button is clicked once to expand and when clicked again to collapse the form like the checkbox (I/O)
Sample button:
<input type="button" value="Next page" id="next_button" onClick="alert('you are in!')" class="button"/>
You can view this code working at: <snip>
<form action="order.html" id="userForm" method="post">
<div id="errOutput" class="errOutput"></div><div class="zpFormContent">
<br />
<span>
<input type="checkbox" id="show_personal_info" />
<label for="show_personal_info" class="zpRadioLabel">Show personal info (same as zpFormDisplayWhen using addChangeHandler)</label>
</span>
<br />
<br />
<fieldset id="personal_info">
<legend>Personal information</legend>
<label class='zpFormLabel'>Name</label>
<input class='zpFormRequired' value="" size="40" name="name" type="text" />
<br />
<label class='zpFormLabel'>Address</label>
<input class='zpFormRequired' value="" size="40" name="address" type="text" />
<br />
<label class='zpFormLabel'>Date of Birth</label>
<input value="" size="23" name="dob" type="text" class='zpFormDate zpFormMask="00\/00\/0000"' />
<br />
<label class='zpFormLabel'>Date of Birth(d.m.y)</label>
<input value="" size="23" name="dob" type="text" class='zpFormDate="%d.%m.%y" zpFormMask="00\.00\.0000"' />
<br />
<br />
<label class='zpFormLabel'>Zip</label>
<input value="" class='zpFormRequired zpFormUSZip zpFormMask="00000"' size="10" name="zip" type="text" />
<br />
<label class='zpFormLabel'>US Phone</label>
<input value="" size="23" name="usnumber" type="text" class='zpFormUSPhone zpFormMask="\(000\)\ 000\-0000"' />
<br />
<label class='zpFormLabel'>Credit card number</label>
<input value="" size="23" name="credit_card" type="text" class='zpFormCreditCard zpFormMask="0000-0000-0000-0000"' />
<br />
<label class='zpFormLabel'>Resume</label>
<textarea name="resume" cols="40" rows="10" class="zpFormRequired"></textarea>
<br />
</fieldset>
<span>
<input type="checkbox" id="show_multiple" />
<label for="show_multiple" class="zpRadioLabel">Show example for usage with zpFormMultiple</label>
</span>
<br />
<br />
<fieldset class="zpFormDisplayWhen=showMultiple">
<legend>Usage with zpFormMultiple</legend>
How many children do you have: <select id="child_num">
<option value="0">I have no children</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<br />
<br />
<br />
<fieldset class="zpFormMultiple" id="child_main">
<label class='zpFormLabel'>Age</label>
<input value="" size="5" name="child-age" type="text" class='zpFormRequired zpFormInt' />
<br />
<br />
<label class='zpFormLabel'>Gender</label>
<select name="child-gender" class="zpFormRequired">
<option value="">--choose--</option>
<option value="M">Male</option>
<option value="F">Female</option>
</select>
</fieldset>
</fieldset>
<span>
<input type="checkbox" id="show_eula" />
<label for="show_eula" class="zpRadioLabel">Show EULA example</label>
</span>
<br />
<br />
<fieldset class="zpFormDisplayWhen=showEula">
<legend>EULA confirmation</legend>
<textarea readonly="readonly" rows="5" cols="60">End user license agreement text</textarea>
<br />
<br />
<input type="checkbox" id="eula_cb" /><label>I agreed. Let me in.</label>
<br />
<br />
<input type="button" value="Next page" id="next_button" onClick="alert('you are in!')" class="button"/>
</fieldset>
</div>
<div class="zpFormButtons">
<input value="Submit" name="Submit" onClick="" type="submit" class="button" />
<input value="Clear" name="Clear" onClick="" type="reset" class="button" />
</div>
</form>
<script type="text/javascript">
function showMultiple(){
return document.getElementById('show_multiple').checked
}
function showEula(){
return document.getElementById('show_eula').checked
}
// Run this to auto-activate all "zpForm" class forms in the document.
var form = new Zapatec.Form({
form: 'userForm',
showErrors: 'afterField',
showErrorsOnSubmit: true,
submitErrorFunc: testErrOutput,
theme: "winxp"
});
function togglePersonalInfo(){
Zapatec.Form.Utils.toggleFormElements(document.getElementById('personal_info'),
document.getElementById('show_personal_info').checked, false)
if(form.config.strict){
form.toggleSubmits(!form.validate())
}
}
form.addChangeHandler(togglePersonalInfo);
function toggleEULA(){
document.getElementById('next_button').disabled =!document.getElementById('eula_cb').checked;
}
form.addChangeHandler(toggleEULA);
var showChildsFirstRun = true;
// using of some internal functions of Zapatec.Form
function showChilds(){
var select = document.getElementById("child_num");
var childMain = document.getElementById("child_main");
var zpForm = select.form;
var childs = childMain.zpMultipleChilds;
// destroy add button for multiple element
if(showChildsFirstRun == true){
showChildsFirstRun = false;
// remove "+" button on first run.
Zapatec.Utils.destroy(childMain.zpMultipleButton);
childMain.zpLastNode = childMain;
}
var wantedChildsCount = Zapatec.Form.Utils.getValue(select);
// Special case for wantedChildsCount == 0 - we should hide main object then.
if(wantedChildsCount == 0){
childMain.zpHidden = true;
Zapatec.Form.Utils.toggleFormElements(childMain, false, false);
} else if(wantedChildsCount > 0 && childMain.zpHidden){
childMain.zpHidden = false;
Zapatec.Form.Utils.toggleFormElements(childMain, true, false);
}
var realChildCount = childs.length + (childMain.zpHidden? 0 : 1);
if(wantedChildsCount > realChildCount){
// add more nodes
for(var ii = realChildCount; ii < wantedChildsCount; ii++){
var clone = Zapatec.Form.Utils.cloneElement(childMain, form);
Zapatec.Utils.destroy(clone.zpMultipleButton);
clone.zpLastNode = clone;
}
} else if(wantedChildsCount < realChildCount){
// remove last nodes
for(var ii = (wantedChildsCount == 0? 1 : wantedChildsCount); ii <= realChildCount; ii++){
Zapatec.Form.Utils.removeClonedElement(childs[ii - 1]);
}
}
if(form.config.strict){
form.toggleSubmits(!form.validate())
}
}
form.addChangeHandler(showChilds);
</script>
Thanks a lot!
[edited by: DrDoc at 8:09 am (utc) on June 17, 2007]
You can do this with button easily. Now you are checking the state of the checkbox. If you want to use button instead of checkbox, then first you set the value property of button to say "Show Div" and after clicking on it change the value to "Hide Div". Now checking the value property of the button you can easily able to decide whether to show or hide the DIV.
