I'm currently creating a form for people to update existing communication preferences. I want certain inputs to remain hidden and expand when the check box is checked.
I've managed to do this for one section - the ABA section but I'm hoping somebody can help me expand on what I've done so I can encapsulate the second fieldset - "Communication Preferences" in another hide / show container.
Bonus points if anyone can enlighten me as to why the Submit and Cancel button gets pushed to the side whenever the fields are shown.
Thanks very much!
Code below:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style type="text/css">
body
{
font-family: arial;
}
form {
/* Just to center the form on the page */
margin: 0 auto;
width: 80%;
/* To see the outline of the form */
padding: 1em;
border: 1px solid #CCC;
border-radius: 1em;
}
label {
/* To make sure that all label have the same size and are properly align */
display: inline-block;
width: 90px;
text-align: left;
margin: 1em 0 0.5em;
}
form div + div {
margin-top: 1em;
}
input, textarea {
/* To make sure that all text fields have the same font settings
By default, textareas have a monospace font */
/* To give the same size to all text field */
width: 140px;
-moz-box-sizing: border-box;
box-sizing: border-box;
/* To harmonize the look & feel of text field border */
border: 1px solid #999;
margin: 1em 0 0.5em;
}
input:focus, textarea:focus {
/* To give a little highlight on active elements */
border: 1px solid #CCC;
border-radius: 1em;
width: 140px;
font-family: Arial;
}
textarea {
/* To properly align multiline text fields with their labels */
vertical-align: top;
/* To give enough room to type some text */
height: 5em;
/* To allow users to resize any textarea vertically
It does not work on every browsers */
resize: vertical;
}
.button {
/* To position the buttons to the same position of the text fields */
padding-left: 180px; /* same size as the label elements */
margin-left: .5em;
margin-right: .5em;
}
fieldset{
margin: 0 0 1.5em;
border: 1px solid #CCC;
border-radius: 1em;
}
#radio
{
width 140px;
border: none;
}
#checkbox
{
border: none;
}
</style>
</head>
<body>
<div>
<div style="float: left; width: 50%">
<b>ABA Update Form</b>
<br>
<br>
<p style= "color:red;"> To update the data, use the fields on the right. </p>
<form>
<div>
<label>Tenant Name</label> <input type="text" name="OBKey__168_1" style="width:50%" value = "N/A" disabled />
<label> Tenant Key:</label> <input type="text" value = "N/A" name="OBKey__241_1" style="width:20%" disabled />
</div>
<div>
<label> Property Name: </label><input type="text" value = "N/A" style="width:50%" name="OBKey__141_1" disabled />
<label> Unit: </label>
<input type="text" value = "N/A" name="OBKey__152_1" style="width:20%" disabled />
</div>
<br>
<fieldset>
<legend> ABA Details </legend>
<div>
<label> Address Line 1 </label>
<input type="text" value = "N/A" name="OBKey__242_1" style="width:70%" disabled />
</div>
<div>
<label> Address Line 2 </label>
<input type="text" value = "N/A" name="OBKey__243_1" style="width:70%" disabled />
</div>
<div>
<label> Address Line 3 </label>
<input type="text" value = "N/A" name="OBKey__244_1" style="width:70%" disabled />
</div>
<div>
<label> Address Line 4 </label>
<input type="text" value = "N/A" name="OBKey__245_1" style="width:70%" disabled />
</div>
<div>
<label> Postcode </label>
<input type="text" value = "N/A" name="OBKey__246_1" style="width:70%" disabled />
</div>
<div>
<label> Email </label>
<input type="text" value = "N/A" name="OBKey__251" style="width:70%" disabled />
</div>
<div>
<label> Phone 1 </label>
<input type="text" value = "N/A" name="OBKey__2_1" style="width:70%" disabled />
</div>
<div>
<label> Phone 2 </label>
<input type="text" value = "N/A" name="OBKey__255_1" style="width:70%" disabled />
</div>
<div>
<label> Mobile</label>
<input type="text" value = "N/A" name="OBKey__154_1" style="width:70%" disabled />
</div>
</fieldset>
<fieldset>
<legend> Communication Preferences </legend>
<div>
<label> Tenant Email (Used in Financial Tab) </label>
<input type="text" value = "N/A" name="OBKey__245_1" style="width:70%" disabled />
</div>
<div>
<label> Communication Preferences </label>
Post<input id="radio" type="radio" name="OBKey__246_1" value="post" disabled >
Email<input id ="radio" type="radio" name="OBKey__246_1" value="email" disabled >
</div>
</table>
</fieldset>
</form>
</div>
<div style="float: right; width: 50%">
<br>
<br>
<p style= "color:red;"> Use the empty fields to insert the new data. </p>
<form id="myForm">
<div>
<label>Tenant Name</label> <input type="text" value = "N/A" name="OBKey__168_1" />
<label> Tenant Key:</label> <input type="text" value = "N/A" name="OBKey__241_1" />
</div>
<div>
<label> Property Name: </label><input type="text" value = "N/A" name="OBKey__141_1" />
<label> Unit: </label>
<input type="text" value = "N/A" name="OBKey__152_1" />
</div>
<br>
<fieldset>
<legend> ABA Details </legend>
<input type="checkbox" name="updateABA"> Update ABA
<div id="toggleABADetails">
<div>
<label> Address Line 1 </label>
<input type="text" value = "N/A" name="OBKey__467_1" style="width:70%" />
</div>
<div>
<label> Address Line 2 </label>
<input type="text" value = "N/A" name="OBKey__468_1" style="width:70%" />
</div>
<div>
<label> Address Line 3 </label>
<input type="text" value = "N/A" name="OBKey__469_1" style="width:70%" />
</div>
<div>
<label> Address Line 4 </label>
<input type="text" value = "N/A" name="OBKey__470_1" style="width:70%" />
</div>
<div>
<label> Postcode </label>
<input type="text" value = "N/A" name="OBKey__471_1" style="width:70%" />
</div>
<div>
<label> Email </label>
<input type="text" value = "N/A" name="OBKey__477_1" style="width:70%" />
</div>
<div>
<label> Phone 1 </label>
<input type="text" value = "N/A" name="OBKey__475_1" style="width:70%" />
</div>
<div>
<label> Phone 2 </label>
<input type="text" value = "N/A" name="OBKey__476_1" style="width:70%" />
</div>
<div>
<label> Mobile</label>
<input type="text" value = "N/A" name="OBKey__478_1" style="width:70%" />
</div>
<div>
<label> Update ABA </label> <input id="checkbox" class="checkbox" type="checkbox" name="OBKey__260_1" value="YES" >
</div>
</fieldset>
<fieldset>
<legend> Communication Preferences </legend>
<div>
<label> Tenant Email (Used in Financial Tab) </label>
<input type="text" value = "N/A" name="OBKey__472" style="width:70%" />
</div>
<div>
<label> Communication Preferences </label>
Post<input id="radio" type="radio" name="OBKey__473_1" value="post">
Email<input id ="radio" type="radio" name="OBKey__473_1" value="email">
</div>
<div>
<label> Update Preferences </label> <input id="checkbox" class="checkbox" type="checkbox" name="OBKey__474_1" value="YES" >
</div>
</div>
</div>
</div>
</table>
</fieldset>
<div class="button">
<input type="submit" name="OBBTn_Save" value="Submit" /><input type="submit" name="OBBTn_Cancel" value="Cancel" />
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
function prepareForm() {
if (!document.getElementById) {
return false;
}
var form = document.getElementById('myForm');
non_member_checkbox = form.elements["updateABA"];
non_member_checkbox.onclick = toggleABADetails;
non_member_checkbox.onclick();
}
function toggleABADetails() {
toggle('toggleABADetails');
}
function toggle(id) {
var element = document.getElementById(id);
var display = (element.style.display === 'none') ? '' : 'none';
element.style.display = display;
}
prepareForm();
</script>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire