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

Question

I have a modal with checkboxes and I am trying to reuse it for 2 buttons that pull the info to 2 different spots on the site.

The problem is from JQuery. Things will submit but if I press Button A then everything works fine. If I press Button B after this then Button A will resubmit and Button B will submit too. This also happens if you do the buttons in the opposite order.

We have the main page that is a form. This modal pops up a form with button A. You select a policy and then click submit. This adds it to the main form. If you select a policy with button B it adds policy files. Similar but slightly different but still they both use the same modal

A modal pops up from pressing this.

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

Submit button on Modal. It checks if the checkbox is checked with the click of the button and doesn't get in the way of the 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');
    });

I also tried this to try and avoid using ajaxifypolicies2 twice:

$(".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');

                }
            });/**/
        }

removed the Else If and made it an if only

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

Prevented multiple values from being submitted from previous submits 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