javascript - 通过使用 ajax 更改 HTML 内容来制作多步表单无法正常工作

Question

我尝试通过更改 HTML 内容来实现多步骤表单...

当前的 HTML id 将替换为来自 Form2..etc 的类似内容

第一种形式:

<form  method="post" class="newsletter">
    <div id="current">
        <div class="fce-newsletter-form">
            <div class="row justify-content-center">
                <div class="col-md-7 text-center">
                    <h2 class="mb-half"><?php the_sub_field('newsletter_title')?></h2>
                    <p class="mb-2 lead">Mit unserem Newsletter erhalten Sie monatlich Informationen rund um das Urlaubsland Österreich und eine Auswahl exklusiver Angebote und Gutscheine!</p>
                </div>
            </div>

            <div class="row justify-content-center">
                <div class="col-md-6">

                        <div class="testFormChange">
                            <div class="form-row">
                                <div class="col-8">
                                    <input type="email" class="form-control" id="custom-input-newsletter" placeholder="Ihre E-Mail Adresse *" required="required">
                                </div>
                                <div class="col-4">
                                    <input type="" class="fce-newsletter-form-button btn btn-block btn-primary" id="customButton" value="Weiter">
                                    <input type="hidden" value="step1" name="step">
                                </div>
                            </div>
                        </div>

                    <p class="fce-newsletter-form-note">mit * gekennzeichnete Felder bitte ausfüllen.</p>
                    <p class="fce-newsletter-form-error-message"></p>
                </div>
            </div>
        </div>
    </div>
</form>

Javascript 函数:

$('#customButton').on('click', function (evt) {

        evt.preventDefault();


        $.ajax({
            url: ajaxurl,
            type: "POST",
            data: {"action": "testNewsletter"},
            dataType: "html",
            success:function(data) {

                $("#current").empty();
                $("#current").html(data);

            }
        });
    });

functions.php 中关于替换内容的自定义函数(例如从 form1 到 form2，从 form2 到 form3 等等):

function testNewsletter() {

    global $idForm;


    switch($idForm) {
        case 1 : echo include ('pages/forms/form-two.php'); $idForm+=1; break;
        case 2: echo include ('pages/forms/form-three.php'); $idForm+=1 ; break;
        default: break;
    }



   wp_die();
}


add_action('wp_ajax_testNewsletter', 'testNewsletter'); // add action for logged users
add_action( 'wp_ajax_nopriv_testNewsletter', 'testNewsletter' ); // add action for unlogged users

例如我要替换的内容 Form2:

<div class="fce-newsletter-form">
    <div class="row justify-content-center">
        <div class="col-md-7 text-center">
            <h2 class="mb-half"><?php the_sub_field('newsletter_title')?></h2>
            <p class="mb-3 lead">Bitte verraten Sie uns Ihren Namen.</p>
        </div>
    </div>
    <div class="row justify-content-center">
    <div class="col-md-8">
            <div class="form-row">
                        <div class="col-3">
                            <select id="gender" class="custom-select">
                                <option value="sf">Herr</option>
                                <option value="sf">Frau</option>
                            </select>
                        </div>
                <div class="col-3">
                    <input type="email" class="form-control" placeholder="Vorname" id="newsletterName" required="required">
                </div>
                <div class="col-3">
                    <input type="" class="form-control" placeholder="Nachname" id="newsletterSurname">
                </div>
                <div class="col-3">
                    <input type="submit" class="fce-newsletter-form-button btn btn-block btn-primary" id="customButton"  value="Weiter">
                </div>
            </div>
    </div>
</div>

    <div class="row d-flex justify-content-center">

        <div class="col-8">
            <div class="row d-flex justify-content-center">
                <div class="col-6">
                    <p class="fce-newsletter-form-note text-center">mit * gekennzeichnete Felder bitte ausfüllen</p>
                </div>
                <div class="col-6">
                    <div class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="customCheck_form_One">
                        <label class="custom-control-label" for="customCheck_form_One">Ja, ich akzeptiere die AGBs der Österreich Werbung *</label>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

可以从 Form1 切换到 Form2，但是当我想继续时，Form2 无法识别 Java Script(可能未初始化)。所有表单的按钮 ID 仍然相同。任何人都知道如何解决这个问题？其实我有好的提议吗？

谢谢指教

Answer 1

在第 2 步表单中更改输入类型提交到按钮并添加以下脚本。

<script>
    jQuery(document).on('click','#customButton', function (evt) {

        evt.preventDefault();

        jQuery.ajax({
            url: '<?php echo admin_url( 'admin-ajax.php' );?>',
            type: "POST",
            data: {"action": "testNewsletter"},
            dataType: "html",
            success:function(data) {

                jQuery("#current").empty();
                jQuery("#current").html(data);

            }
        });
    });
</script>