javascript - 通过使用 ajax 更改 HTML 内容来制作多步表单无法正常工作
问题描述
我尝试通过更改 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 仍然相同。有谁知道如何解决这个问题?我真的有好的提议吗?
感谢您的建议
解决方案
将输入类型更改为第 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>
推荐阅读
- javascript - 用 highchart 绘制动态数组数据结构
- python - 用来自另一个不同形状的 DataFrame 的值填充 pandas DataFrame
- azure - 使用 ARM 模板创建用户管理的身份和服务器管理员
- excel - Excel Power Query 获取文件列表,包括空文件夹和子文件夹的名称
- python - 如何修复 VALUE / ASSERTION 错误?我正在尝试抓取一个有六列但合并了三列的表
- python - 大 S3 文件的 s3fs 超时
- api - 使用 REST API 的策略模式
- amazon-web-services - AWS cloudwatch schedule drop event,在 eventbridge 中调用第二个 lambda
- python - 将 tcpdump 保存为变量
- c++ - 在 CUDA 中转换“for循环”的问题