2016-06-03 3 views
2

То, что я пытаюсь сделать, это изменить значение внутри поля <input>. Идея заключается в том, что, когда клиент нажимает на одну из трех кнопок внутри формы, LIST_ID изменит перед отправкой на LIST_ID_1 или 2 или 3, что соответствует нажатой кнопке. В результате при отправке формы id будет изменен в зависимости от того, какая кнопка была нажата.OnClick перед отправкой. JQuery

<input type="hidden" name="g" id="hidden_field" value="LIST_ID"> 

Вот то, что я пробовал:

$('#subscription_form').submit(function() { 
    jQuery(':button').click(function() { 
     if (this.id == 'Button_1') { 
      /*Action;*/ 
      $("#hidden_field").val("LIST_ID_1");  
     } 
     else if (this.id == 'Button_2') { 
      /*Action;*/ 
      $("#hidden_field").val("LIST_ID_2"); 
     } 
     else if (this.id == 'Button_3') { 
      /*Action;*/ 
      $("#hidden_field").val("LIST_ID_3"); 
     } 
    }); 
}); 
<form action="//manage.kmail-lists.com/subscriptions/subscribe" method="POST" id="subscription_form" novalidate="novalidate" class="klaviyo_subscription_form"> 
    <input type="hidden" name="g" id="hidden_field" value="LIST_ID"> 
    <div class="klaviyo_fieldset"> 
     <div class="klaviyo_field_group"> 
      <label for="LIST_ID_$email">Email Address</label> 
      <input type="email" id="LIST_ID_$email" name="email"> 
     </div> 
    </div> 
    <div class="klaviyo_form_actions"> 
     <button type="submit" id="Button_1" class="klaviyo_submit_button"> 
      <span>Button_1</span> 
     </button> 
     <button type="submit" id="Button_1" class="klaviyo_submit_button"> 
      <span>Button_2</span> 
     </button> 
     <button type="submit" id="Button_3" class="klaviyo_submit_button"> 
      <span>Button_3</span> 
     </button> 
    </div> 
    <div class="klaviyo_below_submit"></div> 
</form> 
+0

как вы хотите OnClick, прежде чем отправить, если у вас есть '.click()' 'внутри. представить() '? – Grisza

ответ

1

Вопрос заключается в том, что вы только прикрепить событие щелчка после того как форма была отправлена. Если пользователь дважды не нажимает кнопку (один раз, чтобы отправить форму и прикрепить обработчик кликов, а в другое время - запустить обработчик кликов), это не сработает. Вы должны поместить click() обработчик вне submit(), как это:

$(':button').click(function() { 
    if (this.id == 'Button_1') { 
     $("#hidden_field").val("LIST_ID_1");  
    } 
    else if (this.id == 'Button_2') { 
     $("#hidden_field").val("LIST_ID_2"); 
    } 
    else if (this.id == 'Button_3') { 
     $("#hidden_field").val("LIST_ID_3"); 
    } 
}); 

Working example

Однако следует отметить, что это лучшая практика для подключения к submit() случае form. В этом случае, чтобы получить кнопку, которая была нажата вам нужно будет использовать document.activeElement как это представить:

$('form').submit(function() { 
    var $btn = $(document.activeElement); 
    if ($btn.prop('id') == 'Button_1') { 
     $("#hidden_field").val("LIST_ID_1");  
    } 
    else if ($btn.prop('id') == 'Button_2') { 
     $("#hidden_field").val("LIST_ID_2"); 
    } 
    else if ($btn.prop('id') == 'Button_3') { 
     $("#hidden_field").val("LIST_ID_3"); 
    } 
}); 

Working example

Наконец, вы должны смотреть на использование СУХИХ принципов, чтобы сделать код как короче и проще поддерживать. Для этого вы можете использовать атрибут data-* на кнопках себя, как это:

<button type="submit" id="Button_1" data-list="LIST_ID_1" class="klaviyo_submit_button"> 
    <span>Button_1</span> 
</button> 
<button type="submit" id="Button_2" data-list="LIST_ID_2" class="klaviyo_submit_button"> 
    <span>Button_2</span> 
</button> 
<button type="submit" id="Button_3" data-list="LIST_ID_3" class="klaviyo_submit_button"> 
    <span>Button_3</span> 
</button> 
$('form').submit(function() { 
    var listId = $(document.activeElement).data('list'); 
    $("#hidden_field").val(listId); 
}); 

Working example

+0

Просто интересно ... возможно ли, что форма будет отправлена ​​до того, как скрытое поле будет обновлено? Не было бы разумным сначала предотвратить подачу, затем сменить скрытое поле и сначала отправить его? – LinkinTED

+0

При использовании события 'click()' на кнопке, да, это так. Однако с чем-то таким же простым, как извлечение свойства из другого элемента, в этом случае должно быть хорошо. Я предоставил пару альтернатив для использования события 'submit' формы, что в любом случае является лучшей практикой. –

+0

@RoryMcCrossan очень ценю вашу помощь. Я не знаю, почему, но первый пример не работает ... Но последний делает greate. Спасибо! –

Смежные вопросы