Recipient variable in JS

Hello,
I'm nearly done with a complex form.
I have a piece of code that I'm not able to complete.

The php is follow:

<?php
// set the total count

$count = $form->data['alloggiati']-1;
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='Aggiungi ospite' class='add_one' /></div>";
  } else {
    $button = "";
  }
  // add the inputs with a little ChronoForms styling
  echo "<div id='recipient_{$i}' class='{$class}' >
<div class='ospiti'>Ospite {$i}<br>


<div class='ccms_form_element cfdiv_select multiline_start' id='recipient_{$i}_residenza_ospite_container_div'><label for='recipient_{$i}_residenza_ospite'>Residenza</label><select size='1' id='recipient_{$i}_residenza_ospite' name='recipient[{$i}][residenza_ospite]'>
<option value='ciro'>Comune italiano: Comune e Provincia</option>
<option value='sero'>Stato Estero: Stato</option>
</select>
<div class='clear'></div><div id='error-message-residenza_ospite'></div></div><div class='ccms_form_element cfdiv_text multiline_add' id='recipient_{$i}_comune_residenza_ospite_container_div' style=''><label for='recipient_{$i}_comune_residenza_ospite' style='display:none;'>comune</label><input id='recipient_{$i}_comune_residenza_ospite' maxlength='150' size='30' class=' validate['required','alpha']' title='' type='text' value='' name='recipient[{$i}][residenza_ospite]' />
<div class='clear'></div><div id='error-message-residenza_ospite'></div></div><div class='ccms_form_element cfdiv_text multiline_add' id='recipient_{$i}_provincia_residenza_ospite_container_div' style=''><label for='recipient_{$i}_provincia_residenza_ospite' style='display:none;'>provincia</label><input id='recipient_{$i}_provincia_residenza_ospite' maxlength='2' size='2' class=' validate['required','alpha']' title='' type='text' value='' name='recipient[{$i}][residenza_ospite]' />
<div class='clear'></div><div id='error-message-residenza_ospite'></div></div><div class='ccms_form_element cfdiv_text multiline_add' id='recipient_{$i}_stato_residenza_ospite_container_div' style=''><label for='recipient_{$i}_stato_residenza_ospite' style='display:none;'>stato</label><input id='recipient_{$i}_stato_residenza_ospite' maxlength='150' size='30' class=' validate['required','alpha']' title='' type='text' value='' name='recipient[{$i}][residenza_ospite]' />
<div class='clear'></div><div id='error-message-residenza_ospite'></div></div>



</div>
<div style='margin-top:15px;' ></div>
  {$button}
</div>";
}
?>

The code to Add fields works perfectly as follow:

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');
};

Now I want that every recipient follow the variables, but this code doesn't work:

window.addEvent('domready', function() {
  var select, other;
  select = $('recipient_{$i}_residenza_ospite');

  switchOther();
  select.addEvent('change', switchOther);
  function switchOther() {
    if ( select.value == 'ciro' ) {
      recipient_{$i}_comune_residenza_ospite.hidden = false;
      recipient_{$i}_provincia_residenza_ospite.hidden = false;
 recipient_{$i}_comune_residenza_ospite.disabled = false;
      recipient_{$i}_provincia_residenza_ospite.disabled = false;
      recipient_{$i}_stato_residenza_ospite.value = '';
      recipient_{$i}_stato_residenza_ospite.hidden = true;
 recipient_{$i}_stato_residenza_ospite.disabled = true;

    } else {
recipient_{$i}_stato_residenza_ospite.hidden = false;
recipient_{$i}_stato_residenza_ospite.disabled = false;
recipient_{$i}_comune_residenza_ospite.value = '';
      recipient_{$i}_comune_residenza_ospite.hidden = true;
recipient_{$i}_comune_residenza_ospite.disabled = true;
      recipient_{$i}_provincia_residenza_ospite.value = '';
      recipient_{$i}_provincia_residenza_ospite.hidden = true;
recipient_{$i}_provincia_residenza_ospite.disabled = true;
    }
  }
});

Of course, if I put a number instead of {$i} it works, but I would like that the JS follow the variable.

Some help?

THanks!!!!
Bodi

Hi vismay,

Your first block of code is in PHP and the variable $i is given a value by the 'for' loop.

Your last block of code is JavaScript and $i and {$i} are meaningless there. I'm not sure where the value comes from but you'd need to set it somehow, say to dollar_i and then use the JavaScript concatenation methods 'recipient_'+dollar_i+'_comune_residenza_ospite'

This still won't work in quite the way you have it. You'll need to use that to get the elements you want as $('recipient_'+dollar_i+'_comune_residenza_ospite'), then you can work with their properties and values.

Bob

Thanks for you reply!

Basically in the last strip of js code the {$i} should be the same created with php loop.
But I don't know the syntax!

You see, in php it creates me arrays of divs, names and ids like: "recipient_{$i}_residenza_ospite"

And it works, but the js code, of course, doesn't understand the {$i}.

My first answer ( I'm ignorant in codes) would br:
recipient_<?php echo{$i}; ?>_residenza_ospite

But I'm sure is not possible....

Hi vismay,

You can use PHP like that to create the JavaScript on the browser before the page is loaded if that is where it is being built.

Bob

I came back with this issue because I've resolved it in a ignorant way:

window.addEvent('domready', function() {
  var select, other;
  select = $('recipient_1_nascita_ospite');

  switchOther();
  select.addEvent('change', switchOther);
  function switchOther() {
    if ( select.value == 'ciro' ) {
      recipient_1_comune_nascita_ospite.hidden = false;
      recipient_1_provincia_nascita_ospite.hidden = false;
 recipient_1_comune_nascita_ospite.disabled = false;
      recipient_1_provincia_nascita_ospite.disabled = false;
      recipient_1_stato_nascita_ospite.value = '';
      recipient_1_stato_nascita_ospite.hidden = true;
 recipient_1_stato_nascita_ospite.disabled = true;

    } else {
recipient_1_stato_nascita_ospite.hidden = false;
recipient_1_stato_nascita_ospite.disabled = false;
recipient_1_comune_nascita_ospite.value = '';
      recipient_1_comune_nascita_ospite.hidden = true;
recipient_1_comune_nascita_ospite.disabled = true;
      recipient_1_provincia_nascita_ospite.value = '';
      recipient_1_provincia_nascita_ospite.hidden = true;
recipient_1_provincia_nascita_ospite.disabled = true;
    }
  }
});

window.addEvent('domready', function() {
  var select, other;
  select = $('recipient_2_nascita_ospite');

  switchOther();
  select.addEvent('change', switchOther);
  function switchOther() {
    if ( select.value == 'ciro' ) {
      recipient_2_comune_nascita_ospite.hidden = false;
      recipient_2_provincia_nascita_ospite.hidden = false;
 recipient_2_comune_nascita_ospite.disabled = false;
      recipient_2_provincia_nascita_ospite.disabled = false;
      recipient_2_stato_nascita_ospite.value = '';
      recipient_2_stato_nascita_ospite.hidden = true;
 recipient_2_stato_nascita_ospite.disabled = true;

    } else {
recipient_2_stato_nascita_ospite.hidden = false;
recipient_2_stato_nascita_ospite.disabled = false;
recipient_2_comune_nascita_ospite.value = '';
      recipient_2_comune_nascita_ospite.hidden = true;
recipient_2_comune_nascita_ospite.disabled = true;
      recipient_2_provincia_nascita_ospite.value = '';
      recipient_2_provincia_nascita_ospite.hidden = true;
recipient_2_provincia_nascita_ospite.disabled = true;
    }
  }
});

...and so on until 10.

But now I would like to do it until 50 and it's too stupid.

It's there a way to set a kind of: for 1 to 50 increment the number inside the function?

Thanks for help.
Matteo

After a night, dreaming of codes, php an mootools I came to a solution

<?php
for ($i = 1; $i <= 50; $i++) { echo "<script type='text/javascript'>
    window.addEvent('domready', function() {

    
  var select, other;

  select = $('recipient_",$i,"_nascita_ospite');

  switchOther();
  select.addEvent('change', switchOther);
  function switchOther() {
    if ( select.value == 'ciro' ) {
      recipient_",$i,"_comune_nascita_ospite.hidden = false;
      recipient_",$i,"_provincia_nascita_ospite.hidden = false;
 recipient_",$i,"_comune_nascita_ospite.disabled = false;
      recipient_",$i,"_provincia_nascita_ospite.disabled = false;
      recipient_",$i,"_stato_nascita_ospite.value = '';
      recipient_",$i,"_stato_nascita_ospite.hidden = true;
 recipient_",$i,"_stato_nascita_ospite.disabled = true;

    } else {
recipient_",$i,"_stato_nascita_ospite.hidden = false;
recipient_",$i,"_stato_nascita_ospite.disabled = false;
recipient_",$i,"_comune_nascita_ospite.value = '';
      recipient_",$i,"_comune_nascita_ospite.hidden = true;
recipient_",$i,"_comune_nascita_ospite.disabled = true;
      recipient_",$i,"_provincia_nascita_ospite.value = '';
      recipient_",$i,"_provincia_nascita_ospite.hidden = true;
recipient_",$i,"_provincia_nascita_ospite.disabled = true;
    }
  }
});
 </script>";
}
?>

if someone need it.....

PS: a custom code field instead of load JS