javascript - 同一页面上的三种形式，一种提交按钮。需要它提交到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>