如何防止使用不同的按钮重用模式来防止表单的双重提交？

Question

我有一个带复选框的模式，我正在尝试将其用于2个按钮，以将信息拖到站点上的2个不同位置。

问题出在JQuery。 事情会提交，但是如果我按下Button A那么一切都会正常。 如果我在此之后按下Button B ，则Button A将重新提交， Button B也将提交。 如果按相反的顺序操作按钮，也会发生这种情况。

我们的主页是表格。 该模式会弹出一个带有按钮A的表单。您选择一个策略，然后单击“提交”。 这会将其添加到主窗体。 如果使用按钮B选择策略，它将添加策略文件。 相似但略有不同，但它们仍然使用相同的模式

按下此按钮会弹出一个模态。

<a href="#" data-mylink="1" role='button' class="btn btn-default" data-toggle='modal' data-target='#policyattach_instructions1'>Button A</a>

<a href="#" data-mylink="2" class="btn btn-default" data-toggle="modal" data-target="#policyattach_instructions1">Button B</a>

模态上的“提交”按钮。 它检查单击按钮是否已选中复选框，并且不会妨碍JQuery。

 <input type="button" name="action" class="btn btn-success ajaxifypolicies2" value="Add Policy" onClick="if(radio_checkbox_validate(document.add_policies_form,'one or more Policies & Procedures.')) { return true; } else { return false; }" /> 

jQuery的：

$('#policyattach_instructions1').on('shown.bs.modal', function (e) {
    $('#add_policies_display').html("<center style='margin-top: 25px;'>Use the search tools above to find Policies & Procedures.</center>");
  var btn = $(e.relatedTarget);
  var pnpid = btn.data('mylink');
  //alert(pnpid);
  if(pnpid==1){
    $(".ajaxifypolicies2").click(function(){
            alert("test98");
            $('[id^="add_policies_checkbox"]').each(function(i, v){
                if($(v).prop('checked')){
                var data=$(v).val();
                //alert(data);
                $("#linked_pnp_instructions").append("<div id='pnpID_instruction"+data+"1'><h6><input type=hidden name=pnpID_instructions value=\'"+data+"\' />P&P #'s: "+data+" <a href='#' class='clear_pnp' id='pnpID_instruction"+data+"'>Clear</a></h6></div>");
                //$("#policyattach_instructions1").removeData('bs.modal');


                }
            });/**/
            $(".clear_pnp").click(function(){
                var ID=this.id;
                //alert(ID+"1");
                $("#"+ID+"1").remove();
                return false;
            });
            $("#policyattach_instructions1").modal('hide');
    });//end ajaxifypolicies/**/
  }
  else 
  {
    $(".ajaxifypolicies2").click(function(){
            alert("test99");

            $('[id^="add_policies_checkbox"]').each(function(i, v){
                if($(v).prop('checked')){
                var data=$(v).val();
                //alert(data);
                $("#linked_pnp").append("<div id='pnpIDs"+data+"1'><h6><input type=hidden name=pnpIDs value=\'"+data+"\' />P&P #'s: "+data+" <a href=# class=clear_pnp id='pnpIDs"+data+"' >Clear</a></h6></div>");
                //$("#policyattach_instructions1").removeData('bs.modal');
                //  $("#policyattach_instructions1").modal('hide');

                }
            });/**/
            $(".clear_pnp").click(function(){
                var ID=this.id;
                //alert(ID+"1");
                $("#"+ID+"1").remove();
                return false;
            });
            $("#policyattach_instructions1").modal('hide');
    });//end ajaxifypolicies/**/
  }
    return false;/**/
});//end modal
    $('#policyattach_instructions1').on('hidden.bs.modal', function (e) {
        alert("asfdasf");
        $(this).removeData('bs.modal');
    });

我也尝试这样做，以避免两次使用ajaxifypolicies2：

$(".ajaxifypolicies2").click(function(){
        if(pnpid==1){
            alert("test98");
            $('[id^="add_policies_checkbox"]').each(function(i, v){
                if($(v).prop('checked')){
                var data=$(v).val();
                //alert(data);
                $("#linked_pnp_instructions").append("<div id='pnpID_instruction"+data+"1'><h6><input type=hidden name=pnpID_instructions value=\'"+data+"\' />P&P #'s: "+data+" <a href='#' class='clear_pnp' id='pnpID_instruction"+data+"'>Clear</a></h6></div>");
                //$("#policyattach_instructions1").removeData('bs.modal');


                }
            });/**/
        }
        else 
        {
            alert("test99");

            $('[id^="add_policies_checkbox"]').each(function(i, v){
                if($(v).prop('checked')){
                var data=$(v).val();
                //alert(data);
                $("#linked_pnp").append("<div id='pnpIDs"+data+"1'><h6><input type=hidden name=pnpIDs value=\'"+data+"\' />P&P #'s: "+data+" <a href=# class=clear_pnp id='pnpIDs"+data+"' >Clear</a></h6></div>");
                //$("#policyattach_instructions1").removeData('bs.modal');
                //  $("#policyattach_instructions1").modal('hide');

                }
            });/**/
        }
            $(".clear_pnp").click(function(){
                var ID=this.id;
                //alert(ID+"1");
                $("#"+ID+"1").remove();
                return false;
            });
            $("#policyattach_instructions1").modal('hide');
    });//end ajaxifypolicies/**/



    return false;/**/
});//end modal

Answer 1

$('#policyattach_instructions1').on('shown.bs.modal', function (e) {
                $('#add_policies_display').html("<center style='margin-top: 25px;'>Use the search tools above to find Policies & Procedures.</center>");

 // alert("testy");
  var btn = $(e.relatedTarget);
  var pnpid = btn.data('mylink');
  //var pnpid = $(this).data('mylink');
  //alert(pnpid);

    $(".ajaxifypolicies2").click(function(){

        alert(pnpid);
        if(pnpid==1){
            alert("test98");
            pnpid = ("");
            $('[id^="add_policies_checkbox"]').each(function(i, v){
                if($(v).prop('checked')){
                var data=$(v).val();
                //alert(data);
                $("#linked_pnp_instructions").append("<div id='pnpID_instruction"+data+"1'><h6><input type=hidden name=pnpID_instructions value=\'"+data+"\' />P&P #'s: "+data+" <a href='#' class='clear_pnp' id='pnpID_instruction"+data+"'>Clear</a></h6></div>");
                //$("#policyattach_instructions1").removeData('bs.modal');

                }
            });/**/
        }

删除了Else If，并将其设为if

        if(pnpid==2)
        {
            alert("test99");

防止先前提交的多个值被提交pnpid =（“”）;

            pnpid = ("");
            $('[id^="add_policies_checkbox"]').each(function(i, v){
                if($(v).prop('checked')){
                var data=$(v).val();
                //alert(data);
                $("#linked_pnp").append("<div id='pnpIDs"+data+"1'><h6><input type=hidden name=pnpIDs value=\'"+data+"\' />P&P #'s: "+data+" <a href=# class=clear_pnp id='pnpIDs"+data+"' >Clear</a></h6></div>");
                //$("#policyattach_instructions1").removeData('bs.modal');
                //  $("#policyattach_instructions1").modal('hide');
                }
            });/**/
        }
            $(".clear_pnp").click(function(){
                var ID=this.id;
                //alert(ID+"1");
                $("#"+ID+"1").remove();
                return false;
            });
            $("#policyattach_instructions1").modal('hide');
    });//end ajaxifypolicies/**/



    return false;/**/
});//end modal