如何根據使用jQuery的條件使文本字段的值爲空？

Question

我爲我的網站使用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} 

Answer 1

更改標記使用類和刪除內聯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'); 
    }); 
}); 

Answer 2

如何檢查特定單選按鈕時將value屬性更改爲空。我假設「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>