Forums

Hi everyone, i'm having a little problem with Chronoforms, what i'm trying to achieve is a field where you can add extra fields if you need them.

Something like a + button next to the input field and when you click on it a new field appears and you can fill in the data in that field.

And it must show up on the e-mail template dinamically too, any way to do this using an array or something?

Hi mluispt,

Please see this FAQ

Bob

Excellent! but how would you delete a row?

Hi bruceluis,

Please see this post

Bob

Thanks! but I'm not that good at coding. Can you see my code and maybe help me with the coding? I will put the element code and JS:
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 another vehicle' class='add_one' /></div>";
  } else {
    $button = "";
  }
  // add the inputs with a little ChronoForms styling
  echo "<div id='recipient_{$i}' class='{$class}' >




<div><label>Make</label><input type='text' name='recipient[{$i}][make]' id='recipient_{$i}_make' /></div>

<div class='clear' ></div>

<div><label>Model</label><input type='text' name='recipient[{$i}][model]' id='recipient_{$i}_model' /></div>

<div class='clear' ></div>

<div><label>Year</label><input type='text' name='recipient[{$i}][year]' id='recipient_{$i}_year' /></div>




<div class='clear' ></div>- - -
  {$button}
</div>";
}
?>

JS:

window.addEvent('domready', function() {
  // hide all but the first set
  $$('div.hide_me').each(function(el) {
    el.setStyle('display', 'none');
  });
  // call the addOne function passing the row number  
  $$('input.add_one').each(function(el) {
    el.addEvent('click', function(event) {
      var id = event.target.id.substr(7, 1);
      addOne(id);
    });
  });
});
// display the next row and hide the last 'Add one' button
function addOne(id) {
  $('addone_'+id).setStyle('display', 'none');
  $('recipient_'+id).setStyle('display', 'block');
};