防止提交第二个表单时提交第一个表单

Question

这是交易（使用 php 和 laravel-5.2）。
我在一个页面中有一些forms，当我提交another form而不是第一个时，它会继续提交first form。
这是我的html代码：

<form method="POST" action="http://localhost:8888/candidates/18" accept-charset="UTF-8" id="name-edit" style="display:none">
     <input name="_method" type="hidden" value="PUT">
     <input name="_token" type="hidden" value="xxzvu6HIqP8k2kg78pxuHiTc8NWftjNL1IJvxbDo">
     <div  class="form-group ">
         <div  class="col-xs-12 col-sm-5 ">
             <input placeholder="Full Name" error="" id="name-input" class="width-100" name="name" type="text" value="chi qua uqaaa1232">
         </div>
     </div>
     <button class="green btn-link col-xs-4" type="submit"><i class="ace-icon glyphicon glyphicon-ok"></i> Click to save or press Enter</button>
</form>

<form method="POST" action="http://localhost:8888/candidates/18" accept-charset="UTF-8" id="address-edit" style="display:none">
     <input name="_method" type="hidden" value="PUT">
     <input name="_token" type="hidden" value="xxzvu6HIqP8k2kg78pxuHiTc8NWftjNL1IJvxbDo">
     <div class="form-group ">
          <div class="col-xs-12 col-sm-5 ">
               <input placeholder="Address" error="" id="address-input" class="width-100" name="address" type="text" value="nha xacdawdwad">
          </div>
     </div>
     <button class="green btn-link col-xs-4" type="submit"><i class="ace-icon glyphicon glyphicon-ok"></i> Click to save or press Enter</button>
</form>

我的两种形式的 jquery 代码：

$(document).ready(function(){
    $("#name-edit").focusout(function() {
        $('#name-edit').css('display', 'none');
        $('#name-view').css('display', 'inline');
    });

    $("#address-edit").focusout(function() {
        $('#address-edit').css('display', 'none');
        $('#address-view').css('display', 'inline');
    });
});

$('#btn-edit-name').click(function () {
    var name = $('#name-view').css('display', 'none').clone().children().remove().end().text();
    $('#name-input').val(name);
    $('#name-edit').css('display', 'inline').focus();
});

$('#btn-edit-address').click(function () {
    var name = $('#address-view').css('display', 'none').clone().children().remove().end().text();
    $('#address-input').val(name);
    $('#address-edit').css('display', 'inline').focus();
});

btn-edit-name 和 btn-edit-address 用于显示表单。感谢您的考虑。
这是我的用户界面：

Answer 1

你可以有两个不同的动作

action="http://localhost:8888/candidates/18"

action="http://localhost:8888/candidates/19" 

如果不可能，为每个表单添加不同的隐藏输入，例如

在表格 1 中添加这一行

 <input type="hidden" name="identifier" value="form1">

在表格 2 中添加这一行

<input type="hidden" name="identifier" value="form2">

现在您可以使用if ($_POST['identifier'] == 'form1')

或

你也可以使用 switch 语句

switch($_POST['identifier']){
    case 'form1':{}
    case 'form2':{}
}

您的两个提交按钮也是相同的。您可以为每个可以在提交后检查的值设置一个值。像这样设置值 对于表格 1 名称

<button class="green btn-link col-xs-4" type="submit" value="name" name="name"><i class="ace-icon glyphicon glyphicon-ok"></i> Click to save or press Enter</button>

表格2地址

<button class="green btn-link col-xs-4" type="submit" value="address" name="address"><i class="ace-icon glyphicon glyphicon-ok"></i> Click to save or press Enter</button>

Answer 2

您不能同时提交 2 个表单。

您可以将名称和地址字段添加到单个表单中，而不是使用 2 个表单，如下所示：

<form method="POST" action="http://localhost:8888/candidates/18" accept-charset="UTF-8" id="name-edit" style="display:none">
     <input name="_method" type="hidden" value="PUT">
     <input name="_token" type="hidden" value="xxzvu6HIqP8k2kg78pxuHiTc8NWftjNL1IJvxbDo">
     <div  class="form-group ">
         <div  class="col-xs-12 col-sm-5 ">
             <input placeholder="Full Name" error="" id="name-input" class="width-100" name="name" type="text" value="chi qua uqaaa1232">
         </div>
     </div>
     <div class="form-group ">
        <div class="col-xs-12 col-sm-5 ">
           <input placeholder="Address" error="" id="address-input" class="width-100" name="address" type="text" value="nha xacdawdwad">
        </div>
     </div>
     <button class="green btn-link col-xs-4" type="submit"><i class="ace-icon glyphicon glyphicon-ok"></i> Click to save or press Enter</button>
</form>

如果您希望在单击时显示隐藏它们，那么您可以添加一些 jQuery 来实现。

Answer 3

哦，我找到了将type提交按钮设置为button的答案，然后将jquery设置为点击事件$(this).closest('form').submit()