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

Answer 1

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

Answer 2

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

Answer 3

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.

Answer 4

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