在页面上打印表单后，如何更改Ninja Forms生成的标记？

Posted 2021-05-05

这是我要处理的：

<nf-field>
    <div id="nf-field-2-container" class="nf-field-container lastname-container  label-above ">
        <div class="nf-before-field">
            <nf-section></nf-section>
        </div>
        <div class="nf-field">
            <div id="nf-field-2-wrap" class="field-wrap lastname-wrap nf-fail nf-error" data-field-id="2">
                <div class="nf-field-label">
                    <label for="nf-field-2" class="">Last Name <span class="ninja-forms-req-symbol">*</span> </label>
                </div>
                <div class="nf-field-element">
                    <input id="nf-field-2" name="nf-field-2" class="ninja-forms-field nf-element" type="text" value="">
                </div>
            </div>
        </div>
        <div class="nf-after-field">
            <nf-section>
                <div class="nf-input-limit"></div>
                <div class="nf-error-wrap nf-error">
                    <div class="nf-error-msg nf-error-required-error">This is a required field.</div>
                </div>
            </nf-section>
        </div>
    </div>
</nf-field>

请注意<nf-field>标签。它不是html，也没有任何东西可以用来设置它，关于它是什么类型的输入，即。文字，文本区等

我之前没有使用backbone.js的经验，Ninja Forms的所有javascript都被缩小了，所以我不知道从哪里开始。这就是我想到的：

(function ($) {
    $(window).load(function(){
        $('.nf-field-container').unwrap('nf-field');
    });
})(jQuery);

这个javascript被放置在页面的最底部，就在</body>之前。当我发现由于某种原因它只能用于硬重载时（至少当我在localhost上开发时），我的兴奋是短暂的。

答案

整个表单包含在具有类.nf-form-cont的div中（或者如果没有则创建它）。

你的JS应该是这样的：

(function ($) {
     $(window).load(function(){
       // Remove unnecessary NF mark ups
       $('.nf-form-cont').find("nf-field").contents().unwrap();
       $('.nf-form-cont').find("nf-fields-wrap").contents().unwrap();
       $('.nf-form-cont').find("nf-section").contents().unwrap();
       $('.nf-form-cont').find("nf-errors").contents().unwrap();
     });
})(jQuery);