php - 表单内的表单 HTML

Question

我知道这个问题之前已经被问过，但请仔细阅读以了解为什么我所问的内容有所不同。 我的第一个表单是这样的，其中 newsearch.php 是包含该表单的 php 文件的名称。我想监听此 php 文件内的任何 POST 调用，因为我有我的 if(isset($_POST代码在这里。

<form action="newsearch.php" method="post">

所以，我正在使用 bootstrap 来布局页面，并且我有另一种形式想要包含在 <div class="row"> 中这是我之前提到的表格里面的。我要问的是，我可以在 php 文件中的其他位置添加表单 html 代码并调用它以显示在 <div> 中吗？ ？

我想要的是一种方法来做到这一点:

<div class="row">
    <div class="col-lg-6" align="center">
    <h4>Search For Galleries</h4>
    <form action="newsearch.php" method="post">
    <br>
        <input type="text" name="valueToSearch" placeholder="Search"><br><br>
        <input type="submit" name="search" value="Search"><br><br>
    </div>
    <div class="col-lg-6" align="center">
        <h4>Create new Gallery</h4>
        <!-- HOW CAN I INCLUDE A FORM HERE? -->
    </div>


</div>

如您所见，第一个表单未关闭。那是因为它在文件下方关闭了。

我的第二种形式是这样的:

        <form action="inserttogal.php" method="post">

        Gallery Name: <input type="text" name="gname" /><br><br>
        Gallery Type: <input type="text" name="gtype" /><br><br>

        <input type="submit" name="newgal"/>

        </form>

Answer 1

而不是使用两个<form>构造(并且嵌套，以引导)为什么不:

(1)将表单改为普通DIV

(2) 使用 jQuery 捕获按钮点击

(3) 将值读入变量(这允许您执行任何必需的字段验证，而无需否定表单的默认操作)

(4) 使用javascript/jQuery，构建复合HTML <form> (结合两种形式)在一个变量中，然后

(5) 使用 jQuery 来append()将表单移至页面底部，然后使用

(6) $('form').submit()提交复合表格。

还有一点工作要做，但它会起作用。请注意，Bootstrap 使用/需要 jQuery，因此该库已加载。不妨用一下。

代码示例:

显然，这个示例不适合您的应用程序，只是向您展示您可以做什么以及如何绕过 <form>问题，通过 jQuery/javascript。

$('#btnOne').click(function(){
   var fn = $('#fn').val();
   var ln = $('#ln').val();
   var ag = $('#age').val();
  
   if (ln==''){
     alert('Please complete all fields');
     return false;
   }
  
   var myFrm = '\
      <form id="myForm" action="postFile.php" method="post">\
         <input name="fname" value="' +fn+ '" />\
         <input name="lname" value="' +ln+ '" />\
         <input name="age" value="' +ag+ '" />\
      </form>
   ';
   $('body').append(myFrm);
   $('#myForm').submit();
});

#frmOne{}
#frmTwo{background:wheat;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div id="frmOne">
  First Name: <input id="fn" type="text" /><br>
  Last Name: <input id="ln" type="text" /><br>
  <div id="frmTwo">
    Age: <input id="age" type="text" />
  </div>
</div>
<button id="btnOne">Form One Clicker</button>

---

您还应该研究一下 AJAX(它是什么，为什么使用它——它非常简单!)并看看它是否有用。 This post包含指向 another post 的链接一些你应该学习的简单例子。 我收录了这两篇文章，因为每篇文章都有一些您可能会觉得有用的内容。花 20 分钟研究这些示例可以为您节省数天的设计挫败感。