在 Ajax 中动态定位具有唯一 ID 的特定 DIV。

Question

假设我在一个页面上有100多个表单(我知道它很多，但在这件事上是必要的)，并且我有一个Ajax，提交每个表单而无需重新加载它所在的页面，并在成功和错误时显示/隐藏来自jQuery的回调div，我如何:

1:针对jQuery中的特定DIV ID2:确保它提交特定的表单，并且只提交这个表单(不验证其他表单的必填字段)

JS代码:

<script>
$("form").on("submit", function(e) {
var dataString = $(this).serialize();
let response_div = $("[id^='response_div_']")
$.ajax({
type: "POST",
url: "update_userdata.asp",
data: dataString,
success: function() {
response_div.html("<div id='message' style='background-color: #28a745;'></div>");
$("#message")
.html("<font style='color: white;'>Løn Information er nu opdateret <i class='fas fa-check-circle'></i></font>")
.hide()
.fadeIn(1500, function() {
$("#message").append(
""
);
});
}
});
e.preventDefault();
});
</script>

HTML:

<div id="response_div_initials_1">
</div>
<form name="Initials2"  id="Initials2" action="">
<input type="hidden" name="UserID" id="UserID" value="1">
<input type="hidden" name="ColumnToUpdate" id="ColumnToUpdate" value="InitialsColumn">
<fieldset>
<div class="input-box">
<label for="Initials" id="Initials">Initials</label>
<input type="text" name="Initials" id="Initials" minlength="3" maxlength="3" class="text-input" required/>
</div>
<button type="submit" form="Initials2" value="Submit">Send</button>
</fieldset>
</form>

<div id="response_div_EconomyColumns_1">
</div>
<form name="EconomyColumns1" id="EconomyColumns1" action="">
<input type="hidden" name="UserID" id="UserID" value="1">
<input type="hidden" name="ColumnToUpdate" id="ColumnToUpdate" value="EconomyColumns">
<fieldset>
<div class="input-box">
<label for="lonnr" id="lonnr_label">lonnr</label>
<input type="text" name="lonnr" id="lonnr" minlength="3" class="text-input" required/>
</div>
<div class="input-box">
<label for="debnr" id="debnr_label">debnr</label>
<input type="text" name="debnr" id="debnr" class="text-input"/>
</div>
<div class="input-box">
<label for="orgnr" id="orgnr_label">orgnr</label>
<input type="text" name="orgnr" id="orgnr" class="text-input"/>
</div>
<button type="submit" form="EconomyColumns1" value="Submit">Send</button>
</fieldset>
</form>
<div id="response_div_initials_2">
</div>
<form name="Initials2"  id="Initials2" action="">
<input type="hidden" name="UserID" id="UserID" value="1">
<input type="hidden" name="ColumnToUpdate" id="ColumnToUpdate" value="InitialsColumn">
<fieldset>
<div class="input-box">
<label for="Initials" id="Initials">Initials</label>
<input type="text" name="Initials" id="Initials" minlength="3" maxlength="3" class="text-input" required/>
</div>
<button type="submit" form="Initials2" value="Submit">Send</button>
</fieldset>
</form>
<div id="response_div_EconomyColumns_2">
</div>
<form name="EconomyColumns1" id="EconomyColumns1" action="">
<input type="hidden" name="UserID" id="UserID" value="1">
<input type="hidden" name="ColumnToUpdate" id="ColumnToUpdate" value="EconomyColumns">
<fieldset>
<div class="input-box">
<label for="lonnr" id="lonnr_label">lonnr</label>
<input type="text" name="lonnr" id="lonnr" minlength="3" class="text-input" required/>
</div>
<div class="input-box">
<label for="debnr" id="debnr_label">debnr</label>
<input type="text" name="debnr" id="debnr" class="text-input"/>
</div>
<div class="input-box">
<label for="orgnr" id="orgnr_label">orgnr</label>
<input type="text" name="orgnr" id="orgnr" class="text-input"/>
</div>
<button type="submit" form="EconomyColumns1" value="Submit">Send</button>
</fieldset>
</form>

我尝试了不同的$("[id^='response_div_']")，但没有任何成功的尝试。

Answer 1

如果您有100多个表单，我建议一个事件侦听器可以监听多个表单。

如果这些response_div_只是用于向特定表单显示消息，而不是用于存储数据，我建议您不要为它们设置唯一的id。相反，我将响应div移动到表单下，并使用form_response类设置它，以便您知道要更新哪个div。

我也把样式放入<style>，所以你不需要在脚本中处理css。

我通常不在字符串文字中写html。为了在响应消息之后有一个图标，你可以将它卸载到CSS中，这使你的脚本更整洁。检查form_response::after的样式。Font awesome有一篇关于这个的文章

注。您需要修复提交按钮和表单名称。有2种EconomyColumns1和Initials2形式。

$('html').on('submit', 'form', function(e) {
e.preventDefault();
var dataString = $(this).serialize();
// obtain the submitting form with e.currentTarget
// then search the tree down for div with class form_response
let responseDiv = $(e.currentTarget).children('div.form_response');
$.ajax({
type: "POST",
url: "https://6049aeb7fb5dcc001796a5ad.mockapi.io/foobar", // mock api for testing
data: dataString,
success: function() {
$(responseDiv)
.html("Løn Information er nu opdateret")
.hide()
.fadeIn(1500, function() {
// what is this line for?
$("#message").append("");
})
// wait 5 second
.delay(5000)
// fade out
.fadeOut(1500);
}
});
});

.form_response {
display: none;
background-color: #28a745;
color: white;
}
.form_response::after {
font-family: "Font Awesome 5 Free";
content: "f058";
font-weight: 900;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form name="Initials2" id="Initials2" action="">
<div class="form_response"></div>
<input type="hidden" name="UserID" id="UserID" value="1"> <input type="hidden" name="ColumnToUpdate" id="ColumnToUpdate" value="InitialsColumn">
<fieldset>
<div class="input-box">
<label for="Initials" id="Initials">Initials</label> <input type="text" name="Initials" id="Initials" minlength="3" maxlength="3" class="text-input" required />
</div>
<button type="submit" form="Initials2" value="Submit">Send</button>
</fieldset>
</form>

<form name="EconomyColumns1" id="EconomyColumns1" action="">
<div class="form_response"></div>
<input type="hidden" name="UserID" id="UserID" value="1"> <input type="hidden" name="ColumnToUpdate" id="ColumnToUpdate" value="EconomyColumns">
<fieldset>
<div class="input-box">
<label for="lonnr" id="lonnr_label">lonnr</label> <input type="text" name="lonnr" id="lonnr" minlength="3" class="text-input" required />
</div>
<div class="input-box">
<label for="debnr" id="debnr_label">debnr</label> <input type="text" name="debnr" id="debnr" class="text-input" />
</div>
<div class="input-box">
<label for="orgnr" id="orgnr_label">orgnr</label> <input type="text" name="orgnr" id="orgnr" class="text-input" />
</div>
<button type="submit" form="EconomyColumns1" value="Submit">Send</button>
</fieldset>
</form>

<form name="Initials2" id="Initials2" action="">
<div class="form_response"></div>
<input type="hidden" name="UserID" id="UserID" value="1"> <input type="hidden" name="ColumnToUpdate" id="ColumnToUpdate" value="InitialsColumn">
<fieldset>
<div class="input-box">
<label for="Initials" id="Initials">Initials</label> <input type="text" name="Initials" id="Initials" minlength="3" maxlength="3" class="text-input" required />
</div>
<button type="submit" form="Initials2" value="Submit">Send</button>
</fieldset>
</form>

<form name="EconomyColumns1" id="EconomyColumns1" action="">
<div class="form_response"></div>
<input type="hidden" name="UserID" id="UserID" value="1"> <input type="hidden" name="ColumnToUpdate" id="ColumnToUpdate" value="EconomyColumns">
<fieldset>
<div class="input-box">
<label for="lonnr" id="lonnr_label">lonnr</label> <input type="text" name="lonnr" id="lonnr" minlength="3" class="text-input" required />
</div>
<div class="input-box">
<label for="debnr" id="debnr_label">debnr</label> <input type="text" name="debnr" id="debnr" class="text-input" />
</div>
<div class="input-box">
<label for="orgnr" id="orgnr_label">orgnr</label> <input type="text" name="orgnr" id="orgnr" class="text-input" />
</div>
<button type="submit" form="EconomyColumns1" value="Submit">Send</button>
</fieldset>
</form>

Answer 2

这就是你想要的…?

HTML

<h2>Form 1</h2>
<form>
<div class="message"></div>
<input type="text" name="name-a">
<button type="submit">Submit</button>
</form>
<h2>Form 2</h2>
<form>
<div class="message"></div>
<input type="text" name="name-b">
<button type="submit">Submit</button>
</form>

然后jQuery

$('form').submit(function(e){

e.preventDefault();

let data = $(this).serialize();
let msgBox = $(this).find('.message');

$.ajax({
type: 'POST',
url: 'update_userdata.asp',
data: dataString,
success: function(){
msgBox.html("Put your html message here that will display according to the submited form");
// Once we have the message we show the message box
msgBox.css('display', 'block');
}
});

});

和一些CSS

.message {
border: 1px solid red;
padding: 4px;
text-align: center;
width: 100px;
margin: 4px;
display: none;
}

工作演示https://jsfiddle.net/jozsefk/1yw7c9x3/请注意，这只是一个示例，向您展示如何做到这一点，您必须使其适应您的代码。此外，如果根据提交的表单存在，这将显示您的输入名称和值。

Answer 3

这是我最后一次尝试的代码:

<div class="message" style="background-color: #28a745;"></div>
</div>
<form name="Initials1"  id="Initials1" action="">
<input type="hidden" name="UserID" id="UserID" value="1">
<input type="hidden" name="ColumnToUpdate" id="ColumnToUpdate" value="InitialsColumn">
<fieldset>
<div class="input-box">
<label for="Initials" id="Initials">Initials</label>
<input type="text" name="Initials" id="Initials" minlength="3" maxlength="3" class="text-input" required/>
</div>
<button type="submit" form="Initials1" value="Submit">Send</button>
</fieldset>
</form>

<script>
$('form').submit(function(e){

e.preventDefault();

let data = $(this).serialize();
let msgBox = $(this).find('.message');

$.ajax({
type: 'POST',
url: 'update_userdata.asp',
data: dataString,
success: function(){
msgBox.html("<p>Hello World!</p>");
// Once we have the message we show the message box
msgBox.css('display', 'block');
}
});
});
</script>

来自你的消息CSS也仍然在文档中