三个表格，同一页面上的一个提交按钮.需要它提交到MySQL数据库中的一行

Question

首先，我在一个页面上有三个形式的原因是用于布局。我有三个输入框越过一条线，然后在其中，依此类推。如果我将它们放在一个表单标签下，我会得到从上到下的不良输入框。我尝试了一些解决方案，但它们没有奏效。每行将放置3个三个条目，而不是一个条目，并且某些数据不会显示，或者只有一条形式出现在数据库中。

html

<form class="form-inline"  id="Test1" method="POST"> 
<div class="form-group"> 
<label>Name: <input name="FN" type="text" class="form-control" id="" value=""> </label>  </div> </form>

<form class="form-inline"  id="Test2" method="POST"> 
<div class="form-group"> 
<label>Name: <input name="LN" type="text" class="form-control" id="" value=""> </label>  </div> </form>

<form class="form-inline"  id="Test3" method="POST"> 
<div class="form-group"> 
<label>Name: <input name="EM" type="text" class="form-control" id="" value=""> </label>  </div> </form>
<div class="form-group"><br> 
                        <div class="col-sm-offset-2"> <button type="button" class="SB btn btn-default">Book Now</button> </div> 
                <script>
                  $(document).on('click','.SB',function(e) {
    formData = $('#Test1, #Test2', '#Test3').serialize();
    $.post(
        'Process.php', formData
    );
});

我只获得了第一个表格，而另外两个则为空白，但在一行上。所有输入都是唯一的。我还尝试了docbyid，它将添加三行，但无法正常工作。任何帮助都会很棒。

php：

     require('DBCon.php');
$statement = $link->prepare("INSERT INTO Database (FN, LN, EM) VALUES( :CFN, :CLN, :CE)");
$ClientFN = $_POST['FN'];
$ClientLN = $_POST['LN'];
$ClientEmail = $_POST['EM'];
$statement->execute(array(
":CFN" => "$ClientFN",
":CLN" => "$ClientLN",
":CE" => "$ClientEmail"));
  $statement = null;
    $link = null;
 // Echo Successful attempt
  echo "<p Data added to database.</p></br></br>";       
  ?>

Answer 1

您的按钮应调用功能而不是提交表单。提交只会从第一个形式发送数据。您应该真正使用一种表单并使用CSS来纠正任何显示问题，但是如果您要使用单独的表格，则应执行您要寻找的工作（确保关闭标签在正确的位置）：

<form class="form-inline"  id="Test1"> 
    <div class="form-group">
        <label>Name: <input name="FN" type="text" class="form-control" id="" value=""></label>
    </div> 
</form>
<form class="form-inline"  id="Test2" method="POST"> 
    <div class="form-group"> 
        <label>Name: <input name="LN" type="text" class="form-control" id="" value=""> </label>
    </div> 
</form>
<form class="form-inline"  id="Test3" method="POST"> 
    <div class="form-group"> 
        <label>Name: <input name="EM" type="text" class="form-control" id="" value=""> </label>
    </div>
</form>
<div class="form-group"> 
    <div class="col-sm-offset-2"> <button type="button" class="sumbitButton btn btn-default">Book Now</button>
</div>
<script>
    $(document).on('click','.sumbitButton',function(e) {
        formData = $('#Test1, #Test2', '#Test3').serialize();
        $.post(
            'Process.PHP', formData
        );
    });
</script>

Answer 2

尝试以下：

<form method="post" action="Process.PHP">
    <div class="form-inline"> 
        <div class="form-group">
            <label>Name: <input name="FN" type="text" class="form-control" id="" value=""></label>
        </div> 
    </div>
    <div class="form-inline"> 
        <div class="form-group"> 
            <label>Name: <input name="LN" type="text" class="form-control" id="" value=""> </label>
        </div> 
    </div>
    <div class="form-inline"> 
        <div class="form-group"> 
            <label>Name: <input name="EM" type="text" class="form-control" id="" value=""> </label>
        </div>
    </div>
    <div class="form-group"> 
        <div class="col-sm-offset-2"> <button type="submit" class="sumbitButton btn btn-default">Book Now</button>
    </div>
</form>