用于更改 true vs false 函数值的复选框答案

【问题标题】：Checkbox to change value of a true vs false function用于更改 true vs false 函数值的复选框
【发布时间】：2013-09-04 14:09:29
【问题描述】：

我目前有一个联系表单，它使用以下代码来确定是否显示长表单或短表单。

<?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;
  }
  ?>

我在 html 中有一个简短的表单区域，还有一个 else if 区域..

<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: ?>

$shortform 的值由 Joomla 中的菜单项的类设置。

我想在表单本身上添加一个复选框，允许查看者在表单的长版和短版之间切换。

我对此有些陌生，任何帮助将不胜感激！

基于响应编辑：所以这对我不起作用..我需要在 html 中放入一些 php 来识别什么是短格式，什么是长格式？

<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>

这里是 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';
}
}

【问题讨论】：

只是出于好奇，您使用的是什么版本的 Joomla？
我使用的是 Joomla 2.58

标签： php javascript forms joomla switch-statement

【解决方案1】：

所以首先要了解的是，php 是一种服务器端语言，而 javascript 是一种客户端语言....php 运行...然后 js 运行。因此，如果您想隐藏和显示内容，则需要将其加载到前端，然后构建您的 js 以隐藏/显示它。当然，您可以通过 ajax 动态拉入内容，但如果您对整个事情还很陌生，我建议您保持简单......

所以基本上通过 php 输出两个 div....一个包含短格式另一个长格式。隐藏（通过css）默认情况下您不想显示的那个。

然后在您的复选框上...添加一个 onchange='toggleText'

大概是这样的..

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

显然您需要交换您的 id...此代码未经测试只是为了演示这个想法。

【讨论】：

【解决方案2】：

我还发现了这个其他解决方案，尽管它的代码有些损坏......

<?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/////

这里是 js...

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

即使这是一个可供点击的文本链接而不是复选框（我不确定如何转换它），它仍然有效

【讨论】：