Javascript Jquery serialize（）无法在一个表单中使用两个div

我想使用单个表单将用户信息分为两部分，然后序列化这些值。下面是我在代码中的实现方式-

 <form action="">
<div id="11">
First name: <input type="text" name="FirstName" value="" /><br>
Last name: <input type="text" name="LastName" value="" /><br>
</div>

<button id="b1" >Proceed to get next two values</button>

<div id="22" style="display:none">
First name2: <input type="text" name="FirstName2" value="" /><br>
Last name2: <input type="text" name="LastName2" value="" /><br>
</div>

</form>

<button id="b2"  style="display:none">Serialize all form values</button>
<div></div>

名字：

姓氏：

继续获取下两个值
名字2:

姓氏2:

序列化所有表单值

因此，在上面的代码中，我希望一次显示两个字段，同时隐藏另外两个字段。然后使用jquery serialize（）序列化所有四个值。 下面是我在Jquery中如何处理这个问题的：

<script>
$(document).ready(function(){
  $("#b1").click(function(){
  $("#11").hide();
  $("#b1").hide();
  $("#22").show();
  $("#b2").show();
});
  $("#b2").click(function(){
    y = $("div").text($("form").serialize());
   alert("output" + y);
   });
});
</script>

$（文档）.ready（函数（）{
$（“#b1”）。单击（函数（）{
$（“#11”）.hide（）；
$（“#b1”）.hide（）；
$（“#22”）.show（）；
$（“#b2”）.show（）；
});
$（“#b2”）。单击（函数（）{
y=$（“div”）.text（$（“form”）.serialize（））；
警报（“输出”+y）；
});
});

---

当我点击按钮（id为11）时，div2会显示出来，然后它会自动消失。不知道我犯了什么错误。请帮助。

问题与

序列化无关

此代码：

$("div").text($("form").serialize());

将替换页面中每个
DIV
的内容。要针对特定的
DIV
给它一个ID。您还需要防止Buttons在单击时触发浏览器提交表单。这可以通过将
类型
设置为
按钮
或使用脚本防止默认设置来实现

演示：

如果将按钮放置在正确的表单
DIV
中，则可以保存隐藏/显示按钮所需的代码。我明白了…实际上问题是“按钮”类型。现在它工作得很好。谢谢。