[英]Dynamically target specific DIV´s with unique ID in Ajax
Say that I have more than 100 forms on one page (I know it is a lot, but neccesary in this matter) and I have a Ajax that submit each forms without reloading the page it is in, and Show/Hide a DIV on callback from jQuery on success and error, how do I:假设我在一页上有超过 100 个 forms(我知道它很多,但在这件事上是必要的),我有一个 Ajax 提交每个 forms/在回调上显示它,而无需重新加载页面从 jQuery 关于成功和错误,我该如何:
1: Target the specific DIV ID in the jQuery 2: Make sure that it submit the specific form and only this form (not validating on required fields from other forms) 1:针对 jQuery 中的特定 DIV ID 2:确保它提交特定表单并且仅提交此表单(不对其他表单的必填字段进行验证)
JS Code: 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: 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>
I tried different variations of $("[id^='response_div_']") but havent had success with any attempts I have tried.我尝试了 $("[id^='response_div_']") 的不同变体,但我尝试过的任何尝试都没有成功。
This is what you want...?这就是你想要的……?
the HTML 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>
then jQuery然后 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');
}
});
});
and some CSS和一些 CSS
.message {
border: 1px solid red;
padding: 4px;
text-align: center;
width: 100px;
margin: 4px;
display: none;
}
the working demo https://jsfiddle.net/jozsefk/1yw7c9x3/ Please note, that this is just an example to show you how to do it and you must adapt this to your code.工作演示https://jsfiddle.net/jozsefk/1yw7c9x3/请注意,这只是向您展示如何执行此操作的示例,您必须使其适应您的代码。 Also this will display your input name and value if exists based on a form submited.如果基于提交的表单存在,这还将显示您的输入名称和值。
Here is the code I have last tried:这是我上次尝试的代码:
<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>
The message CSS from you is still in the doc aswell来自您的消息 CSS 仍在文档中
If you have 100+ form, I would suggest event delegation for one event listener listens multiple forms.如果您有 100 多个表单,我建议一个事件侦听器的事件委托侦听多个 forms。
If those response_div_
are just for displaying message to a specific form, but not for storing data, I suggest you to not setting a unique id to them.如果这些response_div_
只是用于向特定表单显示消息,而不是用于存储数据,我建议您不要为它们设置唯一 id。 Instead, I move the response div under the form and set it with form_response
class so you know which div to update.相反,我将响应 div 移动到表单下,并使用form_response
class 设置它,以便您知道要更新哪个 div。
I also put the styling into <style>
so you don't need to handing css inside the script.我还将样式放入<style>
中,因此您无需在脚本中处理 css 。
I usually don't write html within string literal.我通常不在字符串文字中写 html 。 To have a icon after the response message, you can offload it to CSS which makes your script neater.要在响应消息后添加一个图标,您可以将其卸载到 CSS 以使您的脚本更整洁。 Check the form_response::after
style.检查form_response::after
样式。 Font awesome has an article on that. Font awesome 有一篇关于此的文章。
ps you need to fix the submit button and form name. ps您需要修复提交按钮和表单名称。 There are 2 EconomyColumns1
and Initials2
form.有 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.