Databases
StackOverflow2013
Postsdbo
POadjusting dynamic form to work with multiple sections
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POadjusting dynamic form to work with multiple sections
    text
    copied!<p>I have a script which dynamically adds rows to a form with default values:</p> <pre><code> $(document).ready(function() { var defaults = { 'name[]': 'Name', 'email[]': 'Email', 'organisation[]': 'Organisation', 'position[]': 'Position' }; var setDefaults = function(inputElements, removeDefault) { $(inputElements).each(function() { if (removeDefault) { if ($(this).data('isDefault')) { $(this).val('') .removeData('isDefault') .removeClass('default_value'); } } else { var d = defaults[this.name]; if (d &amp;&amp; d.length) { this.value = d; $(this).data('isDefault', true) .addClass('default_value'); } } }); }; setDefaults(jQuery('form[name=booking] input')); $(".add").click(function() { var x = $("form &gt; p:first-child").clone(true).insertBefore("form &gt; p:last-child"); setDefaults(x.find('input')); return false; }); $(".remove").click(function() { $(this).parent().remove(); }); // Toggles $('form[name=booking]').delegate('input', { 'focus': function() { setDefaults(this, true); }, 'blur': function() { if (!this.value.length) setDefaults(this); } }); }); </code></pre> <p>For the following form:</p> <pre><code>&lt;form method="post" name="booking" action="bookingengine.php"&gt; &lt;p&gt;&lt;input type="text" name="name[]"&gt; &lt;input type="text" name="email[]"&gt; &lt;input type="text" name="organisation[]"&gt; &lt;input type="text" name="position[]"&gt; &lt;span class="remove"&gt;Remove&lt;/span&gt;&lt;/p&gt; &lt;p&gt;&lt;span class="add"&gt;Add person&lt;/span&gt;&lt;br /&gt;&lt;br /&gt;&lt;input type="submit" name="submit" id="submit" value="Submit" class="submit-button" /&gt;&lt;/p&gt; &lt;/form&gt; </code></pre> <p>I would now like to split the form into 2 sections, each of which can have rows added dynamically to it. The second section would only have spaces for name and email, so the form as a whole, before any additional rows are added, would look something like this:</p> <p><img src="https://i.stack.imgur.com/DcFqW.png" alt="enter image description here"></p> <p>But I'm not sure how to achieve this. Either I would create a separate form with a seperate script, and then would need to know how to submit the information from both forms together, or I would just have one form but would then need to work out how to add rows dynamically to each section.</p> <p>Could someone help with this?</p> <p>Thanks,</p> <p>Nick</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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