Script js does not interrupt form Ubmit

Question

Guys I’m having a problem with an algorithm in jquery, that of uploading files with ajax without updating the page.

I don’t know why when I put the return false; at the beginning of the algorithm Submit is canceled but consequently Ajax will not be executed. And if you put the return false; at the end Ajax works and Return does not and ends up updating the page.

Form

<form id="form-add-post" method="POST" enctype="multipart/form-data">
    <div class="header-form-add">
        <div class="cont-head-right">
            <label for="tl-post">Titulo:</label><br/>
            <input id="tl-post" name="tl" onblur="$(this) != ''? $(this).css(''):null;" class="input-adm" type="text" placeholder="Como instalar alguma coisa." />
        </div>
        <div class="cont-head-left">
            <label for="tp-post">Tipo de postagem:</label><br/>
            <input id="tp-post" name="tp" onblur="$(this) != ''? $(this).css(''):null;" class="input-adm" type="text" placeholder="Notícia" />
        </div>
    </div>
    <br/>
    <br/>
    <textarea id="editor"></textarea>
    <script src="/scripts/addons/ckeditor/ckeditor.js" type="text/javascript"></script>
    <script type="text/javascript">
        CKEDITOR.replace('editor');
    </script>
    <br/>

    <label for="tags-post">Tags:</label><br/>
    <input id="tags-post" name="tg" onblur="$(this) != ''? $(this).css(''):null;" type="text" class="input-adm" placeholder="Ajax,JSON,JavaScript,PHP,html,JQuery" />
    <br/>
    <labe for="img-post">Capa da postagem</labe><br/>
    <input id="img-post" type="file" required="" name="img-post" accept="image/*" />
    <div class="limt-img">
        <img id="load-Imgpost" name="file" src="" alt="Load img" />
        <script type="text/javascript">
            function readURL(input) {
                if (input.files && input.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        $('#load-Imgpost').attr('src', e.target.result);
                    }
                    reader.readAsDataURL(input.files[0]);
                }
            }
            $("#img-post").change(function() {
                readURL(this);
            });
        </script>
    </div>
    <button id="btnsalvepost" type="submit">Salvar</button>
</form>

jQuery

$('#form-add-post').submit(function () {

    // Captura os dados do formulário
    var formulario = $(this);

    // Instância o FormData passando como parâmetro o formulário
    var formData = new FormData(formulario);

    // Envia O FormData através da requisição AJAX
    $.ajax({
        url: "/sys/cp/app/add-post.php",
        type: "POST",
        data: formData,
        dataType: 'json',
        processData: false,
        contentType: false,
        success: function (answer) {
            alert(answer);
        }
    });

    return false;
});

Answer 1

Remove the return false and put preventDefault to prevent the page from updating:

$('#form-add-post').submit(function (evento) {
  evento.preventDefault();
  // corpo
});

Answer 2

You can change the type of button to 'button' and put the jquery event on the button click

 <button id="btnsalvepost" type="button">Salvar</button>

and

$("#btnsalvepost").click(function(){
   ....
})