Forums

How to an Add/Duplicate fields button?

quenda 29 May, 2014
Hallo.
I'm building form and I'm trying to replicate this (now obsolete) form:

http://www.nettaredeisanti.it/images/ordini/esempio2.html#

Dynamic Dropdown problem is solved with this very useful FAQ:
http://www.chronoengine.com/faqs/58-cfv4/cfv4-elements-and-html/2647-how-do-i-build-a-select-drop-down-radio-%3Cspan%20class=

This is the new form in the new website:
http://www.ondesign.eu/viniriccardi/ordini-e-preventivi.html

Now I need to add a button (AGGIUNGI UN ALTRO VINO/ADD ANOTHER WINE) that "duplicates" the 3 fields:
- TIPOLOGIA
- VINO
- CARTONI

Question: can I follow this FAQ:
http://www.chronoengine.com/faqs/58-cfv4/cfv4-elements-and-html/2700-how-can-i-have-a-button-to-add-more-form-inputs.html

.......or you can suggest an easier way to add a "Duplicate-fields" button to a form?

Thank-you.

ettore
GreyHead 29 May, 2014
Hi quenda,

The FAQ is still probably the best way to do it.

Bob
quenda 29 May, 2014
Thank-you for your ultra-fast reply.
ettore
quenda 29 May, 2014
Hallo.
I'm working (hard) with the Duplicate/Add field tutorial and I need your help, please!
I'm using this code in a Custom element:
<?php
// set the total count
$count = 5;
for ( $i = 1; $i <= $count; $i++ ) {
  // add classes which will let us identify the inputs to hide
  if ( $i == 1 ) {
    $class = 'show_me';
  } else {
    $class = 'hide_me';
  }
  // add the 'Add one' buttons (but not to the last set)
  if ( $i < $count ) {
    $j = $i+1;
    $button = "<div><input type='button' name='addone_{$j}' id='addone_{$j}' value='Add one' class='add_one' /></div>";
  } else {
    $button = "";
  }
  // add the inputs with a little ChronoForms styling
  echo "<div id='recipient_{$i}' class='{$class}' >
  <div class='multiline_start'>
    <label>TIPOLOGIA: *</label>
    <input type='text' name='recipient[{$i}][name]' id='recipient_{$i}_source_1' />
  </div>
  <div class='multiline_add'>
    <label>VINO: *</label>
    <input type='text' name='recipient[{$i}][address]' id='recipient_{$i}_target_1' />
  </div>
   <div class='multiline_add'>
    <label>CARTONI: *</label>
    <input type='text' name='recipient[{$i}][address]' id='recipient_{$i}_drop_down_cartoni' />
  </div>
  <div class='clear' ></div>
  {$button}
</div>";
}
?>

How can I hide/disable the 3 fields (TIPOLOGIA / VINO / CARTONI) when the page loads for the first time and keep the "Add one" button only?

I suppose that the input type='text' should be changed in something like input type='dropdown'........can you tell me the right attribute/code?

Than-you!

ettore
quenda 30 May, 2014
Hallo.
I have done small corrections to the code:
<?php
// set the total count
$count = 5;
for ( $i = 1; $i <= $count; $i++ ) {
  // add classes which will let us identify the inputs to hide
  if ( $i == 1 ) {
    $class = 'show_me';
  } else {
    $class = 'hide_me';
  }
  // add the 'Add one' buttons (but not to the last set)
  if ( $i < $count ) {
    $j = $i+1;
    $button = "<div><input type='button' name='addone_{$j}' id='addone_{$j}' value='ADD FIELDS' class='add_one' /></div>";
  } else {
    $button = "";
  }
  // add the inputs with a little ChronoForms styling
  echo "<div id='recipient_{$i}' class='{$class}' >
  <div class='multiline_start'>
    <label>TIPOLOGIA: *</label>
    <input type='text' name='recipient[{$i}][source_1]' id='recipient_{$i}_source_1' />
  </div>
  <div class='multiline_add'>
    <label>VINO: *</label>
    <input type='text' name='recipient[{$i}][target_1]' id='recipient_{$i}_target_1' />
  </div>
   <div class='multiline_add'>
    <label>CARTONI: *</label>
    <input type='text' name='recipient[{$i}][drop_down_cartoni]' id='recipient_{$i}_drop_down_cartoni' />
  </div>
  <div class='clear' ></div>
  {$button}
</div>";
}
?>

To summarize I need a button to duplicate three Drop Down in my form:

First dropdown name and ID : source_1
First dropdown label: TIPLOGIA: *

Second dropdown name and ID: target_1
Second dropdown label: VINO: *

Third dropdown name and ID: drop_down_cartoni
Third dropdown label: CARTONI: *

FYI the first and second dropdown are created following this "Simple Dynamic Drop-down" FAQ:

http://www.chronoengine.com/faqs/58-cfv4/cfv4-elements-and-html/3927-how-can-i-add-a-simple-double-drop-down-without-ajax-.html

Thank-you!

ettore
This topic is locked and no more replies can be posted.