Javascript 三个表单，同一页面上的一个提交按钮。需要提交到mysql数据库中的一行吗_Javascript_Php_Jquery_Html_Mysql

Javascript 三个表单，同一页面上的一个提交按钮。需要提交到mysql数据库中的一行吗

javascript php jquery html mysql

Javascript 三个表单，同一页面上的一个提交按钮。需要提交到mysql数据库中的一行吗,javascript,php,jquery,html,mysql,Javascript,Php,Jquery,Html,Mysql,首先，我在一页上有三个表单的原因是为了布局。我有三个输入框穿过一条线，然后在它下面另一个，依此类推。如果我把它们放在一个表单标签下，就会得到从上到下的外观很差的输入框。我试过一些解决办法，但都不管用。每行将放置三个条目，而不是一个条目，并且一些数据不会显示，或者数据库中只显示一个表单 <form class="form-inline" id="Test1" method="POST"> <div class="form-group"> <label>Na

首先，我在一页上有三个表单的原因是为了布局。我有三个输入框穿过一条线，然后在它下面另一个，依此类推。如果我把它们放在一个表单标签下，就会得到从上到下的外观很差的输入框。我试过一些解决办法，但都不管用。每行将放置三个条目，而不是一个条目，并且一些数据不会显示，或者数据库中只显示一个表单

<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
    );
});

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
    );
});


姓名：
姓名：
姓名：


现在预订
$（文档）.on（'click'，'SB'，函数（e）{
formData=$（“#Test1”、“#Test2”、“#Test3”）.serialize（）；
美元邮政(
'Process.php'，formData
);
});

<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，它会添加三行，但不能正常工作。任何帮助都会很好

<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
    );
});

PHP:

<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
    );
});

require（'DBCon.php'）；
$statement=$link->prepare（“插入数据库（FN，LN，EM）值（：CFN，：CLN，：CE）”；
$ClientFN=$_POST['FN']；
$ClientLN=$_POST['LN']；
$ClientEmail=$_POST['EM']；
$statement->execute（数组(
“：CFN”=>“$ClientFN”，
“：CLN”=>“$ClientLN”，
“：CE”=>“$ClientEmail”）；
$statement=null；
$link=null；
//呼应成功的尝试
echo“您的按钮应该调用函数而不是提交表单。提交将只发送第一个表单中的数据。
实际上，您应该使用一个表单并使用CSS来纠正任何显示问题，但是如果您要使用单独的表单，则以下内容应该满足您的要求（确保结束标记位于正确的位置）：
<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
    );
});


姓名：
姓名：
姓名：
现在预订
$（文档）.on（'单击'，'.sumbitButton'，函数（e）{
formData=$（“#Test1”、“#Test2”、“#Test3”）.serialize（）；
美元邮政(
'Process.PHP'，formData
);
});
您的按钮应该调用函数而不是提交表单。提交将只发送第一个表单中的数据。
实际上，您应该使用一个表单并使用CSS来纠正任何显示问题，但是如果您要使用单独的表单，则以下内容应该满足您的要求（确保结束标记位于正确的位置）：
<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
    );
});


姓名：
姓名：
姓名：
现在预订
$（文档）.on（'单击'，'.sumbitButton'，函数（e）{
formData=$（“#Test1”、“#Test2”、“#Test3”）.serialize（）；
美元邮政(
'Process.PHP'，formData
);
});
试试这个：
<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
    );
});

<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>


姓名：
姓名：
姓名：
现在预订
试试这个：
<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
    );
});

<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>


姓名：
姓名：
姓名：
现在预订
firstFormData+secondFormData+thirdFormData
-这产生了什么实际价值？你应该创建一个JSON对象，而不是仅仅将几个JSON对象粉碎在一起。我不确定，因为我从这里的某个人那里得到了这个，但它不起作用。我仍然在学习并在这里碰壁。谢谢你的评论。我已经决定了为了解决这个问题，我找到了一种方法，用CSS将其分解为一个表单。我感谢大家的帮助。firstFormData+secondFormData+thirdFormData
-这产生了什么实际价值？你应该创建一个JSON对象，而不是仅仅将其中的几个对象粉碎在一起。我不确定这是从这里的某个人那里得到的，但它确实存在不起作用。我还在这里学习和碰壁。谢谢你的评论。我决定放弃这个，我找到了一种方法，用CSS将它分解成一个表单。我感谢大家的帮助。它只做了第一个表单，我想知道它是否与我的process.php有关。它有第一个名称，但不填充其他输入。我尝试了使用我的php脚本进行编辑，但正在审阅。可以使用print\r（$\u POST）；确认传递了变量。请确保已将按钮类型更改为“button”“因此它无法正常提交表单。您的编辑仍然在表单标签的错误一侧有结束div，并且您没有更改按钮类型。当我在进行更改后单击按钮时，它没有任何作用。我决定放弃此功能，并找到了一种方法，使用CSS将其拆分为一个表单。我感谢大家的帮助。它只做了第一个表单，我想知道它是否与我的process.php有关。它不填写第一个名称，但不填写其他输入。我试图用我的php脚本进行编辑，但它正在被审查；确认正在传递变量。确保您已将按钮类型更改为“button”，使其无法正常提交表单。您所做的编辑仍然在表单标记的错误一侧有结束div，并且您尚未更改按钮类型。当我在进行更改后单击按钮时，它什么也没做。我决定放弃它，我找到了一种方法，用CSS将它分解成一个表单。我感谢大家的帮助。我决定放弃这个，我找到了一种方法，用CSS将它分解成一个表单。我非常感谢大家的帮助。这并不是我所做的。我已经决定放弃这个，我找到了一种方法，用CSS将它分解成一个表单。我感谢大家的帮助。这不是我所做的吗？