Script js does not interrupt submit form

5

Personally I'm having a problem with an algorithm in jquery, that of uploading files with ajax without refreshing the page.

I do not know why when I put return false; at the beginning of the algorithm the submit is canceled but consequently Ajax will not run. And if you put return false; at the end Ajax works and return does not end up refreshing 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;
});
    
asked by anonymous 03.01.2017 / 20:36

2 answers

5

Remove return false and put preventDefault to prevent page refresh:

$('#form-add-post').submit(function (evento) {
  evento.preventDefault();
  // corpo
});
    
03.01.2017 / 20:38
2

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

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

and

$("#btnsalvepost").click(function(){
   ....
})
    
03.01.2017 / 20:44