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脚本（可能未初始化）。所有表单的按钮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>

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

1 个答案: