Создание многошаговой формы путем изменения содержимого HTML с помощью AJAX не работает правильно

Question

Я пытаюсь реализовать многошаговую форму с изменением содержимого HTML ...

Текущий идентификатор HTML будет заменен аналогичным содержимым из 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 работает, но когда я хочу продолжить, Java Script не распознается для Form2 (возможно, не инициализирован),Идентификатор кнопки остается одинаковым для всех форм.Кто-нибудь знает, как это решить?У меня есть хорошее предложение на самом деле?

Спасибо за совет

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>