Answered by:
Modal hides in dynamic input fields

Question
-
User-1725652363 posted
Hello,
I have a bootstrap modal who contains some input and I want to add another dynamically, but I get a problem: the modal closed, it's like a page refreshed this is my code:
<div class="modal fade bs-example-modal-md" id="modalAjout" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog modal-md" role="document"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="myModalLabel">Add </h4> </div> <div class="modal-body" id="modalBody"> <div class="container"> <form role="form" id="form"> <div class="row"> <div class="col-md-2"> <div class="form-group" id="codes"> <label for="groupe">Code:</label> <input type="text" class="form-control" name="code" id="groupe" placeholder="code"> </div> </div> <div class="col-md-5"> <div class="form-group" id="libele"> <label for="groupe">Libellés:</label> <input type="text" class="form-control" name="libele" id="groupe" placeholder="libele"> </div> </div> </div> <div class="row"> <div class="col-md-6"> <button class="btn-circle btn-sm btn-primary" id="addCode">Add code</button> </div> </div> </form> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Annuler</button> <button type="button" class="btn btn-primary" onclick="Add()">Confirmer</button> </div> </div> </div> </div>
$(document).ready(function () { $("#ajouter").click(function () { $("#modalAjout").modal("show"); }); $("#addCode").click(function () { $("#codes").append(' <input type="text" class="form-control" name="code" placeholder="code">'); $("#libele").append(' <input type="text" class="form-control" name="libele" placeholder="lib">'); }); });
Thank you
Tuesday, May 29, 2018 10:26 AM
Answers
-
User475983607 posted
This will stop a form post if that's what's actually happening. Use the browser's developer tools to verify and debug your JavaScript code.
$("#addCode").click(function (e) { e.preventDefault(); $("#codes").append(' <input type="text" class="form-control" name="code" placeholder="code">'); $("#libele").append(' <input type="text" class="form-control" name="libele" placeholder="lib">'); });
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Tuesday, May 29, 2018 10:46 AM -
User753101303 posted
Hi,
Another option is to add the type="button" attribute that you used correctly on your other "Annuler" and "Confirmer" buttons. Without this you get the default "submit" behavior for a button tag.
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Tuesday, May 29, 2018 11:00 AM
All replies
-
User475983607 posted
This will stop a form post if that's what's actually happening. Use the browser's developer tools to verify and debug your JavaScript code.
$("#addCode").click(function (e) { e.preventDefault(); $("#codes").append(' <input type="text" class="form-control" name="code" placeholder="code">'); $("#libele").append(' <input type="text" class="form-control" name="libele" placeholder="lib">'); });
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Tuesday, May 29, 2018 10:46 AM -
User-1725652363 posted
This will stop a form post if that's what's actually happening. Use the browser's developer tools to verify and debug your JavaScript code.
$("#addCode").click(function (e) { e.preventDefault(); $("#codes").append(' <input type="text" class="form-control" name="code" placeholder="code">'); $("#libele").append(' <input type="text" class="form-control" name="libele" placeholder="lib">'); });
Thank you mgebhard , it's work now
Tuesday, May 29, 2018 10:57 AM -
User753101303 posted
Hi,
Another option is to add the type="button" attribute that you used correctly on your other "Annuler" and "Confirmer" buttons. Without this you get the default "submit" behavior for a button tag.
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Tuesday, May 29, 2018 11:00 AM -
User-1725652363 posted
Hi,
Another option is to add the type="button" attribute that you used correctly on your other "Annuler" and "Confirmer" buttons. Without this you get the default "submit" behavior for a button tag.
Yes PatriceSc it' works too ... thank you
Tuesday, May 29, 2018 11:04 AM