Question

我不明白为什么按下按钮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&agrave;" 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&agrave;</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 &egrave;!"></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&agrave;" style="margin-bottom:.5em;">
                <input type="text" class="form-control" name='2' placeholder="Inserisci ingrediente 2 e quantit&agrave;" style="margin-bottom:.5em;">
                <input type="text" class="form-control" name='3' placeholder="Inserisci ingrediente 3 e quantit&agrave;" 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>

Answer 1

因为你在这里定义了行动

<form action='salva_ricetta.php' method='post'>

所以 触发/点击时 <input type='submit'

它将提交<form>。

解决方案

将此更改为

<input type='submit'

此

<input type='button'

为什么jQuery提交这个表单？

1 个答案: