Why is jQuery submitting this form?

Question

I do not understand why clicking on the add or remove button, the form is automatically submitted. I would like to be able to add / remove text inputs dynamically by clicking on the above buttons and my code works. But as soon as I added form , I get this weird auto submit behavior ...

This is a jQuery script:

 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); }); 

This is the form:

 <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

This is because you define the action here

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

so when ever this trigger / click <input type='submit'

He will send a <form> .

---

Decision

Change it to

 <input type='submit' 

this is

 <input type='button'