Forums

Add more form inputs

vismay 01 Mar, 2013
I've readed a nice tutorial how to add more form inputs with a button.
It works fine thanks.

I have a question for the following concept:

drop down: number of guests:

in the php it has to read the dropdown value and this value has to be -1.


Help is welcome!!

Matteo
GreyHead 01 Mar, 2013
Hi Matteo,

Sorry, but I don't understand your question :-(

Bob
vismay 01 Mar, 2013
Hello,
thanks for your reply.

The problem is follow:
A web checkin for where I ask:

How many persons you are;
One is groupleader and I need all informations;
According to the number of persons, there is the code " Add person" that I've found in the FAQ.
Of course I have to adjust it to do Persons minus Group leader.

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 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>Name</label>
    <input type='text' name='recipient[{$i}][name]' id='recipient_{$i}_name' />
  </div>
  <div class='multiline_add'>
    <label>Address</label>
    <input type='text' name='recipient[{$i}][address]' id='recipient_{$i}_address' />
  </div>
  <div class='clear' ></div>
  {$button}
</div>";
}
?>


THanks!!
Matteo
vismay 01 Mar, 2013
So, a dropdown ( named guests) where I choose how many guests.

Then the code has to do $count = guest - 1
GreyHead 01 Mar, 2013
HI Mattteo,

The code you've posted is PHP which runs before the form loads.

If you want to make a change based on a selection by the user in the browser than you either have to add it using JavaScript, or you have to submit and then reload the form with the amended values.

Bob
vismay 01 Mar, 2013
Yes, it runs also a js on load:

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');
};
GreyHead 01 Mar, 2013
Hi vismay,

Good, you will need to add to this to make the changes you need.

Bob
vismay 01 Mar, 2013
Yes, it works.
But only for a fixed number of guests set from: $count = 5;

I need to have this variable according to the previus dropdown.
GreyHead 01 Mar, 2013
HI vismay,

Then edit the code to check the value of the drop down and add that number of new entries, the same basic code should work OK.

Bob
vismay 02 Mar, 2013
I thought it was easier, but my code skills are zero!!!

Here is the code, can you show me?

<div class="ccms_form_element cfdiv_select" id="1_container_div" style=""><label for="1">Ospiti</label><select size="1" id="1" class="" title="" name="ospiti">
<option value="">?</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<div class="clear"></div><div id="error-message-ospiti"></div></div><?php
// set the total count
echo $form->data['email'];
?><div class="ccms_form_element cfdiv_select" id="2_container_div" style=""><label for="2">Tipo Alloggiato</label><select size="1" id="2" class="" title="" name="tipoalloggiato">
<option value="" selected="selected"></option>
</select>
<div class="clear"></div><div id="error-message-tipoalloggiato"></div></div><fieldset class="cf_container ccms_form_element cnt" id="cf_container_9"><legend>Scheda alloggiati di notificazione alla Polizia di Stato </legend><div class="ccms_form_element cfdiv_text" id="email_container_div" style=""><label for="email">Email</label><input id="email" maxlength="150" size="30" class=" validate['required','email']" title="" type="text" value="" name="email" />
<div class="clear"></div><div id="error-message-email"></div></div><div class="ccms_form_element cfdiv_datetime multiline_start" id="arrivo1_container_div" style=""><label>Arrivo</label><input maxlength="150" size="16" class=" validate['required'] cf_date_picker" title="" type="text" value="" name="arrivo" />
<div class="clear"></div><div id="error-message-arrivo"></div></div><div class="ccms_form_element cfdiv_datetime multiline_add" id="partenza1_container_div" style=""><label>Partenza</label><input maxlength="150" size="16" class=" validate['required'] cf_date_picker" title="" type="text" value="" name="partenza" />
<div class="clear"></div><div id="error-message-partenza"></div></div><div class="ccms_form_element cfdiv_text multiline_start" id="cognome1_container_div" style=""><label>Cognome</label><input maxlength="150" size="30" class=" validate['required','alpha']" title="" type="text" value="" name="cognome" />
<div class="clear"></div><div id="error-message-cognome"></div></div><div class="ccms_form_element cfdiv_text multiline_add" id="nome1_container_div" style=""><label>Nome</label><input maxlength="150" size="30" class=" validate['required','alpha']" title="" type="text" value="" name="nome" />
<div class="clear"></div><div id="error-message-nome"></div></div><div class="ccms_form_element cfdiv_text" id="nascita1_container_div" style=""><label>Data di Nascita</label><input maxlength="10" size="10" class=" validate['required']" title="" type="text" value="__/__/____" name="nascita" />
<div class="small-message">[gg/mm/yyyy]</div><div class="clear"></div><div id="error-message-nascita"></div></div><div class="ccms_form_element cfdiv_select multiline_start" id="choose_one_container_div" style=""><label for="choose_one">Luogo di Nascita</label><select size="1" id="choose_one" class=" validate['required']" title="" name="choose_one">
<option value="Comune italiano">Comune italiano</option>
<option value="Stato estero">Stato estero</option>
</select>
<div class="clear"></div><div id="error-message-choose_one"></div></div><div class="ccms_form_element cfdiv_text multiline_add" id="citta1_container_div" style=""><label style="display:none;">Citta</label><input maxlength="150" size="30" class=" validate['required']" title="" type="text" value="" name="citta" />
<div class="clear"></div><div id="error-message-citta"></div></div><div class="ccms_form_element cfdiv_text multiline_add" id="choose_one_other_container_div" style=""><label for="choose_one_other">Provincia</label><input id="choose_one_other" maxlength="2" size="2" class=" validate['required','alpha']" title="" type="text" value="" name="choose_one" />
<div class="clear"></div><div id="error-message-choose_one"></div></div></fieldset><div class="ccms_form_element cfdiv_custom" id="add_container_div" style=""><?php
// set the total count
echo $form->data['email'];
$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>Name</label>
    <input type='text' name='recipient[{$i}][name]' id='recipient_{$i}_name' />
  </div>
  <div class='multiline_add'>
    <label>Address</label>
    <input type='text' name='recipient[{$i}][address]' id='recipient_{$i}_address' />
  </div>
  <div class='clear' ></div>
  {$button}
</div>";
}
?><div class="clear"></div><div id="error-message-add"></div></div><div class="ccms_form_element cfdiv_empty" id="empty_container_div" style=""><div class="clear"></div><div id="error-message-empty"></div></div>


THanks!!!
GreyHead 09 Mar, 2013
Hi Vismay,

The PHP to set the number of input boxes runs before the page loads and so you can't change it from a drop-down setting after the page loads.

You can either (a) split the form in two parts - with the first setting the number of 'ospiti' and the second showing the matching number of inputs or (b) use JavaScript to change the number of inputs depending on the drop-down setting.

The first of these is simpler if you don't have JavaScript expertise available.

Bob
vismay 07 May, 2013
Hello,

in relation with all this discuttion, I would like to create a table for my form.

As there are variable like:
recipient[{$i}][name]
etc...

The systyem says:

Field name "recipient[{$i}][name]" is invalid, please fix the field name in the wizard (or the form code) then retry again.
Field name "recipient[{$i}][cognome]" is invalid, please fix the field name in the wizard (or the form code) then retry again.

A valid variable name starts with a letter or underscore, followed by any number of letters, numbers, or underscores.

Can I avoid this problem?

Thanks
vismay 07 May, 2013
It is something like:

recipient_1_name
recipient_2_name
recipient_3_name

etc.... repeated as many times as the maximum planned?

COuld i do it manually in the database?
GreyHead 07 May, 2013
Hi vismay,

I can't tell what you are doing from your posts here. If you are using the code from the example then the {$i} will be replaced with 1, 2, 3, etc.

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