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

Question

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

我尝试了以下内容：

HTML：

First Texfield：

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

Second Textfield：

<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>  

非常感谢您的支持。

Answer 1

第一个问题是按钮上有重复的ID（submit和formButton）。元素 can only have one ID 。在我的例子中，我已经选择了后者。

其次，您有form1个重复的ID，也是invalid markup。只需使用课程即可。

然后，这只是隐藏这些元素的问题，并在点击按钮时显示它们。我建议使用.show()代替.toggle()。

这可以在以下内容中看到：

$("#formButton").click(function() {
  $(".form1").show();
});

.form1 {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

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

Answer 2

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

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

当form#main“听到”submit事件时（即点击button[type=submit]时...

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

...删除类.hide表单tr.row2，删除样式display:none

顺便说一下，ids必须是唯一的。 #form1是重复的，OP代码中的一个按钮上有2个ID。

演示

$("#main").on('submit', function() {
  $(".row2").removeClass('hide');
});

.hide {
  display: none
}

<form id='main' action='https://httpbin.org/post' method='post' target='view'>
  <table>
    <tr>
      <td><input type="text" id="source" name='source'>
        <button type="submit">Submit</button></td>
    </tr>

    <tr class='row2 hide'>
      <td><input type="text" size="62" id="target" name='target'>
        <button type='button'>Copy</button></td>
    </tr>
  </table>
</form>
<iframe name='view'></iframe>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>