Почему 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'