如何在一个页面上使用一个表单两次或三次?

Posted

技术标签:

【中文标题】如何在一个页面上使用一个表单两次或三次?【英文标题】:How to use the one form twice or thrice on a single page? 【发布时间】:2021-10-29 12:12:07 【问题描述】:

我有一个表单,我在页面上显示了两次。我的意思是,我在底部显示一个表单,一旦用户单击“联系我们”按钮,弹出窗口中也会显示相同的表单。

form.php

<form action="" method="post" name="enquiry">
   <div class="form-list">
      <div class="fields mb-3">
        <label>Your Full Name</label>
        <input type="text" name="name" class="form-control">
    </div>
      <div class="fields">
        <label>Phone Number</label>
        <input type="text" name="phoneno" class="form-control">
    </div>
  </div>
 <input type="hidden" name="action" value="subscribe">
 <input type="submit" name="send" value="Submit">
</form>

index.php

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
  <header></header>
  <main>
    <?php include('form.php'); ?> // displaying on the page
   <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Contact Us</button>
  </main>
  <footer>
  </footer>
  <!--form in popup-->
  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <?php include('form.php'); ?>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

现在我的问题是,我收到了表单中的弹出窗口,但是当我提交表单时,我没有得到任何数据,但是如果我提交的表单位于正在工作的主标记中。

如果我评论主标签内的表单并填写弹出窗口中的表单,那么它就可以工作了。

知道如何解决这个问题吗?

【问题讨论】:

您的表单似乎没有action 属性。它在哪里发送数据?您在控制台中看到了什么?有什么错误吗? @Twisty,对于迟到的回复,我深表歉意,我正在使用 ajax 将数据提交到数据库中。 【参考方案1】:

现代 HTML5 规范不允许同一文档中的两个表单具有相同的名称,因此您只能获取找到的第一个表单的内容。 (重点在下面添加)

The name attribute represents the form's name within the forms collection. The value must not be the empty string, and the value must be unique amongst the form elements in the forms collection that it is in, if any.

【讨论】:

有没有其他办法解决这个问题? @user9437856 您需要表单上的名称属性从什么开始?如果这确实是问题所在,那么只需将其删除即可解决问题。 @CBroe,我做了,但什么也没发生 @user9437856 我说如果是问题所在,我没有专门去查看这是否会阻止提交。不过,我无法重现您的问题,如果我从您的代码创建一个静态 HTML 文档,并在两个地方都嵌入了表单,那么两者都可以很好地提交,浏览器开发工具显示它在每种情况下都可以发送相同的参数,没有问题。

以上是关于如何在一个页面上使用一个表单两次或三次?的主要内容,如果未能解决你的问题,请参考以下文章

我可以提高按钮的触摸灵敏度吗?

如何:自行加入流分析?

正则表达式4

6 张图带你搞懂 TCP 为啥是三次握手,而不是两次或四次?

Apache中的分段错误11

登录表单在第一次尝试在实时服务器上失败,但在第二次或第三次尝试