[英]How to prevent a double submit of a form, reusing a modal with a different button?
我有一個帶復選框的模式,我正在嘗試將其用於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
$('#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
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.