使用jQuery实现提交第一个文本框后显示/隐藏第二个文本框

我来帮你搞定这个需求～你的现有代码里有几个小细节问题导致功能没正常运行，我帮你修正并实现想要的效果：

先说说你代码里的问题 #

• 重复id问题：同一个页面里每个元素的id必须是唯一的，但你给提交按钮加了两个id，第二个文本框和复制按钮也共用了form1，这会让jQuery找不到正确的目标元素。
• 没有默认隐藏第二个文本框：你没设置初始隐藏状态，所以页面加载后第二个文本框会直接显示。
• 提交按钮的行为问题：如果按钮在<form>标签里，默认点击会触发表单提交导致页面刷新，之前的显示效果会消失。

修正后的完整代码 #

HTML部分

<!-- 第一个文本框区域 -->
<tr>
  <td>
    <input type="text" id="source">
    <!-- 改成type="button"避免表单默认提交，同时给唯一id -->
    <button type="button" id="submitBtn">Submit</button>
  </td>
</tr>

<!-- 第二个文本框所在行，通过style默认隐藏 -->
<tr id="targetRow" style="display: none;">
  <td>
    <input type="text" size="62" id="targetInput">
    <button onClick="myFunct()">Copy</button>
  </td>
</tr>

jQuery部分

<script>
// 确保DOM加载完成后再绑定事件
$(document).ready(function() {
  // 绑定提交按钮的点击事件
  $("#submitBtn").click(function() {
    // 显示第二个文本框所在的行
    $("#targetRow").show();
    
    // 可选：把第一个文本框的内容同步到第二个里（根据你的需求决定是否保留）
    $("#targetInput").val($("#source").val());
    
    // 如果你的按钮是在<form>标签内，一定要加这行阻止页面刷新
    // event.preventDefault();
  });
});

// 复制按钮的功能实现（示例）
function myFunct() {
  const copyText = document.getElementById("targetInput");
  copyText.select();
  navigator.clipboard.writeText(copyText.value);
  // 可选：添加复制成功提示
  // alert("内容已复制到剪贴板！");
}
</script>

关键修改说明 #

1. 默认隐藏：给第二个文本框所在的<tr>添加style="display: none;"，页面加载时就会隐藏。
2. 唯一id：给每个元素设置唯一的id，确保jQuery能精准选中目标。
3. 显示逻辑：用show()方法替代toggle()，因为我们只需要在提交后显示，不需要切换隐藏状态（如果需要切换可以改回toggle()）。
4. 避免页面刷新：如果按钮在表单内，要么把按钮type改成button，要么在点击事件里加event.preventDefault()，防止页面刷新导致显示的内容消失。

内容的提问来源于stack exchange，提问作者Stef