Question

我在AJAX中有一个表单，但是当我在同一页面上有多个表单时出现错误。

    <script>
  var fmx = jQuery.noConflict();
    fmx(document).ready(function(){
    fmx('form').on('submit', function (e) {
      e.preventDefault();
      fmx.ajax({
        type: 'post',
        url: 'https://www.webshop.com/post.php',
        data: fmx('form').serialize(),
        success: function () {
           document.getElementById('#form_post').style.display = 'none';
           document.getElementById('#form_result').style.display = '';
        }
      });
    });
  });
</script>
<div id="#form_post" style="display:inherit">
<form class="form_post">
    <label for="post_email">FORM</label>
    <input id="post_email" class="post_email" type="email" name="post_email" placeholder="your@email.com" required>
    <input id="post_data" class="post_data" type="text" name="post_data" placeholder="MSG" required>
    <input name="submit" type="submit" value="POST" >
</form>
</div>
<div id="#form_result" style="display:none"><br>Success.</div>

我尝试切换到#id但它停止了工作。

    <script>
  var fmx = jQuery.noConflict();
    fmx(document).ready(function(){
    fmx('#form').on('submit', function (e) {
      e.preventDefault();
      fmx.ajax({
        type: 'post',
        url: 'https://www.webshop.com/post.php',
        data: fmx('#form').serialize(),
        success: function () {
           document.getElementById('#form_post').style.display = 'none';
           document.getElementById('#form_result').style.display = '';
        }
      });
    });
  });
</script>
<form class="form_post" id="form">

如何在此表单上放置ID？

Answer 1

第一种方法将在页面上找到的所有表单上实现监听器。

$('form').on('submit',function(){

    // All forms targeted

})

第二种方法可能无效，因为页面上存在ID冲突。

ID是唯一的，只能在HTML中使用一次。第二个代码块正确定位了您想要的html，代码正在寻找ID为“#form”的表单。

这个表格确实存在，而且ID确实是#form所以说明必须存在冲突。

Answer 2

var fmx = jQuery.noConflict();
fmx(document).ready(function() {
  fmx('form').on('submit', function(e) {
    e.preventDefault();
    var form = this;
    fmx.ajax({
      type: 'post',
      url: 'https://www.webshop.com/post.php',
      data: fmx(form).serialize(),
      success: function() {
        form.style.display = 'none';
        form.style.display = '';
      }
    });
  });
});

这可以通过操纵使用我们设置为this的{{1}}提交的表单，在页面上使用多个表单。

正如大家所说，你不能在HTML中多次使用ID，否则它不能唯一地识别它标记的元素。因此，如果您想要定位两个或更多事件，则需要使用类。

如果您能够了解可以访问触发事件的DOM对象（通过form）这一事实（在这种情况下，您提交的某个表单），您可以使用在剧本中。

请记住，在更改范围时，（如this回调函数中）success将成为对其他内容的引用。因此，您需要像提交表单时的this一样分配它。

ajax表单提交没有刷新错误

2 个答案: