[英]Form submitting multiple times when created dynamically using AJAX/jQuery
I'm using Google Maps API in a project, and the infoWindow content is built dynamically, so i cant use document ready function to assign the validator to the form. 我在一个项目中使用Google Maps API,并且infoWindow内容是动态构建的,因此我无法使用文档就绪功能将验证器分配给表单。
I'm using, bootstrap, bootstrapValidator and jQuery. 我正在使用bootstrap,bootstrapValidator和jQuery。
I created a function, and the submit button call it, in the first click, ok, 1 call, second click, 2 calls, 3calls, 4 calls, etc... 我创建了一个函数,然后单击“提交”按钮将其调用,在第一次单击,确定,一次调用,第二次单击,2次调用,3次调用,4次调用等中...
What i need to do, to the Submit only be called only once? 我需要做什么,到“提交”仅被调用一次?
THIS ONLY HAPPENS WITH THE DYNAMICALLY CONTENT, the static forms have a normal behavior. 这仅在具有动态内容的情况下发生,静态形式具有正常行为。
Here's the code, take a look please. 这是代码,请看一看。
Here's the content that creates on fly: 以下是即时创建的内容:
var content_string = '<div class="scrollFix"> <div id="divinfowindow"> <div class="container-fluid container-fluid-corrige"></div> <div class="row"> <div class="col-sm-3 img-corrige-60"> <img src="http://placehold.it/60x60" class="img-rounded"/> </div> <div class="col-sm-9 text-corrige"> <p>Por: Russell Bega</p> <p>Em: </p> <p class="white-space-normal">endereco</p> </div> </div> <form class="form-horizontal" role="form" id="formNovaMarcacao" action="/novaMarcacao"> <div class="form-group"> <div class="col-sm-12"> <input type="text" class="form-control" id="inputTituloNovaMarc" name="inputTituloNovaMarc" placeholder="Titulo"> </div> </div> <div class="form-group"> <div class="col-sm-12"> <select id="inputCategoriaNovaMarc" name="inputCategoriaNovaMarc" class="form-control select-corrige"> <option>Escolha uma categoria</option> </select> </div> </div> <div class="form-group"> <div class="col-sm-12"> <select id="inputSubCategoriaNovaMarc" name="inputSubCategoriaNovaMarc"class="form-control select-corrige"> <option>Escolha uma categoria</option> </select> </div> </div> <div class="form-group"> <div class="col-sm-12"> <textarea class="form-control" id="inputDescricaoNovaMarc" name="inputDescricaoNovaMarc" rows="3" placeholder="Descricao"></textarea> </div> </div> <div class="form-group"> <div class="pull-right"> <button type="submit" id="btnNovaMarc" onclick="validaNovaMarcacao()" name="btnNovaMarc" class="btn btn-default" data-loading-text="Postando...">Postar</button> </div> </div> </form> <div id="statusNovaMarc"></div> </div> </div>';
And here's the validator code: 这是验证器代码:
function validaNovaMarcacao(){
$('#formNovaMarcacao').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
container: 'tooltip',
submitButtons: btnNovaMarc,
fields: {
inputTituloNovaMarc: {
validators: {
notEmpty: {
message: 'Este campo não pode ser vazio.'
}
}
}
}
})
.on('success.form.bv', function(e) {
// Prevent form submission
e.preventDefault();
var dados = {
inputTituloNovaMarc : $("#inputTituloNovaMarc").val(),
};
var formURL = $(this).attr("action");
//console.log(dados);
$('#btnNovaMarc').button('loading');
jQuery.ajax({
type: "POST",
dataType: "json",
url: formURL,
data: dados,
success: function( data )
{
alert("ok" + data);
},
error : function (data){
}
});
$('#btnNovaMarc').button('reset');
return false;
});
}
Here's the content string indented: 这是缩进的内容字符串:
<div class="scrollFix">
<div id="divinfowindow">
<div class="container-fluid container-fluid-corrige"></div>
<div class="row">
<div class="col-sm-3 img-corrige-60"> <img src="http://placehold.it/60x60" class="img-rounded"/> </div>
<div class="col-sm-9 text-corrige">
<p>Por: Russell Bega</p>
<p>Em: </p>
<p class="white-space-normal">endereco</p>
</div>
</div>
<form class="form-horizontal" role="form" id="formNovaMarcacao" action="/novaMarcacao">
<div class="form-group">
<div class="col-sm-12"> <input type="text" class="form-control" id="inputTituloNovaMarc" name="inputTituloNovaMarc" placeholder="Titulo"> </div>
</div>
<div class="form-group">
<div class="col-sm-12">
<select id="inputCategoriaNovaMarc" name="inputCategoriaNovaMarc" class="form-control select-corrige">
<option>Escolha uma categoria</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<select id="inputSubCategoriaNovaMarc" name="inputSubCategoriaNovaMarc"class="form-control select-corrige">
<option>Escolha uma categoria</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-12"> <textarea class="form-control" id="inputDescricaoNovaMarc" name="inputDescricaoNovaMarc" rows="3" placeholder="Descricao"></textarea> </div>
</div>
<div class="form-group">
<div class="pull-right"> <button type="submit" id="btnNovaMarc" onclick="validaNovaMarcacao()" name="btnNovaMarc" class="btn btn-default" data-loading-text="Postando...">Postar</button> </div>
</div>
</form>
<div id="statusNovaMarc"></div>
</div>
</div>
And here the server side log, pay attention on timestamps. 在这里,服务器端日志请注意时间戳。
INFO 2014-10-16 02:20:08,765 module.py:659] default: "POST /novaMarcacao HTTP/1.1" 200 -
INFO 2014-10-16 02:20:17,447 module.py:659] default: "POST /novaMarcacao HTTP/1.1" 200 -
INFO 2014-10-16 02:20:17,448 module.py:659] default: "POST /novaMarcacao HTTP/1.1" 200 -
INFO 2014-10-16 02:20:26,375 module.py:659] default: "POST /novaMarcacao HTTP/1.1" 200 -
INFO 2014-10-16 02:20:26,391 module.py:659] default: "POST /novaMarcacao HTTP/1.1" 200 -
INFO 2014-10-16 02:20:26,394 module.py:659] default: "POST /novaMarcacao HTTP/1.1" 200 -
INFO 2014-10-16 02:20:34,132 module.py:659] default: "POST /novaMarcacao HTTP/1.1" 200 -
INFO 2014-10-16 02:20:34,170 module.py:659] default: "POST /novaMarcacao HTTP/1.1" 200 -
INFO 2014-10-16 02:20:34,177 module.py:659] default: "POST /novaMarcacao HTTP/1.1" 200 -
INFO 2014-10-16 02:20:34,178 module.py:659] default: "POST /novaMarcacao HTTP/1.1" 200 -
Remove the following part from within the function validaNovaMarcacao
and put it in DOM ready where it will be call only once: 从
validaNovaMarcacao
函数中删除以下部分,并将其放入DOM中,该位置将仅被调用一次:
$('#formNovaMarcacao').bootstrapValidator({
//.....
.on('success.form.bv', function(e) {
//......
});
As it is, each time you call the function validaNovaMarcacao
, you are re-initializing the validator and attaching another success event handler; validaNovaMarcacao
,每次调用函数validaNovaMarcacao
,您将重新初始化验证器并附加另一个成功事件处理程序。 that's quite evident by the sequence of the number of calls: 1, 2, 3, 4, ... 从通话数量的顺序可以明显看出:1、2、3、4 ...
Should be: 应该:
$(function() {
$('#formNovaMarcacao').bootstrapValidator({
//.....
.on('success.form.bv', function(e) {
//......
});
});
UPDATE UPDATE
Following the discussion below, the following are the changes you need to make: 在下面的讨论之后,以下是您需要进行的更改:
Reduce the function to the following: 将功能简化为以下内容:
function formNovaMarcacao() {
$('#formNovaMarcacao').bootstrapValidator({
//.....
});
}
Then the following: 然后是以下内容:
$(function() {
formNovaMarcacao();
$('#formNovaMarcacao').on('success.form.bv', function(e) {
//......
});
});
You would do well not to use inline JS onclick=...
.. it's just not good practice. 您最好不要使用内联JS
onclick=...
这不是一个好习惯。 Run formNovaMarcacao()
immediately the dynamic form content is created. 立即创建动态表单内容,运行
formNovaMarcacao()
。
That should do it. 那应该做。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.