jQuery提交此表单的原因
Why jQuery submits this form?
我不明白为什么按下按钮add
或remove
,表单就会自动提交。我希望能够通过按下上面提到的按钮来动态添加/删除文本输入,并且我的代码正在工作。但当我添加form
时,我就会出现这种奇怪的自动提交行为。。。
这是jQuery脚本:
var counter = 3;
$("#add").click(function() {
counter = counter + 1;
$("#ingredienti").append('<input type="text" name="'+counter+'" class="form-control" placeholder="Inserisci ingrediente '+counter+' e quantità" style="margin-bottom:.5em;">');
$("input[name='numero_ingredienti']").value(counter);
});
$("#remove").click(function() {
$("input[name="+counter+"]").remove();
counter = counter - 1;
if(counter<0){counter=0;};
$("input[name='numero_ingredienti']").value(counter);
});
这种形式:
<form action='salva_ricetta.php' method='post'>
<div class="row" style="margin-top:2em;margin-bottom:5em;">
<div class="col-sm-10 col-sm-offset-1">
<input type="text" name='nome' class="form-control" placeholder="Nome della ricetta" style="margin-bottom:1em;">
</div>
<div class="col-sm-3 col-sm-offset-1">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class='glyphicon glyphicon-star'></span> </div>
<select class="selectpicker" name='diff' data-width="8em">
<option selected disabled>Difficoltà</option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
</select>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class='glyphicon glyphicon-time'></span> </div>
<input type="text" name='durata' class="form-control" id="exampleInputAmount" placeholder="Durata (in minuti)">
</div>
</div>
</div>
<div class="col-sm-4">
<input type="text" class="form-control" name='foto' placeholder="Link ad una foto" style="margin-bottom:1em;">
</div>
<div class="col-sm-10 col-sm-offset-1">
<p><img src="img/grattuggia.png" style="max-height:3em;"> Lista ingredienti <span class="glyphicon glyphicon-info-sign" data-container="body" data-toggle="tooltip" data-placement="top" title="Inserisci anche i quantitativi in grammi (g), cucchiai o cucchiaini, tazze o quello che è!"></span>
<button class="btn btn-warning pull-right" id='add'><span class='glyphicon glyphicon-plus-sign'></span></button>
<button class="btn btn-warning pull-right" style="margin-right:.5em;" id='remove'><span class='glyphicon glyphicon-minus-sign'></span></button>
</p>
<div id='ingredienti'>
<input type="text" class="form-control" name='1' placeholder="Inserisci ingrediente 1 e quantità" style="margin-bottom:.5em;">
<input type="text" class="form-control" name='2' placeholder="Inserisci ingrediente 2 e quantità" style="margin-bottom:.5em;">
<input type="text" class="form-control" name='3' placeholder="Inserisci ingrediente 3 e quantità" style="margin-bottom:.5em;">
</div>
</div>
<div class="col-sm-10 col-sm-offset-1">
<textarea class="form-control" name='procedimento' rows="10" placeholder="Procedimento"></textarea>
</div>
<div class="col-sm-10 col-sm-offset-1">
<input type="hidden" value='3' name='numero_ingredienti' />
<input type='submit' class="btn btn-warning pull-right" style="margin-top:.5em;" value='Salva ricetta'>
</div>
</div>
</form>
这是因为您在这里定义了上的操作
<form action='salva_ricetta.php' method='post'>
所以当触发/点击<input type='submit'
时
它将提交<form>
。
解决方案
将其更改为
<input type='submit'
这个
<input type='button'
相关文章:
- HTML表单提交时未执行外部函数
- JS表单提交"无法使用Chrome数据保护程序加载此页面.尝试重新加载页面.调试信息:POST CISmtuK
- 将图像上传ajax与表单提交ajax相结合
- Javascript无法处理表单提交
- 如何在我的情况下禁用表单提交
- 加载后的页面与ajax表单提交不起作用
- angularjs-控制器在表单提交时未调用
- 禁用带有字符白名单的表单提交
- 如何使用Google Analytics跟踪表单提交
- 使用javascript将表单提交到iframe目标中
- e.preventDefault在表单提交时被忽略
- AngularJS JQuery Ajax表单提交等效
- JavaScript表单提交帮助
- PHP表单提交和重定向
- 当所有输入文本字段都为空时,禁止表单提交,但当jquery中的任何字段不为空时允许提交
- setTimeOut AFTER jQuery表单提交
- 从函数中选择要触发表单提交的正确元素
- JavaScript表单提交没有't fire asp服务器端点击功能的提交按钮
- 表单提交问题,如何在我的URL末尾获得ID的值
- Javascript使用Confirm取消表单提交