Need help with Dynamic form

bruceluis 04 Feb, 2013
I'm new at this. I need a simple dynamic form with 2 drop downs.

Automobile Make and Model.
"Make" is the car manufacturer
"Model" is the list of models under that specific car make
please note, when you choose the "Make" the dropdown show the "Model" available for that "Make.

A step by step, please!!! I'm going nuts!!!
bruceluis 05 Feb, 2013
Excellent. I already read that, but it was difficult to follow since I'm a newbie at Chronoforms, anyhow, I was able to do it, my only problem is that I will need a delete row button. Mr. GrayHead gave me this post http://www.chronoengine.com/forums.html?cont=posts&p=301912#p301912 but looks that I have to redo what I have and I dont want to go crazy again. I just want to incorporate the delete button to it. Here is the code for the element I have so far (under it I will paste the js):
<?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');
};
This topic is locked and no more replies can be posted.