JQuery: Измените значение скрытого ввода в форме

Question

Я был бы признателен, если бы вы могли помочь мне решить проблему, описанную ниже. Я не видел, и у меня была схожая проблема, но не нашли решения.

Вещь, которую я пытаюсь сделать, - это изменить value внутри скрытого поля <input>, прежде чем форма отправит данные на сервер, который назначит нового пользователя в определенный список. Идея состоит в том, что мы используем одну форму на разных страницах, которая на submit будет изменять value внутри поля <input>, соответствующего элементу с щелчком (классы элементов, запускающие всплывающие окна).

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

JS/JQ: Замена значение во входном

var currentClass = null;  

// Classes of elements that triggering popups 
$(".popup-pop, .link-product-tab, .popup-footer, .popup-adbf-page, .popup-aboutus-page, .popup-404, .popup-eco-page").delay(0).click(function() { 
    KlaviyoSubscribe.attachToModalForm('#subscription_form', { 
     ignore_cookie:true, 
     custom_success_message: true, 
    }); 
    var calledClass = this.className; // assign class that triggered the popup to "calledClass" variable 
    currentClass = calledClass; // assign "calledClass" value to global var "currentClass" 
}); 
// $('form').keyup(function(){ 
$('form').submit(function(){ 
    switch(currentClass) { // taking currentClass to find correct value for input field 
     case 'popup-pop': $("#hidden_field input").val("jeN5s3"); break; // changing value of hidden input field in correspondence to triggered popup 
     case 'link-product-tab': $("#hidden_field input").val("jeN5s3"); break; 
     case 'popup-footer': $("#hidden_field").val("v4pSbe"); break; 
     case 'popup-adbf-page': $("#hidden_field").val("DmCgw3"); break;  
     case 'popup-eco-page': $("#hidden_field").val("y2Z9Ly"); break;   
     case 'popup-aboutus-page': $("#hidden_field").val("t26heU"); break; 
     case 'popup-404': $("#hidden_field").val("jeN5s3"); break; 
    }  
}); 

$('form').submit(function(){ 
    $(".klaviyo_modal").fadeOut(); 
    window.open("https://example.com/thank-you"); 
}); 

HTML: Форма

<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="SOME_VALUE_HERE"> 
<div class="klaviyo_fieldset"> 
    <div class="klaviyo_field_group"> 
     <label for="klaviyo_form_first_name">First Name:</label> 
     <input id="klaviyo_form_first_name" class="upform" type="text" name="first_name" value="" required/> 
     <label for="subscription_form_$email">Email Address</label> 
     <input type="email" class="upform" id="subscription_form_$email" name="email" required> 
     </div> 
    </div> 
     <div class="klaviyo_fine_print"></div> 
    <div class="klaviyo_form_actions"> 
    <input type="submit" id="subscription_form" data-dismiss="modal" class="submit_button" onclick="closeWindow()" value="I'm in! >>"> 
    </div> 
</div> 
<div class="klaviyo_below_submit"></div> 

Answer 1

По-прежнему я не знаю, почему он не работал (сценарий был прав ...). Я переписать сценарий, изменив (') к ("):

Что этот скрипт для
Этот сценарий присваивает определенное всплывающее окно, который был вызван, нажав на текст/кнопки/IMG? с определенным классом (например, .popup-footer) до определенного списка в Klaviyo.
Назначение?
Отслеживать, с какой подписной формы (то есть всплывающее) клиент пришел, а отдельные списки помогут запустить специальные кампании.
есть вариант в klaviyo добавить пользовательские свойства, такие $ source_page, $ времени и т.д., но в нашем случае требуется другое решение - как мы это делали с помощью этого скрипта

$("form").submit(function(){ 
switch(currentClass){ 
case "popup-pop": $("input#klaviyo_input").val("jeN5s3");break; 
case "link-product-tab": $("input#klaviyo_input").val("jeN5s3");break; 
case "popup-footer": $("input#klaviyo_input").val("z62byt");break; 
case "popup-adbf-page": $("input#klaviyo_input").val("DmCgw3");break; 
case "popup-eco-page": $("input#klaviyo_input").val("y2Z9Ly");break; 
case "popup-aboutus-page": $("input#klaviyo_input").val("t26heU");break; 
case "popup-404": $("input#klaviyo_input").val("jeN5s3");break; 
    default: console.log("Unknown class " + currentClass); 
} 
$(".klaviyo_modal").fadeOut(); 
window.open("https://example.com/thank-you"); 
}); 

Answer 2

Это, кажется, не так:

$("#hidden_field input") 

Селектор выше означает «любой вход внутри элемента с идентификатором #hidden_field». Однако не похоже, что это то, что вы ищете из своего HTML-кода.

#hidden_field - это уже ваш вход. Изменение:

$("#hidden_field input") 

в:

$("#hidden_field") 

или:

$("input#hidden_field") 

Изменение каждого вхождения, и он должен работать.

Answer 3

Если какие-либо из класса/выберите элементы, которые присваивают currentClass имеют более чем один класс этого код

var calledClass = this.className; 

возвратит всех классов присвоен элемент, а не только тот, который вы заинтересованы в Добавьте в свой коммутатор случай по умолчанию, чтобы поймать эту потенциальную проблему.

$('form').submit(function(){ 
    switch(currentClass) { // taking currentClass to find correct value for input field 
     case 'popup-pop': $("#hidden_field input").val("jeN5s3"); break; // changing value of hidden input field in correspondence to triggered popup 
     case 'link-product-tab': $("#hidden_field input").val("jeN5s3"); break; 
     case 'popup-footer': $("#hidden_field").val("v4pSbe"); break; 
     case 'popup-adbf-page': $("#hidden_field").val("DmCgw3"); break;  
     case 'popup-eco-page': $("#hidden_field").val("y2Z9Ly"); break;   
     case 'popup-aboutus-page': $("#hidden_field").val("t26heU"); break; 
     case 'popup-404': $("#hidden_field").val("jeN5s3"); break; 
// handle the case where currentClass is not considered 
     default: console.log("Unknown class " + currentClass); 
    }  
});