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

Here is the deal (using php and laravel-5.2).
I have some forms in a page, and when i submit another form not the first one then it keeps submit the first form.
Here my html code:

这是交易(使用php和laravel-5.2)。我在页面中有一些表单,当我提交另一个表单而不是第一个表单时,它会继续提交第一个表单。这是我的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>

My jquery code for both forms:

我的两种形式的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 and btn-edit-address for showing the form. thanks for your consider.
here is my UI:

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

3 个解决方案

#1

You can't submit 2 forms simultaneously.

您不能同时提交2份表格。

Instead of having 2 forms for name and address fields you can add them into single form like below:

您可以将它们添加到单个表单中,而不是像名称和地址字段一样有两个表单:

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

If you wish to show hide them on click then you can add some jQuery to do so.

如果你想显示隐藏它们点击然后你可以添加一些jQuery这样做。

#2

oh i found the answer that set the type submit button to button then make jquery for click event $(this).closest('form').submit()

哦,我找到了答案,将类型提交按钮设置为按钮,然后为点击事件$(this).closest('form')生成jquery。submit()

#3

You can either have two different actions

您可以有两种不同的操作

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

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

If not possible add different hidden input to each form like

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

In form 1 add this line

在表单1中添加此行

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

In form 2 add this line

在表单2中添加此行

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

Now you can either use if ($_POST['identifier'] == 'form1')

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

You can use a switch statement also

您也可以使用switch语句

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

Also your two submit buttons are identical. You can set a value for each that you can check after submission. Set value like this For form 1 name

您的两个提交按钮也是相同的。您可以为提交后可以检查的每个设置一个值。像这样设置值对于表单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>

For form 2 address

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

#1