Javascript 使用jQuery在提交时显示/隐藏表单

我想在提交第一个文本字段后立即显示第二个文本字段，包括“复制”按钮。如何隐藏第二个文本字段并在提交后显示

我尝试了以下方法：

HTML:

第一个Texfield：

<tr><td><input type="text" id="source">
<button type="submit" id="submit" id="formButton">Submit</button></td></tr>

提交

第二个文本字段：

<tr><td><input type="text" size="62" id="target" id="form1">
<button onClick="myFunct()" id="form1">Copy</button></td></tr>  

复制

JQuery：

 <script>
  $("#formButton").click(function(){
   $("#form1").toggle();
    });
 </script>  

$（“#表单按钮”）。单击（函数（）{
$（“#form1”）.toggle（）；
});

---

非常感谢您的支持

第一个问题是按钮上有重复的ID（包括

submit

和

formButton

）。元素。在我的例子中，我采用了后者

其次，您有重复的

form1

id，它也是。只需使用类即可

然后，只需在默认情况下隐藏这些元素，并在单击按钮时显示它们。我建议使用

.show（）

，而不是

.toggle（）

这可以从以下几点看出：

$（“#表单按钮”）。单击（函数（）{
$（“.form1”）.show（）；
});
.form1{
显示：无；
}

提交
复制
如果您打算向服务器提交数据，通常您应该将输入和按钮包装在
标签中，因此我添加了一个标签，并对其进行了设置，以便将其发送到实时测试服务器。还添加了一个iframe来显示服务器的响应。jQuery很简单：

$('#main').on('submit', function() {...

当
form#main
听到
submit
事件时（即单击
按钮[type=submit]
）

$('.row2').removeClass('hide');

…删除类
.hide
窗体
tr.row2
，该窗体将删除样式
显示：无

顺便说一句，ID必须是唯一的。
#form1
是重复的，并且OP代码中的一个按钮上有两个ID

演示

$（“#main”）.on（'submit'，function（）{
$（“.row2”）.removeClass（'hide'）；
})；
.hide{
显示：无
}

提交
复制
第一个问题。当您提交第一个字段时会发生什么？它是否执行表单提交？它是否执行ajax并取消表单提交？黑曜石时代，感谢您的解释和支持！！