Checkbox to change value of a true vs false function

Question

I currently have a contact form that uses the following code to determine whether or not to display a long form or a short form.

<?php
  $itemid = JRequest::getVar('Itemid');
  $menu = &JSite::getMenu();
  $active = $menu->getItem($itemid);
  $params = $menu->getParams($active->id);
  $pageclass = $params->get('pageclass_sfx');
  if (strpos($pageclass, 'short') !== false) {
    $shortform = true;
  } else {
    $shortform = false;
  }
  ?>

I have a short form area in the html, and an else if area..

<div class="reqd">
    <div class="fields">
      <div class="column first">
        <label for="firstname">FIRST_NAME_LABEL<span> *</span></label>
        <input type="text" name="firstname" id="firstname" title="THIS_FIELD_IS_REQUIRED" />
      </div>
      <div class="column last">
        <label for="lastname">LAST_NAME_LABEL<span class="reqd"> *</span></label>
        <input type="text" name="lastname" id="lastname" title="THIS_FIELD_IS_REQUIRED" />
      </div>
    </div>
  </div>
  <div class="fields">
    <div class="<?php if (!$shortform) echo 'column first '; ?>reqd">
      <label for="company">COMPANY_LABEL<span> *</span></label>
      <input type="text" name="company" id="company" title="THIS_FIELD_IS_REQUIRED" />
    </div>
<?php if ($shortform): ?>
  </div>
<?php else: ?>

The value of $shortform is set by the class of the menu item in Joomla.

I'd like to add a checkbox on the form itself that will allow the viewer to switch between the longform and the shortform versions of the form.

I am somewhat new to this and any help would be much appreciated!

EDIT based on Response: So this is not working for me.. do I need to put some php in the html to id what is short form and what is long?

<input type="checkbox" name ="more" id="more" onClick="toggleText();" />

<div class="shortform">

      <div id="fistname">
        <label for="firstname">FIRST_NAME_LABEL</label>
        <input type="text" name="firstname" id="firstname"/>
      </div>

      <div id="lastname">
        <label for="lastname">LAST_NAME_LABEL </label>
        <input type="text" name="lastname" id="lastname"/>
      </div>
</div>


<div class="longform">

      <div id="company">
        <label for="company">COMPANY_LABEL</label>
        <input type="text" name="company" id="company"/>
      </div>

      <div id="email">
        <label for="email">EMAIL_LABEL</label>
        <input type="text" name="email" id="email"/>
      </div>

</div>

And here is the js.

function toggleText()
{
if (document.getElementById('more').checked == true){
   document.getElementById('longform').style.display = 'none';
   document.getElementById('longform').style.display = 'block';
} else {
    document.getElementById('longform').style.display = 'block';
    document.getElementById('longform').style.display = 'none';
}
}

Answer 1

So the first thing to understand is that php is a server side language and javascript is a client side language....php runs...then js runs. So if you want to hide and show content you need to load it to the front end then build your js to hide/show it. Of course you can dynamically pull in content via ajax but if you are pretty new to the whole thing I would recommend just keeping it simple....

So basically output two divs via php....one contains short form the other long form. Hide (via css) the one that you don't want to be displayed by default.

Then on your checkbox...add an onchange='toggleText'

which would be something like..

function toggleText()
{
if (document.getElementById('checkboxID').checked == true){
   document.getElementById('longFormID').style.display = 'none';
   document.getElementById('longFormID').style.display = 'block';
} else {
    document.getElementById('longFormID').style.display = 'block';
    document.getElementById('longFormID').style.display = 'none';
}
} 

Obviously you need to swap in your ids...this code is not tested its just to demonstrate the idea.

Answer 2

I also found this other solution which works despite the fact that it is somewhat broken code...

<?php
 $document = JFactory::getDocument();
 $document->addScript('/templates/suntech_main/js/form.js');
?>

     /// Begin Form//// 
  yadda yadda yadda.. divs for the shortform ... 

<div id="requestmore" style="display:none;">
        <div id="upbutton"><a onclick=close()></a></div>

    yadda yadda yadda.. divs for the longform ...

</div>


<label for="opener">Would you also like Pricing Information?</label>
<div id="opener">
    <a href="#1" name="1" onclick=show()><input type="checkbox"></a> 
    </div>

    yadda yadda .. Captcha and Submit functions ... 

///// End Form///// 

And here is the js...

jQuery(function($)
{
    // this is the show and hide function, all in 1!
    $('a[name=1]').click(function()
    { 
        $('#requestmore').toggle();
    });
});

It works even though this is intended to be a text link to click rather than a checkbox (I'm not sure how to convert it)