如何使文本字段';s值为空,具体取决于使用jQuery的条件


How to make the text field's value blank depending on a condition using jQuery?

我的网站使用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>&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}

将标记更改为使用类并删除内联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>