Как сделать значение текстового поля пустым в зависимости от условия с помощью jQuery?

Я использую PHP, MySQL, Smarty и HTML для своего сайта. Теперь сценарий таков, что у меня есть группа из двух переключателей (а именно, «Да» и «Нет» - их значения). Я показываю и скрываю текстовые поля в зависимости от значения выбранного переключателя. Скрыть/показать работает отлично. Основная проблема заключается в том, что когда я отправляю форму с выбранным переключателем со значением «Нет», зависимые текстовые поля скрываются, но $_POST[] содержит значения текстового поля, присутствующие в них, если таковые имеются. Я хочу, чтобы значения этих текстовых полей были пустыми, поскольку пользователь выбирает переключатель со значением «Нет». Может ли кто-нибудь помочь мне в этом отношении? Заранее спасибо. Для справки я привожу здесь фрагмент кода из моего шаблона Smarty, а также код для функции Hide/Show.

Сначала код из шаблона 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 для выполнения функций Hide/Show выглядит следующим образом:

{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}

textfield php html jquery smarty
person PHPLover    schedule 28.07.2013    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Измените разметку, чтобы использовать классы, и удалите встроенный 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');
    });
});
person adeneo    schedule 28.07.2013
comment
Я просто хочу очистить содержимое текстовых полей при выборе переключателя со значением «Нет». Можете ли вы мне помочь в этом отношении? Если я использую код ypur, ничего не выполняется (например, Hide/Show), которое раньше работало гладко. Можете ли вы предоставить какой-либо другой способ, чтобы сделать его работоспособным? - person PHPLover; 28.07.2013

arrow_upward
0
arrow_downward

Как насчет изменения атрибута value на пустое, когда установлен определенный переключатель. Я предполагаю, что «newsletter_call_to_action_text» и «newsletter_call_to_action_link» — это идентификаторы полей ввода, которые вы хотите очистить, добавьте код ниже

$('#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>
person foecum    schedule 28.07.2013