gpt4 book ai didi

javascript - 使用 ajax 处理多个表单 - 提交按钮 ID

转载 作者:行者123 更新时间:2023-12-03 00:33:42 26 4
gpt4 key购买 nike

我在一个页面中有两个表单,使用 AJAX 提交。所以我创建了一个函数(JAVASCRIPT/JQUERY)来处理这两种形式。但它不适用于第二种形式,仅适用于第一种形式。这是代码:

<div class="block-content" id="form-container">
<div class="alert alert-success d-none" role="alert">
SUCCESS
</div>
<div class="alert alert-danger d-none" role="alert">
ERROR
</div>
<form action="POST">
FORM1
<button type="button" class="btn btn-alt-success" id="submitForm">SUBMIT</button>
</form>
</div>

<div class="block-content" id="form-container">
<div class="alert alert-success d-none" role="alert">
SUCCESS
</div>
<div class="alert alert-danger d-none" role="alert">
ERROR
</div>
<form action="POST">
FORM2
<button type="button" class="btn btn-alt-success" id="submitForm">SUBMIT</button>
</form>
</div>

和 JavaScript:

<script type="text/javascript">
jQuery('#submitForm').click(function(e){
e.preventDefault();
var form = $(this).closest('form');
var successMessage = $(this).closest('#form-container').find('.alert-success');
var errorMessage = $(this).closest('#form-container').find('.alert-danger');
successMessage.removeClass('d-none');
.ajax({
/* HANDLE AJAX */
});
});
</script>

我在这里做错了什么?使用此代码本来应该在第二种形式中显示 SUCCESS 消息,但它没有显示。我认为问题出在closest()方法中,但我不太确定。

提前谢谢您。

最佳答案

在您的情况下,尝试将 click() 函数更改为 on() 并像这样检查文档点击;

jQuery(document).on("click", "#submitForm", function(e) {
e.preventDefault();
var form = $(this).closest('form');
var successMessage = $(this).closest('#form-container').find('.alert-success');
var errorMessage = $(this).closest('#form-container').find('.alert-danger');
successMessage.removeClass('d-none');

})
.d-none { 
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="block-content" id="form-container">
<div class="alert alert-success d-none" role="alert">
SUCCESS
</div>
<div class="alert alert-danger d-none" role="alert">
ERROR
</div>
<form action="POST">
FORM1
<button type="button" class="btn btn-alt-success" id="submitForm">SUBMIT</button>
</form>
</div>

<div class="block-content" id="form-container">
<div class="alert alert-success d-none" role="alert">
SUCCESS
</div>
<div class="alert alert-danger d-none" role="alert">
ERROR
</div>
<form action="POST">
FORM2
<button type="button" class="btn btn-alt-success" id="submitForm">SUBMIT</button>
</form>
</div>

这将使它适合你

关于javascript - 使用 ajax 处理多个表单 - 提交按钮 ID,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53746165/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com