SitePoint Sponsor

User Tag List

Results 1 to 20 of 20

Thread: Expanding Form

  1. #1
    SitePoint Zealot samg914's Avatar
    Join Date
    Nov 2009
    Location
    Boston, MA
    Posts
    132
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question 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

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Birnam wood is come to Dunsinane

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Add a style declaration to your styles, to handle hidden elements.

    Code css:
    .hidden {
        display: none;
    }

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

    Code html4strict:
    <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.

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

    In the script, hide the text field

    js/script.js
    Code javascript:
    var form = document.getElementById('formIdentifier');
    form.elements.txtOther.className = 'hidden';

    and attach the toggle event to the checkbox

    Code javascript:
    form.elements.chkOther.onclick = function () {
        var el = this.form.elements.txtOther;
        if (el.className === 'hidden') {
            el.className = '';
        } else {
            el.className = 'hidden';
        }
    }
    Last edited by spikeZ; Apr 7, 2010 at 12:49. Reason: code edit
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Zealot samg914's Avatar
    Join Date
    Nov 2009
    Location
    Boston, MA
    Posts
    132
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    Add a style declaration to your styles, to handle hidden elements.

    Code css:
    .hidden {
        display: none;
    }

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

    Code html4strict:
    <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.

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

    In the script, hide the text field

    js/script.js
    Code javascript:
    var form = document.getElementById('formIdentifier');
    form.elements.txtOther.className = 'hidden';

    and attach the toggle event to the checkbox

    Code javascript:
    form.elements.chkOther.onclick = function () {
        var el = this.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

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by samg914 View Post
    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
    Oh yes, that should be this.form.elements.txtOther

    Not bad though, for having created all of that untested out of thin air.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,804
    Mentioned
    157 Post(s)
    Tagged
    3 Thread(s)
    Code edited Paul
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  7. #7
    SitePoint Zealot samg914's Avatar
    Join Date
    Nov 2009
    Location
    Boston, MA
    Posts
    132
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    Oh yes, that should be this.form.elements.txtOther

    Not bad though, for having created all of that untested out of thin air.
    Yes, not bad at all! I put the edited code in and it works great! Thanks!

  8. #8
    SitePoint Zealot samg914's Avatar
    Join Date
    Nov 2009
    Location
    Boston, MA
    Posts
    132
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    As the scope of your needs have expanded, the code needs to expand to appropriately handle those changing needs.

    Code javascript:
    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;
       }
    }
    Last edited by mizwizzy; Apr 9, 2010 at 07:19. Reason: code update
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Zealot samg914's Avatar
    Join Date
    Nov 2009
    Location
    Boston, MA
    Posts
    132
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    As the scope of your needs have expanded, the code needs to expand to appropriately handle those changing needs.

    Code javascript:
    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';
        }
    }
    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.)

    HTML 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

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Do you have thisField, thatField and otherField in the script you're using?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  12. #12
    SitePoint Zealot samg914's Avatar
    Join Date
    Nov 2009
    Location
    Boston, MA
    Posts
    132
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    Do you have thisField, thatField and otherField in the script you're using?
    This is the script:
    Code JavaScript:
    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';
        }
    }

  13. #13
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    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
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  14. #14
    SitePoint Addict
    Join Date
    Dec 2008
    Location
    Brussels
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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...

    Code HTML4Strict:
    <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>


    Code JavaScript:
    <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:
    Code JavaScript:
    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...

  15. #15
    SitePoint Zealot samg914's Avatar
    Join Date
    Nov 2009
    Location
    Boston, MA
    Posts
    132
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    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
    This is currently my code, which still does not work.

    Code HTML4Strict:
    <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>

    Code JavaScript:
    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;
       }
    }

  16. #16
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  17. #17
    SitePoint Zealot samg914's Avatar
    Join Date
    Nov 2009
    Location
    Boston, MA
    Posts
    132
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    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.

  18. #18
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    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.

    Code html4strict:
    <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>
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  19. #19
    SitePoint Zealot samg914's Avatar
    Join Date
    Nov 2009
    Location
    Boston, MA
    Posts
    132
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    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.

    Code html4strict:
    <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

  20. #20
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •