JavaScript表单序列化不起作用

Posted 2023-05-09

【中文标题】JavaScript表单序列化不起作用

【英文标题】：JavaScript form serialize not working

【发布时间】：2016-01-26 20:44:05

【问题描述】：

我正在使用完美运行的 onload 事件编辑 html 表单标签，

$(function ()
window.onload=function()
var x = document.getElementsByTagName("form");
for (i = 0; i < x.length; i++) 
  if(x[i].getAttribute("data-reactid") == ".0")
    x[i].id = "form1";
  


);

但是，当我尝试序列化表单 onbeforeunload 时，它为空，我做错了什么？我正在使用 chrome，我相信它不适用于其他浏览器。

 $(function ()
  window.onbeforeunload = function (e) 
    var $k = $('#form1').serialize();
    $.ajax(
      type: "POST",
      url: "MYURL",
      data:  t: Date.now(), u: document.URL, k: $k
    );
  ;
);

HTML

<form class role="form" data-reactid=".0">
<input type="text" placeholder="Name" data-reactid=".0.1.0.1">
<input type="text" placeholder="Last Name" data-reactid=".0.1.0.1">
<button type="submit" data-reactid=".0.3">Submit</button></form>

谢谢！ - 数字

【问题讨论】：

你能给我们一个关于jsfiddle的演示吗？

*** 拥有 perfectly good way to provide live demos in questions 已经一年多了。无需将它们托管在 JS Fiddle 等第三方网站上。

【参考方案1】：

第一个问题是$('#form1') 与表单不匹配，因为它没有 ID。 （可能通过在第一个代码块中为其分配 ID 的代码来缓解）。

第二个问题是，即使有，输入元素也没有名字，所以不能成为成功的控件（也不会包含在序列化数据中）。

第三个问题是离开页面的行为（触发onbeforeunload）会取消Ajax请求。

【讨论】：

第一个 js 代码为表单添加了一个 ID，即“form1”，它可以工作。那么表格确实有ID吗？对