No Food for Thought

Duplicate form sections with jQuery - Improved

admin Friday May 27, 2016

Based on David Carr's excessively simple technique to duplicate form sections using JavaScript, here is my enhanced but still minimalist take, adding support for:

  1. select multiple
  2. starting the form with several sections already
  3. easy backend usage

This changes indices so they start at 0.
Image Duplicate Form Sections

//define template var template = $('#sections .section:first').clone(); //define counter var sectionsCount = jQuery('div.section:last').data('number'); function incrementIdentifier(id, sectionsCount) { if (id.substr(-1) == '0') { id = id.substr(0, id.length - 1); } return id + sectionsCount; } //add new section $('body').on('click', '.addsection', function() { //increment sectionsCount++; //loop through each input var section = template.clone().find(':input').each(function(){ //set id to store the updated section number newId = incrementIdentifier(this.id, sectionsCount); //update for label $(this).prev().attr('for', newId); //update id this.id = newId; var baseName = this.name; var array = false; if (baseName.substr(-2) == '[]') { array = true; baseName = baseName.substr(0, baseName.length - 2); } baseName = incrementIdentifier(baseName, sectionsCount); if (array) { baseName = baseName + '[]'; } this.name = baseName; }).end() //inject new section .appendTo('#sections'); jQuery('input[name=lastSection]').val(sectionsCount); return false; }); //remove section $('#sections').on('click', '.remove', function() { //fade out section $(this).parent().fadeOut(300, function(){ //remove parent element (main section) $(this).parent().parent().empty(); return false; }); return false; });

As a bonus, the PHP function I quickly crafted to ease processing the resulting $_REQUEST:

<?php /** * Treat $_REQUEST when working with duplicate-form-sections.js * $_REQUEST['numberedParameters'] contains the base name of the parameters to be converted into arrays * $_REQUEST['lastSection'] is the number of the last section (the number of sections minus 1) * Alters neither $_GET nor $_POST * @author Philippe Cloutier * @license MIT * @return boolean false on failure */ function numberedParametersToArrays() { if (! isset($_REQUEST['lastSection'])) { return false; } $numberedParameters = $_REQUEST['numberedParameters']; $lastSection = $_REQUEST['lastSection']; foreach ($numberedParameters as $numberedParameter) { $_REQUEST[$numberedParameter] = array(); for ($i = 0; $i <= $lastSection; $i++) { if (isset($_REQUEST[$numberedParameter . $i])) { $_REQUEST[$numberedParameter][] = $_REQUEST[$numberedParameter . $i]; } else { $_REQUEST[$numberedParameter][] = array(); } // We could unset the numbered parameters. } } return true; } ?>

And here is an adjusted usage example:

<form> <div id="sections"> <div class="section" data-number="0"> <fieldset> <legend>User</legend> <p> <label for="firstName">First Name:</label> <input name="firstName0" id="firstName0" value="" type="text" /> </p> <p> <label for="lastName">Last Name:</label> <input name="lastName0" id="lastName0" value="" type="text" /> </p> <p> Friends: <select name="friends1[]" id="friends1" size="2" multiple> <option>Alice</option> <option>Bob</option> </select> </p> <p><a href="#" class='remove'>Remove Section</a></p> </fieldset> </div> </div> <p><a href="#" class='addsection'>Add Section</a></p> <input type="hidden" name="numberedParameters[]" value="firstName"> <input type="hidden" name="numberedParameters[]" value="lastName"> <input type="hidden" name="numberedParameters[]" value="friends"> <input type="hidden" name="lastSection" value="0"> </form>

Note that there are similar solutions elsewhere. I am not saying this one is better than these.

Fully Free

Kune ni povos is seriously freethough not completely humor-free:

  • Free to read,
  • free to copy,
  • free to republish;
  • freely licensed.
  • Free from influenceOriginal content on Kune ni povos is created independently. KNP is entirely funded by its freethinker-in-chief and author, and does not receive any more funding from any corporation, government or think tank, or any other entity, whether private or public., advertisement-free
  • Calorie-free*But also recipe-free
  • Disinformation-free, stupidity-free
  • Bias-free, opinion-free*OK, feel free to disagree on the latter.
  • Powered by a free CMS...
  • ...running on a free OS...
  • ...hosted on a server sharedby a great friend for free