0

我的网站使用 PHP、MySQL、Smarty 和 HTML。现在的情况是我有一组两个单选按钮（即是和否是它们的值）。我根据所选单选按钮的值显示和隐藏文本框。隐藏/显示工作完美。主要问题是当我提交表单时选择了值为“否”的单选按钮，相关文本字段被隐藏，但$_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>&nbsp; <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">&nbsp;</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>&nbsp;<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">&nbsp;</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>&nbsp;<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}
4

2 回答 2

0

当检查特定的广播按钮时，如何将值属性更改为空。我假设 'newsletter_call_to_action_text' 和 '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>
于 2013-07-28T15:32:43.380 回答
0

更改标记以使用类并删除内联 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');
    });
});
于 2013-07-28T14:55:16.467 回答