我的网站使用PHP、MySQL、Smarty和HTML。现在的场景是,我有一组两个单选按钮(即Yes和No是它们的值)。我根据所选单选按钮的值显示和隐藏文本框。Hide/Show运行得很好。主要问题是,当我提交选中单选按钮且值为"否"的表单时,相关文本字段会被隐藏,但$_POST[]
包含其中存在的文本字段值(如果有的话)。当用户选择值为"否"的单选按钮时,我想使这些文本字段的值为空。有人能在这方面帮我吗?提前谢谢。为了供您参考,我将Smarty模板中的代码片段以及隐藏/显示功能的代码放在这里。
首先,来自Smarty模板的代码如下:
<table>
<tr height="30">
<td align="right" width="300"><label><b>{'Do you want to use call to
action
?'|signal_on_error:$error_msg:'newsletter_call_to_action_status'}</b>
<strong style="color: red">*</strong></label></td>
<td> <input type="radio"
name="newsletter_call_to_action_status"
id="newsletter_call_to_action_status" value="1"
onclick="select_option(this.value);"
{if $data.newsletter_call_to_action_status=='1' } checked {/if}> Yes
<input type="radio" name="newsletter_call_to_action_status"
id="newsletter_call_to_action_status" value="0"
onclick="select_option(this.value);"
{if $data.newsletter_call_to_action_status=='0' } checked {/if}> No
</td>
</tr>
<tr id="action_link_no" {if $data.newsletter_call_to_action_status==
'1' }style="display:;" {else}style="display:none;"{/if}>
<td colspan="2"> </td>
</tr>
<tr class="action_link_yes" height="30"
{if $data.newsletter_call_to_action_status== '1' }style="display:;"
{else}style="display:none;"{/if}>
<td align="right" width="300"><label><b>{'Enter call to action
text'|signal_on_error:$error_msg:'newsletter_call_to_action_text'}</b>
<strong style="color: red">*</strong></label></td>
<td> <input type="text" name="newsletter_call_to_action_text"
id="newsletter_call_to_action_text"
value="{if $data.newsletter_call_to_action_status == '0'}{else}{$data.newsletter_call_to_action_text}{/if}"
maxlength="50" class="inputfield">
</td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr class="action_link_yes" height="30"
{if $data.newsletter_call_to_action_status== '1' }style="display:;"
{else}style="display:none;"{/if}>
<td align="right" width="300"><label><b>{'Enter call to action
link'|signal_on_error:$error_msg:'newsletter_call_to_action_link'}</b>
<strong style="color: red">*</strong></label></td>
<td> <input type="text" name="newsletter_call_to_action_link"
id="newsletter_call_to_action_link"
value="{if $data.newsletter_call_to_action_status == '0'}{else}{$data.newsletter_call_to_action_link}{/if}"
class="inputfield">
</td>
</tr>
</table>
现在执行隐藏/显示功能的jQuery代码如下:
{literal}
<script language="javascript" type="text/javascript">
function select_option(plan){
if(plan == '0'){
$('#action_link_no').fadeOut('fast');
$('.action_link_yes').fadeOut('fast');
}else{
$('#action_link_no').fadeIn('fast');
$('.action_link_yes').fadeIn('fast');
}
}
</script>
{/literal}
将标记更改为使用类并删除内联JS:
<input type="radio" name="newsletter_call_to_action_status" class="newsletter_call_to_action_status" value="1" {if $data.newsletter_call_to_action_status=='1' } checked {/if}>Yes
<input type="radio" name="newsletter_call_to_action_status" class="newsletter_call_to_action_status" value="0" {if $data.newsletter_call_to_action_status=='0' } checked {/if}>No
然后这样做:
$(function() {
$('.newsletter_call_to_action_status').on('change', function() {
var state = $('.newsletter_call_to_action_status:checked').val() == '1';
$('#action_link_no, .action_link_yes')[state?'fadeIn':'fadeOut']('fast');
});
});
选中特定单选按钮时,将value属性更改为空如何。假设"newsletter_call_to_action_text"answers"newsletter _call_to_action_link"是要清空的输入字段的ID,请在下面添加代码
$('#newsletter_call_to_action_text, #newsletter_call_to_action_link').val('');
您的javascript代码现在应该是这样的。
<script language="javascript" type="text/javascript">
function select_option(plan){
if(plan == '0'){
$('#action_link_no').fadeOut('fast');
$('.action_link_yes').fadeOut('fast');
$('#newsletter_call_to_action_text, #newsletter_call_to_action_link').val('');
}else{
$('#action_link_no').fadeIn('fast');
$('.action_link_yes').fadeIn('fast');
}
}
</script>
或者你也可以使用这个
<script language="javascript" type="text/javascript">
function select_option(plan){
if(plan == '0'){
$('#action_link_no').fadeOut('fast');
$('.action_link_yes').fadeOut('fast');
$('#newsletter_call_to_action_text, #newsletter_call_to_action_link').attr('value', '');
}else{
$('#action_link_no').fadeIn('fast');
$('.action_link_yes').fadeIn('fast');
}
}
</script>