Question

如果您能帮我解决下面描述的问题，我将不胜感激。我没见过，我遇到过类似的问题，但是没有找到任何解决方案。

我尝试做的是在表单将数据发送到服务器之前更改隐藏value字段内的<input>，该服务器会将新用户分配到某个列表。我们的想法是，我们在不同的页面上使用一个表单，提交时将更改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

这似乎是错误的：

$("#hidden_field input")

上面的选择器表示＆＃34; ID为#hidden_field＆＃34;的元素内的任何输入。但是，从您的HTML代码中查找的内容并非如此。

#hidden_field已经是您的输入。变化：

$("#hidden_field input")

成：

$("#hidden_field")

或：

$("input#hidden_field")

改变每一次出现，它应该有效。

Answer 2

如果分配 currentClass 的任何class / click元素有多个类此代码

 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);
    }    
});

Answer 3

我仍然不知道它不工作的原因（脚本是正确的......）。我通过将（'）更改为（“）来重写脚本：

这个脚本是什么？
此脚本通过单击某个类（例如.popup-footer）的文本/按钮/ img到Klaviyo中的某个列表来指定某个弹出窗口。目的是什么？
跟踪客户来自哪个订阅表单（即弹出窗口）;单独的列表将有助于开展特殊活动 klaviyo中有一个选项可以添加自定义属性，例如$ source_page，$ time等，但在我们的情况下需要另一个解决方案 - 正如我们使用此脚本

$("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");
});

JQuery：更改表单中隐藏输入的值

3 个答案: