Ajax不处理由Javascript生成的表单

Ajax does not process the form that was generated by Javascript

本文关键字：表单 Javascript 处理 理由 Ajax      更新时间：2023-09-26

我遇到了一个问题，当我用javascript创建HTML表单时，ajax根本不处理它，只会将我发送到空白动作PHP页面。这个页面是空白的，因为我添加了一个检查来查看表单字段是否为空。

用Javascript创建的表单: 

function createForm() {
    var f = document.createElement('form');
    f.setAttribute('method','post');
    f.setAttribute('action','action.php');
    f.setAttribute('class', 'ajax');
    f.innerHTML = '<span style="color: black; display: inline;">Name: <input class="popup-form-fields" id="inputName" onkeyup="validateName(); theCheck();" onkeydown="validateEmail(); theCheck();" onclick="validateName();" type="text" name="name" autocomplete="off"></span><label id="commentName" class="label1"></label>';
    f.innerHTML += '<div class="space"></div>';
    f.innerHTML += '<span style="color: black; display: inline;">Email address: <input class="popup-form-fields" id="inputEmail" onkeyup="validateEmail(); theCheck();" onkeydown="validateEmail(); theCheck();" onclick="validateEmail();" type="email" name="email" autocomplete="off"></span><label id="commentEmail" class="label1"></label>'
    f.innerHTML += '<div class="space"></div>';
    f.innerHTML += '<span style="color: black; display: inline;">Phone number: <input class="popup-form-fields" id="inputPhone" onkeyup="validatePhone(); theCheck();" onkeydown="validatePhone(); theCheck();" onclick="validatePhone();" type="tel" name="phone" autocomplete="off"></span><label id="commentPhone" class="label1"></label>';
    f.innerHTML += '<div class="space"></div>';
    f.innerHTML += '<span style="vertical-align: top; color: black; display: inline;">Details: <textarea class="popup-form-fields" id="inputDetail" onkeyup="validateDetail(); theCheck();" onkeydown="validateDetail(); theCheck();" onclick="validateDetail();" name="details" autocomplete="off"></textarea></span><label id="commentDetail" class="label1"></label>';
    f.innerHTML += '<div class="space"></div>';
    f.innerHTML += '<input id="sub" type="submit" value="Send">';
  }

不使用Javascript创建表单:

<form method="POST" action="book-priv-party-complete.php" class="ajax">
  <span style="color: black; display: inline;">Name: <input class="popup-form-fields" id="inputName" onkeyup="
validateName(); theCheck();" onkeydown="validateName(); theCheck();" onclick="validateName();" type="text" 
name="name" autocomplete="off"></span><label id="commentName" class="label1"></label>
  <div class="space"></div>
  <span style="color: black; display: inline;">Email address: <input class="popup-form-fields" id="inputEmail" 
onkeyup="validateEmail(); theCheck();" onkeydown="validateEmail(); theCheck();" onclick="validateEmail();" type=
"email" name="email" autocomplete="off"></span><label id="commentEmail" class="label1"></label>
  <div class="space"></div>
  <span style="color: black; display: inline;">Phone number: <input class="popup-form-fields" id="inputPhone" 
onkeyup="validatePhone(); theCheck();" onkeydown="validatePhone(); theCheck();" onclick="validatePhone();" type=
"tel" name="phone" autocomplete="off"></span><label id="commentPhone" class="label1"></label>
  <div class="space"></div>
  <span style="vertical-align: top; color: black; display: inline;">Details: <textarea class="popup-form-fields" 
id="inputDetail" onkeyup="validateDetail(); theCheck();" onkeydown="validateDetail(); theCheck();" onclick="
validateDetail();" name="details" autocomplete="off"></textarea></span><label id="commentDetail" class="label1
"></label>
  <div class="space"></div>
    <input id="sub" type="submit" value="Send">
</form>
ajax: 

  $('form.ajax').on('submit', function () {
    var that = $(this),
      url = 'action.php',
      type = 'post',
      data = {};
    that.find('[name]').each(function (index, value) {
      var that = $(this),
        name = that.attr('name'),
        value = that.val();
      data[name] = value;
    });
    $.ajax({
      url: url,
      type: type,
      data: data,
      success: function () {
        removeElement();
        document.getElementById('errorCode').innerHTML = "Your message was sent";
        document.getElementById('errorCode').style.color = "green";
        setTimeout(function () {document.getElementById('errorCode').style.display = "none";}, 2000);
        alert("It worked");
      },
      error: function () {
        removeElement();
        document.getElementById('errorCode').innerHTML = "Your message was not sent";
        document.getElementById('errorCode').style.color = "red";
        setTimeout(function () {document.getElementById('errorCode').style.display = "none";}, 2000);
      }
    });
    return false;
  });

是可能的，这个问题的原因是何时何地Javascript正在运行?

submit函数未在javascript函数中触发的可能原因是您动态地创建了此form元素。当我说动态时，我的意思是这个元素是在初始页面呈现完成后创建的。当浏览器最初呈现页面时，它会创建DOM树，解析javascript并绑定所有事件处理程序。

因此，$('form.ajax').on('submit',..查找form元素并在form元素可能未创建时将submit函数绑定到回调。这可能就是为什么你没有得到任何回应的原因。

我建议你阅读一下事件委托。

委派事件的优点是它们可以处理来自后代元素的事件，这些事件将在以后添加到文档中。通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委托事件来避免频繁地附加和删除事件处理程序。

因此，您基本上将侦听器绑定到保证在DOM中的父容器，然后只需找到该事件的target。

例如，假设我想要侦听id为foo的按钮的click事件，我在id为container的div中动态创建该按钮。我可以这样听点击声:

$( "div#container" ).on("click", function( event ) {
   console.log( "clicked: " + event.target.nodeName ); //Will output button when this element is clicked.
});

另一篇关于浏览器事件顺序的好文章在这里。

希望它能让你朝着正确的方向开始。

相关文章：