Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Unhappy Dynamically generate forms?...

    I have a project where I have a survey and people fill it in and javascript does several client-side stuff like check-all checkboxes, check for alphanumeric letters etc...
    There's a section where I'm trying to add a dynamically generating form...
    Basically I'll have a button that when pressed will generate textbox, checkboxes, radio buttons, etc, and I'll have another button to delete it if needed..
    I'm trying to figure out how to do this but its just so overwhelming for me. I'm new to javascript and learning new things on the fly.

    Another problem is that I'm sending this form to a php page to get the data processed, and I don't know how to handle unexpected dynamically generated forms' datas...
    Somebody help me please?

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,899
    Thanks
    15
    Thanked 226 Times in 226 Posts
    Basically you have two ways of doing it, one is building all the HTML code for the generated form as a block in the form of a javascript variable and making it the innerHTML of a div. The other way is to use createElement to make the form elements.

  • #3
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DrDOS View Post
    Basically you have two ways of doing it, one is building all the HTML code for the generated form as a block in the form of a javascript variable and making it the innerHTML of a div. The other way is to use createElement to make the form elements.
    could you show me an example with code?
    the 2nd way? createElement?

  • #4
    New to the CF scene
    Join Date
    Aug 2012
    Location
    Hyderabad,Andhra Pradesh,INDIA
    Posts
    1
    Thanks
    1
    Thanked 0 Times in 0 Posts

  • #5
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Alright guys, new problem
    A nice guy named low tech sent me a link on dynamically generating form by appending elements to divs with functions. It worked. However, there's a problem with the radio buttons.
    The method of appending elements just copied and pasted the existing form and appended it to existing code, so all the new radio buttons generated have the SAME NAME...
    so if i generate 4 or 5 new forms, they have radio buttons with the same name, so i can only select one button out of 4-5 forms.. BIG PROBLEM.. I can't think of a way around this, can someone help me?

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,760
    Thanks
    55
    Thanked 516 Times in 513 Posts
    generally it's done with an incrementing variable and the function that creates the fields is set up so that every time it is called that number goes up one and is appended to the name (or id or whatever), thereby keeping it unique.

    there are other ways, but that would seem to be easiest.

    if you're stuck, show some code - I'm sure someone will help you out.

  • #7
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Code:
    function addInput(divName){
              var newdiv = document.createElement('div');
              newdiv.innerHTML = document.getElementById('awardForm').innerHTML;
              document.getElementById(divName).appendChild(newdiv);
    }
    awardform is a hidden div that i use as the basis for replication, and i create a new element in a visible div.

    Code:
    <table border="1" width="600">
    <tr>
    		<td width = "500"><b>Description</b></td>
    		<td width = "100"><b>Select</b></td>
    	</tr>
    	<tr>
    		<td>International/Global (Intel Westinghouse)</td>
    		<td><input type="radio" name="awardLevel[]" value="6"></td>
    	</tr>
    	<tr>
    		<td>National (National Merit Finalist, AP Scholar w/Distinction) </td>
    		<td><input type="radio" name="awardLevel[]" value="5"></td>
    	</tr>
    	<tr>
    		<td>State (CIF, CSF, Scholar Athlete)</td>
    		<td><input type="radio" name="awardLevel[]" value="4"></td>
    	</tr>
    	<tr>
    		<td>Regional (SoCal Academic Awards; Association awards)</td>
    		<td><input type="radio" name="awardLevel[]" value="3"></td>
    	</tr>
    	<tr>
    		<td>Community (City/town scholarships; City-hall recognitions)</td>
    		<td><input type="radio" name="awardLevel[]" value="2"></td>
    	</tr>
    	<tr>
    		<td>Local/school (Honor Roll; Principal; MVP; Perf award)</td>
    		<td><input type="radio" name="awardLevel[]" value="1"></td>
    	</tr>
        <tr>
      </table>
    is part of the code that's being cloned.



    I don't think your method of incrementing a variable in the name wouldn't work, since I'm not generating new forms, I'm replicating existing ones without code changes..
    Last edited by lonewaft; 08-21-2012 at 09:28 PM. Reason: additional detail

  • #8
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,760
    Thanks
    55
    Thanked 516 Times in 513 Posts
    I'm not sure how the suffix will work with your square brackets in your radio names, but give this a go...

    Code:
    <script type="text/javascript">
    var count=0;		
    function addInput(divName){
              var newdiv = document.createElement('div');
              newdiv.innerHTML = document.getElementById('awardForm').innerHTML.replace(/awardLevel/g,"awardLevel"+count);
              document.getElementById(divName).appendChild(newdiv);
    		  count++;
    }
    		</script>

  • Users who have thanked xelawho for this post:

    lonewaft (08-21-2012)

  • #9
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Ahh its working beautifully, thank you!
    Now I'll have to see how it affects php code..

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    WHAT??? This makes no sense!
    if i generate 4 or 5 new forms, they have radio buttons with the same name, so i can only select one button out of 4-5 forms.. BIG PROBLEM..
    NOT TRUE AT ALL!

    Example:
    Code:
    <html>
    <body>
    <form>
    <input type="radio" name="rb[]" value="1"/>
    <input type="radio" name="rb[]" value="2"/>
    <input type="radio" name="rb[]" value="3"/>
    <input type="radio" name="rb[]" value="4"/>
    </form>
    <hr/>
    <form>
    <input type="radio" name="rb[]" value="1"/>
    <input type="radio" name="rb[]" value="2"/>
    <input type="radio" name="rb[]" value="3"/>
    <input type="radio" name="rb[]" value="4"/>
    </form>
    <hr/>
    <form>
    <input type="radio" name="rb[]" value="1"/>
    <input type="radio" name="rb[]" value="2"/>
    <input type="radio" name="rb[]" value="3"/>
    <input type="radio" name="rb[]" value="4"/>
    </form>
    </body>
    </html>
    The radio buttons all have the same name.

    But the ones in the first form are COMPLETELY SEPARATE from those in the 2nd or 3rd form, etc.

    Radio button names that are the same *IN A SINGLE FORM* are grouped, but they are *NOT* grouped across forms.

    You "solved" a problem that doesn't exist!
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #11
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    WHAT??? This makes no sense!


    NOT TRUE AT ALL!

    Example:
    Code:
    <html>
    <body>
    <form>
    <input type="radio" name="rb[]" value="1"/>
    <input type="radio" name="rb[]" value="2"/>
    <input type="radio" name="rb[]" value="3"/>
    <input type="radio" name="rb[]" value="4"/>
    </form>
    <hr/>
    <form>
    <input type="radio" name="rb[]" value="1"/>
    <input type="radio" name="rb[]" value="2"/>
    <input type="radio" name="rb[]" value="3"/>
    <input type="radio" name="rb[]" value="4"/>
    </form>
    <hr/>
    <form>
    <input type="radio" name="rb[]" value="1"/>
    <input type="radio" name="rb[]" value="2"/>
    <input type="radio" name="rb[]" value="3"/>
    <input type="radio" name="rb[]" value="4"/>
    </form>
    </body>
    </html>
    The radio buttons all have the same name.

    But the ones in the first form are COMPLETELY SEPARATE from those in the 2nd or 3rd form, etc.

    Radio button names that are the same *IN A SINGLE FORM* are grouped, but they are *NOT* grouped across forms.

    You "solved" a problem that doesn't exist!

    Oh sorry I didn't give the full details of the problem.. These checkboxes are only part of a giant form, when I was saying I was "replicating the form" i meant i was replicating a part of the form, not the entire form.

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    AHHHH! *MAJOR* difference!

    Okay...ignore the little man in the corner.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #13
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    WAIT, I think you just gave me an idea..
    Is there a way to submit multiple forms with one button?

  • #14
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Sort of...

    You can only submit one <form> to the server. Think about it: If you submitted multiple forms, the server would respond with a new HTML page *for each submittal*. Which one "wins"????

    But what you could do is gather all the answers from multiple forms and, for example, put those answers into <input type="hidden"> in your master form and then submit the master form.

    Not overly hard to do. It does mean, though, that you have to write JS code to handle converting (for example) a set of radio buttons into a single value for a single hidden field.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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