Modal doesn't disappear when submit form inside

Question

i'm really confused and don't know if maybe title is wrong for the error. If think i need update it make me know it.

Well, i have a modal, with a form inside.

<center>
    <button type="button" class="btn btn-success btn-lg" data-toggle="modal" data-target="#formcrearcliente">Crear nuevo cliente</button>
</center>
<br><br><br>
<div id="formcrearcliente" class="modal fade" role="dialog">        
    <div class="modal-dialog" style="background-color:black;">
        <div class="modal-content" style="background-color:black;">
            <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal">&times;</button>
               <h4 class="modal-title">Crear nuevo cliente</h4>
            </div>
            <div class="modal-body">
                <div id="formcreateclient">
                    <form  enctype="multipart/form-data" id="projectclient" name="myFormClient">
                        <input type="hidden" name="_token" value="{{ Session::token() }}">
                        <div class="form-group">
                          <label name="name">Name:</label>
                          <input type="text" id="nameClient" name="nameClient" placeholder="Generalitat de Catalunya" class="form-control form-control-sm">
                          <label name="slug">Slug:</label>
                          <input type="text" id="slugClient" name="slugClient" placeholder="generalitat-de-catalunya" class="form-control form-control-sm"><br>
                          <label name="priority">Priority</label>
                          <input type="number" id="priorityClient" name="priorityClient" class="form-control form-control-sm">
                          <input type="hidden" id="project_id">
                          <input type="submit" value="Crear Cliente" id="createclientsubmit" class="btn btn-danger btn-md">
                          <br><br><br>

                        </div>
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

And have this ajax code:

    $("#myFormClient").submit(function(e){
        e.preventDefault();
        var formData = new FormData($(this)[0]);
        $.ajax({
            url:'/admin/clients/postUpload',
            type:'POST',
            data: formData,
            success: function(){
                $("#formcrearcliente").fadeOut(1000);
                $("#clienteproject").fadeOut(1000);
                $("#donecreate").fadeIn(1000);

            },
            cache: false,
            contentType: false,
            processData: false
        });
        return false;
    });

When i submit the button, ajax query is executed good. (Controller makes her function of create a new data on database).

But, fades doens't work. Anyone, only disappear apparently the modal, but can't click on the web. It's like modal is invisible in all page.

If need i remake the question, or need more info, please ask it.

Thanks a lot.

Answer 1

I'm assuming that you were using Bootstrap modal. You should put the $().modal('hide') after the success ajax.

$("#myFormClient").submit(function(e){
    e.preventDefault();
    var formData = new FormData($(this)[0]);
    $.ajax({
        url:'/admin/clients/postUpload',
        type:'POST',
        data: formData,
        success: function(){
            $("#formcrearcliente").modal('hide');
        },
        cache: false,
        contentType: false,
        processData: false
    });
    return false;
});