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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 26
  1. #1
    Regular Coder
    Join Date
    Jun 2011
    Posts
    148
    Thanks
    18
    Thanked 0 Times in 0 Posts

    Dynamic Form or Div with dynamic subform or subdivs

    Hi All,
    i know how to create a dynamic form or DIv ..but what i do not know is how to create a dynamic form/ or div into a previous dynamic one..

    i need basically to see 5 dynamic forms / DIV in cascade where each one trigger the one coming after..

    For what i need that :

    i have my user inserting information on the level 1. let say Copagny info
    2- then he will be asked if he wants to add a sub level information ( subform) for that compagny or even many subforms at the same level ..
    and so on...

    3- those sub level ( subforms ) can also call their respective subforms..



    Any idea how to design this ?


    thanks

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    mmm...

    I suspect you mean something else, but maybe we can start here:

    Code:
    <!DOCTYPE html>
    <html>
      <head>
      <title>blank</title>
        <meta charset="UTF-8">
    </head>
    <body>
    Add names:<br>
    <input type="text" style="width:400px">
    <input type="button" value="Add more names" onclick="addNames()">
    <div id="div2"></div>
    <script type="text/javascript">
    function addNames() {
    var thediv=document.getElementById('div2');
    var extras=document.createElement('div');
    extras.innerHTML='<input type="text" style="width:400px"></input><input type="button" value="Add other names" onclick="addNames()">'
    thediv.appendChild(extras);
    }
    </script>
    </body>
    </html>

  • #3
    Regular Coder
    Join Date
    Jun 2011
    Posts
    148
    Thanks
    18
    Thanked 0 Times in 0 Posts
    hi xelawho,

    Thanks for your quick reply ..
    what i need basically is a cascading forms ..not sure if i can share a graph .. i can show you what it looks like ???

    please let me know

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,014
    Thanks
    79
    Thanked 4,436 Times in 4,401 Posts
    This is *probably* better done with your server side coding (PHP/ASP/JSP/etc.).

    When form1 is submitted, a checkbox or radio button or something similar on that form basically tells the server side code what the next step is and, if appropriate, the server responds with the second form.

    *CAN* you do it in JavaScript? Sure. But what are you going to do with all the form information you have already collected???? Can it be passed along to the next page? Yes, but it will be easier and more reliable to do it server-side.
    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.

  • #5
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    Quote Originally Posted by korssane
    what i need basically is a cascading forms ..not sure if i can share a graph .. i can show you what it looks like ?
    you can attach a file by going to the bottom of the page when you are replying and click on Manage Attachments

    although I would defer to Old Pedant's knowledge on this one (and most other ones come to think of it)

  • #6
    Regular Coder
    Join Date
    Jun 2011
    Posts
    148
    Thanks
    18
    Thanked 0 Times in 0 Posts
    I completely agree guys about using the server side lang as i fanally want to insert data into db.
    The only challenege i have with server side is i have to "postback" to go to the next form or subform..thing i do not want to do
    2nd i do need to generate as much as the user can subforms or sub subforms..which i believe cannot be done using server side lang?


    thoughts ?

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,014
    Thanks
    79
    Thanked 4,436 Times in 4,401 Posts
    Well, the basics are trivial.
    Code:
    <form ... >
    
    Name: <input name="name" />
    Address: <input name="address" />
    ...
    
    Are you interested in seeing the next sub-form?
    <label>
        <input type="radio" name="subf1" value="yes"
               onclick="document.getElementById('subform1').style.display='block';"/> Yes
    </label>
    <label>
        <input type="radio" name="subf1" value="no" checked="checked"
               onclick="document.getElementById('subform1').style.display='none';"/> No
    </label>
    
    <div id="subform1" style="display: none;">
    Enter more info:
    
    Your annual salary, to the penny: <input name="salary" />
    How much can we steal without you noticing? <input name="stealThis" />
    What is your bank account number? <input name="bankAccount"/>
    ...
    </div> <!-- end of subform1 -->
    ...
    
    </form><!-- end of the entire form -->
    But beyond this, you'll have to give a lot more details.
    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.

  • #8
    Regular Coder
    Join Date
    Jun 2011
    Posts
    148
    Thanks
    18
    Thanked 0 Times in 0 Posts
    Hi guys,

    A picture is attached to show a flow example i want .

    PLease let me know if iam unclear

    the red cells are buttons where i can add / Remove the dynamic section or
    control


    thanks
    Attached Thumbnails Attached Thumbnails Dynamic Form or Div with dynamic subform or subdivs-mockup.jpg  

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,014
    Thanks
    79
    Thanked 4,436 Times in 4,401 Posts
    Yes? How is that different in principle than the code I gave you?

    Yes, you could use a button instead of radio buttons to control the appearance/disappearance of each <div>.
    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.

  • #10
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts


    do you have a smaller diagram?

    seriously, I can't make out any of that - and if I zoom in it just goes blurry...

    [EDIT:] you can read that, Old Pedant? Looks like I'm going to have to start deferring to you on *seeing* as well
    Last edited by xelawho; 09-29-2011 at 12:25 AM.

  • #11
    Regular Coder
    Join Date
    Jun 2011
    Posts
    148
    Thanks
    18
    Thanked 0 Times in 0 Posts
    sorry guys,

    We can see it clearly if it was an excel file but this one is not supported..

    can i have your emails to send it to you as a excel ?

    Thanks

  • #12
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    why not .zip it?

    but Old Pedant raises a good question - the basic example he gave can be adapted to suit your needs... or is there a problem?

  • #13
    Regular Coder
    Join Date
    Jun 2011
    Posts
    148
    Thanks
    18
    Thanked 0 Times in 0 Posts
    In Old pedant example i have a radio button that create another level of control which is great ...but in my example it is continous ...i can create 1 as i can create 10 or more and this in each level as i have 5 levels

    Levl11 -- add/remove
    Level12 -- add/remove
    Level13 -- add/remove
    Leve14 -- add/remove

    Levl21 -- add/remove
    Level22 -- add/remove
    Level23 -- add/remove
    Leve24 -- add/remove

    thanks

  • #14
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    but is it necessary to have the option of creating infinite levels? or is there some sort of limit - say level 2 only needs 3 sub-levels (which themselves only need 3 sub-sub levels)?

  • #15
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,014
    Thanks
    79
    Thanked 4,436 Times in 4,401 Posts
    Yes, easily.

    But the hard part is constructing the boxes in their fully visible form.

    Will you use <div>s? Will you use <table>s?

    You build the HTML without the show/hide capability and I'll help you show/hide it.
    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.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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