javascript - Why jQuery submits this form? -
i don't understand why pressing on either button add or remove, form automatically submitted. able add/remove text inputs dynamically, pressing on above mentioned buttons, , code working. added form, weird auto-submit behaviour...
this 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à" 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 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à</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 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>
its because define action on here
<form action='salva_ricetta.php' method='post'> so when ever trigger/clicked <input type='submit'
it submit <form>.
solution
change to
<input type='submit' this
<input type='button'
Comments
Post a Comment