locked
Modal hides in dynamic input fields RRS feed

  • 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