Forums

Hi,

I've been browsing your vast Forum/FAQ for a solution to my problem. But I guess I cannot combine the apt search terms so I need to ask a question:

I need to create a subscription form that features one "customer" who's giving away subscriptions to several "recipients". I would like to have at least 5 "recipients" but I don't want to display all those name and addres fields at once, I would like to have them expandable so the "customer" isn't overwhelmed by fields when the form loads on the page. Example:

--- customer ---
Field: Name
Field: Address

--- recipient 1 ---
Field: recipient1_name
Field: recipient1_address

--- recipient 2 --- (this is a part of the form that only displays when the customer clicks on it)
Field: recipient2_name
Field: recipient2_address

etc up to 5 recipients...

I found some ideas in a FAQ on this website but that involved some html and javascript and I am not quite sure how this works in v 4. I guess it's problably very easy by using some kind of expand/collapse code. But I can't figure it out though...

Any suggestion would be most welcome.

Rgds

Hi arvendal,

If you know that there is a maximum then the simplest way to do it is to use a PHP loop in a Custom Element element to generate all five sets of inputs,including an 'Add one' button and then hide all but the first. A little JavaScript will then let you un-hide them one at a time.

There's a demo form here using the code below.

The Custom Element element:

<?php
for ( $i = 1; $i <= 5; $i++ ) {
	if ( $i == 1 ) {
		$class = 'show_me';
	} else {
		$class = 'hide_me';
	}
	if ( $i < 5 ) {
		$j = $i+1;
		$button = "<div><input type='button' name='addone_{$j}' id='addone_{$j}' value='Add one' class='add_one' /></div>";
	} else {
		$button = "";
	}
	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>";
}
?>

A Load JS action:

window.addEvent('domready', function() {
  $$('div.hide_me').each(function(el) {
    el.setStyle('display', 'none');
  });
  $$('input.add_one').each(function(el) {
    el.addEvent('click', function(event) {
      var id = event.target.id.substr(7, 1);
      addOne(id);
    });
  });
});
function addOne(id) {
  $('addone_'+id).setStyle('display', 'none');
  $('recipient_'+id).setStyle('display', 'block');
};

Bob

Lateer: added to this FAQ

This is brilliant!
It works lika a charm in FF and Chrome, but the stubborn IE 9 (as often) doesn't display the added rows. Could this be solved?

Rgds

Hi Arvendal,

It's working OK here in IE9, maybe something else in your template upsets it? Please post a link to the form so I can take a quick look.

Bob

It was your example I tested in different browsers. Today I'll test your code on my Joomla installation. I'll report the result.

Rgds

Hi,

All seems to work great now! Even with the somewhat exasperating IE...

Thanks for this really brilliant solution!

Rgds

Now I have tested the code on my develoment site. I also added some more fields. It works really great!

I had some problems with the e-mail core action, it didn't send the entered values after I added more fields, instead only the curly bracketed field names were sent. So I must have missed soemthing in the php code. But the delivery of the emailed form worked when I used your email[GH] action. So I am very content.

Best regards

Hi arvendal,

I think that the standard Email action probably doesn't handle array results very well.

Glad to hear that it is working well.

Bob

Hi,

This was really a good solution for an expandable form!

Just one more question concerning the e-mail function:
When I write the e-mail template I use this code for generating the recipient list:

MOTTAGARE:
<?php
for ( $i = 1; $i <= 5; $i++ ) {
   if ( $i == 1 ) {
      $class = 'show_me';
   } else {
      $class = 'hide_me';
   }
   if ( $i < 5 ) {
      $j = $i+1;
      $button = "<div></div>";
   } else {
      $button = "";
   }
   echo "Namn: {recipient.{$i}.namn}
   Adress: {recipient.{$i}.address}
   Postnummer: {recipient.{$i}.postnummer}
   Postort: {recipient.{$i}.postort}";
}
?>

BESTÄLLARE:
Namn: {namn}
E-post: {epost}
Adress: {adress}
Postnummer: {postnummer}
Postort: {postort}
Meddelande: {meddelande}
Avsändaren har begärt skickad kopia: {send_email}

It seems that this code somehow forces the e-mail format to be HTML, even though I have chosen the alternative "text". Could be code for the e-mail template be written in a way that facilitate a message in txt format?

Rgds

Hi Arvendal,

I'm not clear why adding PHP would force the email into HTML mode.

You could try separating the PHP out into a Custom Code action and building the text body there and just include the result in the email.

Bob

Thanks for your answer.
I'll check that possibility out.

Rgds