Javascript 动态地针对特定的DIV´；Ajax中具有唯一ID的

假设我在一个页面上有100多个表单（我知道这是很多，但在这件事上是必要的），我有一个Ajax，可以提交每个表单而不重新加载它所在的页面，并在成功和错误时从jQuery回调时显示/隐藏一个DIV，我如何：

1：以jQuery中的特定DIV ID为目标 2：确保提交的是特定表单，并且仅提交此表单（不验证其他表单的必填字段）

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>

$（“表格”）。关于（“提交”，职能部门（e）{
var dataString=$（this.serialize（）；
让response\u div=$（“[id^='response\u div\u']”）
$.ajax({
类型：“POST”，
url:“update_userdata.asp”，
数据：dataString，
成功：函数（）{
答复_div.html（“”）；
$（“消息”）
.html（“Løn Information er nu opdateret”）
.hide（）
.fadeIn（1500，函数（）{
$（“#消息”）。追加(
""
);
});
}
});
e、 预防默认值（）；
});

HTML:

首字母
发送
隆纳
去核
原
发送
首字母
发送
隆纳
去核
原
发送

---

我尝试了不同版本的$（“[id^='response\u div\u']”），但我尝试过的任何尝试都没有成功。

这就是您想要的

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>

还有一些CSS

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

工作演示请注意，这只是一个示例，向您展示了如何实现它，您必须根据自己的代码进行调整。

---

此外，如果根据提交的表单存在输入名称和值，这将显示您的输入名称和值。

以下是我上次尝试的代码：

<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>

首字母
发送
$（'form'）。提交（函数（e）{
e、 预防默认值（）；
让数据=$（this.serialize（）；
让msgBox=$（this.find（'.message'）；
$.ajax({
键入：“POST”，
url:'update_userdata.asp'，
数据：dataString，
成功：函数（）{
html（“你好，世界！
”；
//收到消息后，我们会显示消息框
css（'display'，'block'）；
}
});
});

---

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

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

如果这些

response\u div\u

只是用于显示特定表单的消息，而不是用于存储数据，我建议您不要为它们设置唯一的id。相反，我将response div移动到表单下，并将其设置为

form\u response

类，以便您知道要更新哪个div

我还将样式设置放入

中，这样就不需要在脚本中处理css

我通常不使用字符串文字编写html。要在响应消息后有一个图标，可以将其卸载到CSS中，这样可以使脚本更整洁。检查

form_response:：after

样式

p、 您需要修复提交按钮和表单名称。有两个

EconomyColumns1

和

Initials2

表单

$（'html'）。关于（'submit'，'form'，function（e）{
e、 预防默认值（）；
var dataString=$（this.serialize（）；
//使用e.currentTarget获取提交表单
//然后用类form_response向下搜索树中的div
让responseDiv=$（e.currentTarget）.children（'div.form_response'）；
$.ajax({
类型：“POST”，
url:“https://6049aeb7fb5dcc001796a5ad.mockapi.io/foobar“，//用于测试的模拟api
数据：dataString，
成功：函数（）{
$（响应DIV）
.html（“Løn Information er nu opdateret”）
.hide（）
.fadeIn（1500，函数（）{
//这条线是干什么的？
$（“#消息”）。附加（“”）；
})
//等5秒钟
.延迟（5000）
//淡出
.衰减（1500）；
}
});
});
.form\u响应{
显示：无；
背景色：#28a745；
颜色：白色；
}
.form_响应：：之后{
字体系列：“字体真棒5免费”；
内容：“\f058”；
字号：900；
}

首字母
发送
隆纳
去核
原
发送
首字母
发送
隆纳
去核
原
发送
回调函数（e）

中的

e

不应该引用该特定表单吗？哦，天哪，这是一个多么愚蠢的错误，谢谢布里可夫斯基先生，在我的示例中，两个首字母的表单名都有相同的id和名称，EconomyColumns也有相同的id和名称。。当我给他们唯一的名字和id时，表单target of fault的问题就消失了。。因此，似乎只剩下针对DIV发行的股票了。：-）想了解更多关于业务需求的信息。表单和响应div是一对一的映射，而不是共享给其他人？提交表单时，消息应该只显示在相关的响应div上？这几乎是肯定的，除了我需要能够向其抛出HTML，而不是输入中的数据，以及我需要从数据内容而不是名称中提供消息信息。。我只是玩了一会儿，将.text改为.html，但这并没有给我所需的结果。正如我在上面所写的例子，您的ajax请求结果将是一个html，然后您添加msgBox.html（“Hello World！

”） 你好，世界

是ajax的结果。根据您的示例，这是msgBox.html（）内容，您也可以在每页使用一个ID。请参阅我编辑了jQuery部分，以便更好地理解我的意思。抱歉，josefk，我无法让它正常工作。。在过去的3个小时里，我尝试了使用您的完整Ajax脚本和部分（msgBox的3行）并将其放入我的初始脚本中，尝试对消息使用class和ID，但是使用了很多组合，但无论我做什么，我都无法让它以任何方式显示DIV，当我使用完整的Ajax代码时，它不会提交给DB-last可能是我无法获得Aj的部分原因

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

<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>