dynamic fields

Hi all,

I have made a CF form with many fields in two groups of saving to DB.
1st group (basic info about company) saves to one table
2nd group (info about contacts of the company) saves to another table where 1 record of 1st group can have 4 records in 2nd group. So it is relation 1:N (one-to-many).

1) I need to know, how make a form with dynamically showing of fields in 2nd group (type of contact,name,phone,email). I have 4 fields in form and need show next group of these 4 fields for saving to next record. I know that I have to use JS, but dont know how to collect with CF.
2) How set up one-to-many relation? I have tried in many ways, but without solution.

I hope that is intelligibly described.

thx 4 hints.
Josef

Hi Josef,

Please see this FAQ which may help.

Bob

of course, I saw this FAQ but forgot.
what about my second question?

2) How set up one-to-many relation? I have tried in many ways, but without solution.

thanks a lot.

Hi josef,

Exactly what part of a one to many relationship are you having problems with?

Bob

Hi Bob,

2) I did figure out.
1) thanks your FAQ I find out that the name of field have to has in form: model_id[index][field_name] - so data are shown in field, but when I change some value and click on Submit no data are updated and I get error:

 Parse error: syntax error, unexpected '-', expecting ',' or ';' in D:\test\htdocs\portal\administrator\components\com_chronoforms\form_actions\db_save\db_save.php(66) : eval()'d code on line 17

Fatal error: Call to a member function bind() on a non-object in D:\test\htdocs\portal\administrator\components\com_chronoforms\form_actions\db_save\db_save.php on line 119

thank you

Hi homeopat,

It looks as though you have a dash '-' in one of the column names in the table. Please change this and the corresponding input to remove the '-' - using '_' instead is OK.

Bob

great, little stupid fault. thank you.

I have question. If I use your solution of dynamic fields,show it the correct count of dynamic fields in edit mode? I mean, If I have 4 records,show it 4 fields with data?
thank you

Hi Homeopat,

I forget exactly how the code works. You may need to modify it to 'un-hide' any rows with values.

Bob

Yeah, I have adjusted the condition:

if ( $i == 0 || isset($_GET['cid']) ) {
  $class = 'show_me';
} else {
  $class = 'hide_me';
}

Hi Bob,

how the dynamic fields work in CFv5, do I have to modify code?
thx

Hi Homeopat,

Did you check the "Events" tab under the element settings ? please also check the starter guide on the home page, it explains this feature briefly!

Regards,
Max

Hi Max, I am not sure if u understand me.
I have form with dropdown menu and 2 text boxes in same group and I need to show this group dynamically ... in CFv4 it works by this faqhttp://www.chronoengine.com/faqs/2700-how-can-i-have-a-button-to-add-more-form-inputs.html but it doesnt work.

So I need to show this form fields in group four times.
thx

The same code you have should work in v5, but since v5 is using JQuery instead of Mootools, you will need to do some small changes to the JS code included.

change

window.addEvent('domready', function() {

to

jQuery(document).ready(function($){

$$ to $

el.setStyle

to

el.style

el.addEvent

to

el.On

Regards,
Max

Hi Max, I repaired it, but doesnt work

JS action in setup:

jQuery(document).ready(function($) {
  // hide all but the first set
  $('div.hide_me').each(function(el) {
    el.Style('display', 'none');
  });
  // call the addOne function passing the row number  
  $('input.add_one').each(function(el) {
    el.On('click', function(event) {
      var id = event.target.id.replace('addone_', '');
      addOne(id);
    });
  });
});
// display the next row and hide the last 'Add one' button
function addOne(id) {
  $('addone_'+id).setStyle('display', 'none');
  $('pronajimatelkontakty_'+id).setStyle('display', 'block');
};

form code:

<?php
// set the total count
$count = 3;
for ( $i = 0; $i <= $count; $i++ ) {
  // add classes which will let us identify the inputs to hide
  if ( $i == 0 || isset($_POST['cid']) ) {
    $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='další osoba' class='add_one' /></div>";
  } else {
    $button = "";
  }
  // add the inputs with a little ChronoForms styling
  echo "<div id='pronajimatelkontakty_{$i}' class='{$class}' >
  <div class='multiline_start'>
    <label>Druh kontaktu</label>
    <select size='1' id='pronajimatelkontakty_{$i}_druh' name='pronajimatelkontakty[{$i}][druh]'>
      <option value='Správce nemovitosti'>Správce nemovitosti</option>
      <option value='Kontaktní osoba pronajímatele'>Kontaktní osoba pronajímatele</option>
      <option value='Technický dozor pronajímatele'>Technický dozor pronajímatele</option>
      <option value='Marketing pronajímatele'>Marketing pronajímatele</option>
    </select>
    <label>Jméno</label>
    <input type='text' name='pronajimatelkontakty[{$i}][jmeno]' id='pronajimatelkontakty_{$i}_jmeno' />
    <label>Přijmení</label>
    <input type='text' name='pronajimatelkontakty[{$i}][prijmeni]' id='pronajimatelkontakty_{$i}_prijmeni' />
  </div>
  <div class='multiline_add'>
    
    <label>Telefon</label>
    <input type='text' name='pronajimatelkontakty[{$i}][telefon]' id='pronajimatelkontakty_{$i}_telefon' />
    <label>E-mail</label>
    <input type='text' name='pronajimatelkontakty[{$i}][email]' id='pronajimatelkontakty_{$i}_email' />
  </div>
  <div class='clear' ></div>
  <hr width='100%'>
  {$button}
</div>";
}
?>

Stuff like this need testing, do you get any js errors on page load or when you click the button ?

Also, the latest v5 update has a "duplicator" setting under the "container" type, which you may try, its still experimental feature though!

Regards,
Max

Sorry, I forgot said that group of form fields is shown unhide, so I see a group of field four time.

I get error:

SyntaxError: Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead jquery.js:1
Error: http://192.168.2.159/portal/libraries/cegcore/assets/jquery/jquery.js is being assigned a //# sourceMappingURL, but already has one
TypeError: el.style is not a function chronoconnectivity5:155
Užití getPreventDefault()je zastaralé.  Používejte raději defaultPrevented. jquery.js:5

Hi homeopat,

Unfortunately there are a lot more changes needed to switch the JavaScript to use jQuery instead of MooTools :-(

I've got a version working and have added a new CFv5 FAQ with the updated code.

Bob

Hi Bob,

thx for help .. add button works fine ... but I have a problem. I open the record form editing ... I know there are 4 records in the db, but the form show the first record (first group of form fields), rest of field groups is empty.

Form:

<?php
// set the total count
$count = 4;
for ( $i = 1; $i <= $count; $i++ ) {
  // add classes which will let us identify the inputs to hide
  if ( $i == 1 || isset($_POST['gcb']) ) {
    $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 class='form-group gcore-form-row' id='form-row-{$i}'>
    <div class='gcore-input gcore-display-table' id='fin-button{$i}'>
      <input type='button' name='addone_{$j}' id='addone_{$j}' value='Add one' class='add_one form-control A' /></div></div>";
  } else {
    $button = "";
  }
  // add the inputs with a little ChronoForms styling
  echo "
<div class='form-group gcore-form-row {$class}' id='pronajimatelkontakty_{$i}' >
  <div class='gcore-subinput-container-wide' id='fitem-name_{$i}'>
    <label for='pronajimatelkontakty_{$i}_druh' class='control-label gcore-label-left'>Druh kontaktu</label>
    <div class='gcore-input pull-left gcore-sub-input gcore-display-table' id='fin-druh_{$i}' >
      <select size='1' id='pronajimatelkontakty_{$i}_druh' name='pronajimatelkontakty[{$i}][druh]' class='form-control A'>
        <option value='Správce nemovitosti'>Správce nemovitosti</option>
        <option value='Kontaktní osoba pronajímatele'>Kontaktní osoba pronajímatele</option>
        <option value='Technický dozor pronajímatele'>Technický dozor pronajímatele</option>
        <option value='Marketing pronajímatele'>Marketing pronajímatele</option>
      </select>
    </div>
    <label for='pronajimatelkontakty_{$i}_jmeno' class='control-label gcore-label-left'>Jméno</label>
    <div class='gcore-input pull-left gcore-sub-input gcore-display-table' id='fin-jmeno_{$i}' >
      <input type='text' name='pronajimatelkontakty[{$i}][jmeno]' id='pronajimatelkontakty_{$i}_jmeno' class='form-control A' />
    </div>
    <label for='pronajimatelkontakty_{$i}_prijmeni' class='control-label gcore-label-left'>Příjmení</label>
    <div class='gcore-input pull-left gcore-sub-input gcore-display-table' id='fin-prijmeni_{$i}' >
      <input type='text' name='pronajimatelkontakty[{$i}][prijmeni]' id='pronajimatelkontakty_{$i}_prijmeni' class='form-control A' />
    </div>
    
    
  </div>
  <div class='gcore-subinput-container-wide' id='fitem-address_{$i}'>
    <label for='pronajimatelkontakty_{$i}_telefon' class='control-label gcore-label-left'>Telefon</label>
    <div class='gcore-input pull-left gcore-sub-input gcore-display-table' id='fin-telefon_{$i}' >
      <input type='text' name='pronajimatelkontakty[{$i}][telefon]' id='pronajimatelkontakty_{$i}_telefon' class='form-control A' />
    </div>
    <label for='pronajimatelkontakty_{$i}_email' class='control-label gcore-label-left'>E-mail</label>
    <div class='gcore-input pull-left gcore-sub-input gcore-display-table' id='fin-email_{$i}' >
      <input type='text' name='pronajimatelkontakty[{$i}][email]' id='pronajimatelkontakty_{$i}_email' class='form-control A' />
    </div>
  </div>
  {$button}
</div>
  ";
}
?>

JS:

jQuery(document).ready(function (jQ) {
  // display the next row and hide the last 'Add one' button
  function addOne(id) {
    var button = '#addone_' + id;
    jQ(button).hide();
    var block = '#pronajimatelkontakty_' + id;
    jQ(block).show();
  }
  // hide all but the first set
  jQ('div.hide_me').each(function () {
    jQ(this).css('display', 'none');
  });
  // call the addOne function passing the row number
  jQ('input.add_one').each(function () {
    jQ(this).click( function () {
      var id = jQ(this).attr('id').replace('addone_', '');
      addOne(id);
    });
  });
});

any idea? in previous version was different condition:

if ( $i == 1 || isset($_POST['gcb']) )

but now is

if ( $i == 1)

I tried modiiy it, but no result.