Databases
StackOverflow2013
Postsdbo
POjquery nested form cloning
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjquery nested form cloning
    primarykey
    data
    text
    <p>I am extremely new to jquery and I've been doing a lot of research in trying to clone a nested fieldset, at least I think that's what its called. I have a very simple form that has the following:</p> <pre><code> Group - input box People ==================================== FirstName LastName ==================================== input box input box </code></pre> <p>I want to be able to add some controls that can do the following, one would be to be able to add more people within that group, so lets say I wanted to add 3 more fields to Group it would look like this:</p> <pre><code> Group - input box People ==================================== FirstName LastName ==================================== input box input box input box input box Delete input box input box Delete input box input box Delete And then if I wanted to add a new Group it would look something like this: Group - input box People ==================================== FirstName LastName ==================================== input box input box input box input box Delete input box input box Delete input box input box Delete Group - input box Delete Group People ==================================== FirstName LastName ==================================== input box input box </code></pre> <p>Does anyone have any simple way of doing this? I have found a few plugins like sheepit and some other ones, but they are very complicated to use and to modify to fit for what I want to do. Any help would be very much appreciated</p> <p>This is the code i have so far, although it doesn't really work. I wanted to show what i have tried so far.</p> <pre><code> &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt; &lt;title&gt;Intranet&lt;/title&gt; &lt;link rel="stylesheet" href="../css/style.css"&gt; &lt;script type="text/javascript" src="../scripts/jquery-1.4.2.js"&gt;&lt;/script&gt; &lt;script&gt; var current = 1; $(function() { $('.addPerson').click(function() { current++; var strToAdd = '&lt;p&gt;&lt;label for="firstname"'+current+'"&gt;Name&lt;/label&gt;&lt;em&gt;*&lt;/em&gt;&lt;input id="firstname'+current+'" name="firstname'+current+'" size="25" /&gt;&lt;input id="lastname'+current+'" name="lastname'+current+'" size="25"/&gt;&lt;/p&gt;' $('#mainPeople').append(strToAdd) }) }) &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;form id="someform" method="post"&gt; &lt;fieldset id="mainGroup"&gt; &lt;p&gt;Area: &lt;label for="Group1"&gt;Group&lt;/label&gt; &lt;em&gt;*&lt;/em&gt;&lt;input id="Group1" name="Group1" size="25" /&gt; &lt;/p&gt; &lt;fieldset id="mainPeople"&gt; &lt;p&gt; &lt;label for="firstname1"&gt;Name&lt;/label&gt; &lt;em&gt;*&lt;/em&gt;&lt;input id="firstname1" name="firstname1" size="25"/&gt; &lt;input id="lastname1" name="lastname1" size="25" /&gt; &lt;/p&gt; &lt;/fieldset&gt; &lt;/fieldset&gt; &lt;p&gt; &lt;input type="button" id="addPerson" value="Add Another Person"&gt; &lt;input type="button" id="addGroup" value="Add Another Group"&gt; &lt;/p&gt; &lt;input type="submit" value="Save"&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USBrad Hazelnut
    1. USBrad Hazelnut
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COCan someone please help me with this
      singulars
      1. POjquery nested form cloning
      1. USBrad Hazelnut
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload