Expanding Form

I need to create a form that expands or collapses with more or less fields to fill in when the user selects or deselects a check box on it. This form also needs to be secure. What is the best way to accomplish this?

Thanks in advance,

Samuel

Perhaps you can get some ideas from the Creating Dynamic form content thread?

You might also chose a simpler alternative, having all the content present in your markup and only toggle the visibility of some parts via JavaScript.

Add a style declaration to your styles, to handle hidden elements.


.hidden {
    display: none;
}

Ensure that the optional form element is usable when scripting is not available.


<form id="formIdentifier" ...>
    <p>
        <input type="checkbox" name="chkOther"> Other
        <input type="text" name="txtOther">
    </p>
    ...
</form>

Place the script code in a file, for example, js/script.js and load it just before the </body> tag.


...
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>

In the script, hide the text field

js/script.js


var form = document.getElementById('formIdentifier');
form.elements.txtOther.className = 'hidden';

and attach the toggle event to the checkbox


form.elements.chkOther.onclick = function () {
    var el = this.form.elements.txtOther;
    if (el.className === 'hidden') {
        el.className = '';
    } else {
        el.className = 'hidden';
    }
}

I used this exact code, which successfully hid the field, but when I selected the check box nothing happened and the field would not appear. When I tried it in IE I received the following error message:

‘this.elements.txtOther’ is null or not an object
Line: 4
Char: 5
Code: 0

Thanks,

Samuel

Oh yes, that should be this.form.elements.txtOther

Not bad though, for having created all of that untested out of thin air.

Code edited Paul :slight_smile:

Yes, not bad at all! I put the edited code in and it works great! Thanks!

This works great when I use it to expand one field, but when I try making the click of one check box expand several fields it doesn’t work and the fields are not hidden.

As the scope of your needs have expanded, the code needs to expand to appropriately handle those changing needs.


form.elements.chkOther.onclick = function () {
   toggleClass(this.elements.thisField, 'hidden');
   toggleClass(this.elements.thatField, 'hidden');
   toggleClass(this.elements.otherField, 'hidden');
}

function toggleClass(el, cls) {
   if (el.className === cls) {
       el.className = '';
   } else {
       el.className = cls;
   }
}

I used this new code to replace the old, but the fields are not hidden. This is my html: (the expanding part is at the bottom of the code.)

		<form action="form-process.php" method="post" target="_self" id="formIdentifier" >
		<label>Name<br/><input name="Name" type="text" class="text-field-home" id="Name" />
		</label><br/>
		<label>Address<br/><input name="Address" type="text" class="text-field-home" id="Address" />
		</label><br/>
		<label>Owner Occupied or Rented<br/><input name="Owner_Occupied_or_Rented" type="text" class="text-field-home" id="Owner Occupied or Rented" />
		</label><br/>
		<label>Number of Families<br/><input name="Number_of_Families" type="text" class="text-field-home" id="Number of Families" />
		</label><br/>
		<label>Square Feet<br/><input name="Square_Feet" type="text" class="text-field-home" id="Square Feet" />
		</label><br/>
		<label>Year Built<br/><input name="Year_Built" type="text" class="text-field-home" id="Year Built" />
		</label><br/>
		<label>Animals<br/><input name="Animals" type="text" class="text-field-home" id="Animals" />
		</label><br/>
		<label>Updates (electric, roof, plumbing, heating)<br/><input name="Updates" type="text" class="text-field-home" id="Updates" />
		</label><br/>
		<label>Social Security #<br/><input name="Social_Security_#" type="text" class="text-field-home" id="Social Security #" />
		</label><br/>
		<label>New or Existing Purchase<input name="New_or_Existing_Purchase" type="checkbox" id="New or Existing Purchase" /></label><br/>
		<label>Current Insurance Provider<br/><input name="Current_Insurance_Provider" type="text" class="text-field-home" id="Current Insurance Provider" />
		</label><br/>
		<label>If Your Policy was Cancelled, Why?<br/><input name="If_Your_Policy_was_Cancelled,_Why?" type="text" class="text-field-home" id="If Your Policy was Cancelled, Why?" />
		</label><br/>
		<label>Frame or Brick?<br/><input name="Frame_or_Brick?" type="text" class="text-field-home" id="Frame or Brick?" />
		</label><br/>
		<label>Gas or Oil?<br/><input name="Gas_or_Oil?" type="text" class="text-field-home" id="Gas or Oil?" />
		</label><br/>
        
		Auto Quote<input type="checkbox" name="chkOther" /><br/>
        Name<br/><input type="text" name="thisField" /><br/>
		Name<br/><input type="text" name="thatField" /><br/>
		Address<br/><input name="otherField" type="text" class="text-field-home" id="Address" />
		
    
		</form>

Thanks,

Samuel

Do you have thisField, thatField and otherField in the script you’re using?

This is the script:

var form = document.getElementById('formIdentifier');
form.elements.chkOther.onclick = function () {
    toggleClass(this.elements.thisField, 'hidden');
    toggleClass(this.elements.thatField, 'hidden');
    toggleClass(this.elements.otherField, 'hidden');
}
 
function toggleClass(el, cls) {
    if (el.className === 'hidden') {
        el.className = '';
    } else {
        el.className = 'hidden';
    }
}

Apart from the toggleClass really needing to use cls instead of ‘hidden’ (though it won’t change the working of this code) here is what you need to do.

You need to change the names thisField, thatField and otherField to instead be the name of the form elements that you want to expand. You might have noticed that “this, that, and the other” are example names.

If you want to toggle other elements instead of named form elements, you can place a unique identifer on the element and use document.getElementById(‘thisId’) instead of form.elements.thisField

What about something like this, not by hiding fields, but creating fields and add them to the form?

> when clicking the checkbox with id “thefirst”, function changeAfterClickedCheckbox will do its work to add a paragraph with all you ever wanted to the form…

<form id="formIdentifier" ...>    
<p>        <input type="checkbox" name="somename1" id="thefirst">        </p>
<p>        <input type="checkbox" name="somename2">        </p>

<p id="last">  last paragraph </p>
 ...</form>
<script type="text/javascript">
  
function addPars() {
     var par = document.createElement("p");
         par.setAttribute("id", "newpar");
 
     last.parentNode.insertBefore(par,last); 
     par.innerHTML = "other stuff... select options etc...";
     last.parentNode.insertBefore(par,last);
}
 
 
function changeAfterClickedCheckbox(){
     var last = document.getElementById("last");
     var thefirst = document.getElementById("thefirst");
     thefirst.onclick = addPars;
}
 
 
window.onload = changeAfterClickedCheckbox;

</script>

Something like this?
You can either make a delete function to delete the stuff that is added by something like this:

function delPars() {
  var thepar = document.getElementById("newpar");
  last.parentNode.removeChild(thepar);
}

I’m working on a similar script with drop down lists to create other drop down lists added to the form.
This one here is more simplified version I translated… my own script is with Dutch keywords in it…

This is currently my code, which still does not work.

<form action="form-process.php" method="post" target="_self" id="formIdentifier">
    
       More <input type="checkbox" name="chkOther"> 
        <input type="text" name="name">
        <input type="text" name="number">
        <input type="text" name="email">
   
   
</form>
var form = document.getElementById('formIdentifier');
this.form.elements.txtOther.className = 'hidden';

form.elements.chkOther.onclick = function () {
   toggleClass(this.elements.nameField, 'hidden');
   toggleClass(this.elements.numberField, 'hidden');
   toggleClass(this.elements.emailField, 'hidden');
}
 
function toggleClass(el, cls) {
   if (el.className === cls) {
       el.className = '';
   } else {
       el.className = cls;
   }
}

You have no form fields called nameField, numberField, or emailField. However, you do have form fields called name, number and email.

Rename emailField to email, and likewise for the others.

I tried changing that, but it’s still not hidden.

Let’s go over this again.

The script that you place just before the </body> tag does three things.

It retrieves a reference to the form.
It attaches the onclick event to the form checkbox.
It then hides those form elements.

Here is some sample code that works.


<html lang="en" xml:lang="en"> 
<head>
<style type="text/css">
.hidden {
    display: none;
}
</style>
</head> 
 
<body> 
<form action="form-process.php" method="post" target="_self" id="formIdentifier">
    
       More <input type="checkbox" name="chkOther"> 
        <input type="text" name="name">
        <input type="text" name="number">
        <input type="text" name="email">
   
   
</form>
<script type="text/javascript">
var form = document.getElementById('formIdentifier');
 
form.elements.chkOther.onclick = function () {
   toggleClass(this.form.elements.name, 'hidden');
   toggleClass(this.form.elements.number, 'hidden');
   toggleClass(this.form.elements.email, 'hidden');
}

form.elements.chkOther.onclick();
 
function toggleClass(el, cls) {
   if (el.className === cls) {
       el.className = '';
   } else {
       el.className = cls;
   }
}
</script> 
</body> 
</html>

This seems to work perfectly! I appreciate your help pmw57!

Thanks,

Samuel

Great You may just want to make a few changes to the names, such as changing formIdentifier instead to one that better describes the purpose of the form.