[solved] show different fields based an radio buttons

Hi,

In a form I have a radio button and you can choose between PERSON or GROUP.
When you choose PERSON, the fields below will be FIRSTNAME, LASTNAME, JOBFUNCTION, and the rest stays the same.
When you choose GROUP, the fields below will be NAME (of group), and the rest stays the same.

I'm using v3.2.

Thanks in advance.

Cheers,

SaGo

HI SAGO,

If you don't need any validation on the hidden inputs then you can do this quite simple with JavaScript. Validation makes it more complicated. There's a tutorial that you can buy here that uses the QuirksMode library - though someone recently posted here on a way to add and remove validations in CFv3.2.

Bob

Hi Bob,

(For now I think) I don't need any validation on those hidden fields.
What would the javascript look like when I would have the following code:

  <div class="form_element cf_radiobutton">
    <label class="cf_label" style="width: 150px;"></label>
    <div class="float_left">
      <input value="Persoon" title="" class="radio" id="radio00" name="radio0" type="radio" />
      <label for="radio00" class="radio_label">Person</label>
      <br />
      
<input value="Group" title="" class="radio" id="radio01" name="radio0" type="radio" />
      <label for="radio01" class="radio_label">Group</label>
      <br />
    </div>
  </div>

<div id=personfields>
</div>
<div id=groupfields>
</div>

Thanks

Hi SAGO,

It will be something like:

window.addEvent('domready', function() {
  $('radio0').addEvent('change', function() {
    if ( $('radio0').checked ) {
      $('personfields').set('display, 'block');
      $('groupfields').set('display, 'none');
    } else if ( $('radio1').checked ) {
      $('personfields').set('display, 'none');
      $('groupfields').set('display, 'block');
    } else {
      $('personfields').set('display, 'none');
      $('groupfields').set('display, 'none');
    }
  });
});

Bob

Hi Bob,

I can't seem to let Javascript work so I can't test the script you provided.
I've spent the last hours to figure it out by myself but I don't see it.

When I go to Form Code and pase the following in the Javascript box it works:

document.write("TEST");

When I paste the following it doesn't seem to work. Neighter writes shows anything.

 document.write("<p>TEST</p>");
 
 window.addEvent('domready', function() {
       document.write("<p>TEST2</p>");
}

When I look with firebug I see:

<script type="text/javascript">
//<![CDATA[
document.write("<p>TEST</p>");
window.addEvent('domready', function() {
document.write("<p>TEST2</p>");
}//]]>
</script>

Do I need to do something else.

Here you can see the form with only the document write:
http://tinyurl.com/79p489m

Here you can see the form that doesn't work:
http://tinyurl.com/7a24zcv

It's the first time I'm using JS in chronoforms so I might have forgotten to set a setting on.
Do I need to enable something for window.addEvent to work?

Thanks

Hi SAGO,

In the first form you linked to there is a typo in the script and so nothing shows; in the second form TEST is show in the top left corner of the screen.

Bob

Hi Bob,

After finding the typo you mention there is also a small typo I think with display block script.
I see before the word display a ' but before the comma I don't see a closing '
But even when I put a ending ' so that it becomes

$('groupfields').set('display', 'block');

I see the following with firebug:

<div id="personfields" display="block">

But with this:

$('personfields').style.display="block";

the html looks like this:

<div id="personfields" style="display: block;">

And this does work.

Feel free to explain the difference. I'm always eager to learn.

Also I had to change

$('radio0').addEvent('change', function() {

To:

$$('input[name=radio0]').addEvent('change', function() {

This I found through searching on the forum. I don't even know why there are two dollar-signs 😶 but it works.


Here is the complete code in case it can help anyone else.
I want to give credit to Bob for helping get to this:

window.addEvent('domready', function() {
  $('groupfields').style.display="none";
  $('personfields').style.display="block";
  $('radio01').checked = true;

  $$('input[name=radio0]').addEvent('change', function() {
    
    if ( $('radio01').checked ) {
      $('groupfields').style.display="none";
      $('personfields').style.display="block";
    } else if ( $('radio02').checked ) {
      $('groupfields').style.display= "block";
      $('personfields').style.display= "none";
    } else {
      alert("change else");
      $('personfields').style.display= "none";
      $('groupfields').style.display= "none";
    }
  });
  });

I bought the "ChronoForms creating hideable inputs" so I can add it with Chronoforms book collection. :-)

Hi SAGO,

Sorry about the typos and the code error - my memory is no longer perfect :-(

.setStyle('display', 'none'); would work I think.

Bob

Hi Bob,

No worries and understandable after 23650 posts 😲
I will try .setStyle that way I know I have two ways of doing it.

Thanks again for your help.

Thanks Sago for sharing. It helps a lot. Thanks Bob for your help as well. Kudos to both of you.

Hi,

I just want to let everyone now that it's better to use CLICK instead of CHANGE cause IE is acting strangly and doesn't always do what it's supposed to do.

So just use this:

$$('input[name=radio0]').addEvent('click', function() {

Good luck.

Cheers