[英]Checkbox to change value of a true vs false function
我目前有一个联系表,该表使用以下代码来确定是显示长格式还是短格式。
<?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中有一个简短的表格区域,另外还有一个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';
}
}
因此,首先要了解的是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 ...此代码未经过测试,只是为了证明这一想法。
我还发现了另一个可行的解决方案,尽管它的代码有点破损。
<?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();
});
});
即使它是要单击的文本链接而不是复选框,它仍然有效(我不确定如何转换)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.