时间戳

首页 > 解决方案 > 自定义jquery以表单序列的第二步为目标

jquery - 自定义jquery以表单序列的第二步为目标

问题描述

我有一个 jquery 脚本，目标是 2 部分连接表单的第二部分中的“提交”按钮。在同一表单步骤的独立版本（意味着它还不是连接的表单序列）上，该脚本用于禁用提交按钮，直到两组单选按钮中的一组为“是”。作为序列的一部分，我已经参与了“cf-connected”事件。console.log 消息会触发，但脚本的其余部分都不会触发。

我想要的功能是，两个收音机都可以是“是”，但只需要一个“是”来提交并从输入中删除“禁用”，并删除红色的 CSS 样式。当第一次呈现表单的第二部分时，我希望禁用提交按钮并激活红色 CSS 样式。除了底部的 console.log 之外，没有任何脚本运行。这是我在此页面上加载的代码：

jQuery( document ).on( 'cf.connected', function () {

// grab the two 'Yes' radio buttons
var yesOne = $("#fld_3055776_1_opt1287614");
var yesTwo = $("#fld_3324990_1_opt2062320");

// disable the submit button initially
var submitButton = $("input[value=submit]").prop("disabled", true);

// class allows the change of cursor:not-allowed
submitButton.addClass("disablePointer");

// give the ::after element "disabled" opacity
var divContainer = $(".caldera-grid .form-group.form-submit div").css("opacity", "0.45");

// grab div with red border
var redDiv = $(".submit-filter > div").addClass("red-border");

// add click listener to radio buttons
$("input[type=radio]").on("click", countUp);


function countUp() {
    console.log("countUp is firing");

    if (yesOne.prop("checked")) {
        submitButton.prop("disabled", false).removeClass("disablePointer");
        divContainer.css("opacity", "1");
        redDiv.removeClass("red-border");
    }
    else if (yesTwo.prop("checked")) {
        submitButton.prop("disabled", false).removeClass("disablePointer");
        divContainer.css("opacity", "1");
        redDiv.removeClass("red-border");
    }
    else if ( (yesOne.prop("checked")) && ( yesTwo.prop("checked")) ) {
        submitButton.prop("disabled", false).removeClass("disablePointer");
        divContainer.css("opacity", "1");
        redDiv.removeClass("red-border");
    }
    else {
        submitButton.prop("disabled", true).addClass("disablePointer");
        divContainer.css("opacity", "0.45");
        redDiv.addClass("red-border");
    }
}    


console.log("Form has moved to next part");

});

在呈现表单中第二步的 DOM 后，如何让该脚本正确执行？

这是包含 2 个部分的暂存表单的链接（请注意，表单每个部分顶部的“步骤”与相同的表单步骤 1 和步骤 2 不相关）。

标签： jqueryforms

解决方案

我能够修复它。我需要在滚动时向文档添加一个事件侦听器，然后运行上述所有代码。然后为了防止它在每次滚动时都运行，之后我放了 .off() 。现在正在做我需要的整个代码是：

$(document).on('cf.connected', function() { $(document).on('scroll', function() {

    // grab the two 'Yes' radio buttons
    var yesOne = $("#fld_3055776_1_opt1287614");
    var yesTwo = $("#fld_3324990_1_opt2062320");

    // disable the submit button initially
    var submitButton = $("input[value=Submit]").prop("disabled", true);

    // class allows the change of cursor:not-allowed
    submitButton.addClass("disablePointer");

    // give the ::after element "disabled" opacity
    var divContainer = $(".caldera-grid .form-group.form-submit div").css("opacity", "0.45");

    // grab div with red border
    var redDiv = $(".submit-filter > div").addClass("red-border");

    // add click listener to radio buttons
    $("input[type=radio]").on("click", countUp);


    function countUp() {
        if (yesOne.prop("checked")) {
            submitButton.prop("disabled", false).removeClass("disablePointer");
            divContainer.css("opacity", "1");
            redDiv.removeClass("red-border");
        }
        else if (yesTwo.prop("checked")) {
            submitButton.prop("disabled", false).removeClass("disablePointer");
            divContainer.css("opacity", "1");
            redDiv.removeClass("red-border");
        }
        else if ( (yesOne.prop("checked")) && ( yesTwo.prop("checked")) ) {
            submitButton.prop("disabled", false).removeClass("disablePointer");
            divContainer.css("opacity", "1");
            redDiv.removeClass("red-border");
        }
        else {
            submitButton.prop("disabled", true).addClass("disablePointer");
            divContainer.css("opacity", "0.45");
            redDiv.addClass("red-border");
        }
    }
    $(document).off('scroll');
});

});

推荐阅读