為什么jQuery提交這個表單？

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'