主页 / 问题 / 564764
Accepted
Vyacheslav Potseluyko
Asked:2020-09-10 03:06:29 +0000 UTC2020-09-10 03:06:29 +0000 UTC

在提交事件上自动处理 ajax 表单

  • 772

主意：

window.onload = function() {
  var forms = document.getElementsByClassName('ajax_form');
  console.log(forms);
  var forms = Array.prototype.slice.call(forms, 0);
  forms.forEach(function(i, item, array) {
    item.onsubmit = function() {
      alert(i);
      // start ajax from here
      // by getting attributes from form.ajax_form
    }
  });
  
}
<form class='ajax_form' url='/ajax/somewhere/' method='post'>
  <input name='test' send='1'>
  <input type='submit' value='send'>
</form>
<form class='ajax_form' url='/ajax/somewhere/' method='post'>
  <input name='test' send='1'>
</form>

onsubmit 什么都不做。假设我已将 html 集合转换为数组。如果是这样，请展示如何正确（并且漂亮地）迭代集合。请仅使用纯 javascript回答

javascript

2 个回答

  1. Best Answer

    您混淆了处理程序中的参数顺序forEach：

    window.onload = function() {
  var forms = document.getElementsByClassName('ajax_form');
  console.log(forms);
  var forms = Array.prototype.slice.call(forms, 0);
  forms.forEach(function(item, i, array) {
    item.onsubmit = function() {
      alert(i);
      // start ajax from here
      // by getting attributes from form.ajax_form
    }
  });
  
}
    <form class='ajax_form' url='/ajax/somewhere/' method='post'>
  <input name='test' send='1'>
  <input type='submit' value='send'>
</form>
<form class='ajax_form' url='/ajax/somewhere/' method='post'>
  <input name='test' send='1'>
</form>

    • 1 

  2. window.onload = function() {
  var forms = document.getElementsByClassName('ajax_form');
  console.log(forms);
  for (i = 0; i < forms.length; i++) {
    forms[i].onsubmit = function() {
      alert(this.getAttribute('url'));
      // start ajax from here
      // by getting attributes from form.ajax_form
    }
  };

}
    <form class='ajax_form'  url='/ajax/somewhere/' method='post'>
  <input name='test' send='1'>
  <input type='submit' value='send'>
</form>
<form class='ajax_form' url='/ajax/som2ewhere/' method='post'>
  <input name='test' send='1'>
  
  <input type='submit' value='send2'>
</form>

    • 0

相关问题