Cancel sending jQuery form

Question

Good afternoon, I have a form and I want that when the button submit be clicked it does not reload the page for the post submission put the return false; in function submit of jQuery but it did not happen...

$("#form-anuncio-edita-texto").submit(function () {
        if ($("#edita-anuncio-texto").val() !== "") {

            var formData = new FormData(this);

            $("#page-load").toggleClass('sk-loading');
            $("#anuncio-edita-text-alert").hide();
            $('#modal-anuncios-3').modal('toggle');

            var request = $.ajax({
                url: "modulos/paginas/" + identificador + "/process/updateMedia.php",
                method: "POST",
                data: formData
            });

            request.done(function (data) {
                $("#page-load").toggleClass('sk-loading');
                alert(data);
            });

            request.fail(function () {
                $("#page-load").toggleClass('sk-loading');
                toastNotification("<a href='index.php'>A página não pode ser carregada, se este erro persistir sujerimos que atualize a página ou clique <strong>AQUI</strong> e tente novamente.</a>", "Erro no Carregamento...", 15000, "error");
            });
        } else {
            $("#anuncio-edita-text-alert").show();
        }
        return false;
    });

When the field is empty he enters the else and the page does not reload, but when I enter any value it reloads.

WARNING: This example is with a text field that would be easily solved using the function click of jQuery storing the contents in a var and putting her in data: {texto: vartexto}, but I can’t use it because in this form there is a field FILE where I will send a file via AJAX.

Answer 1

Use the Event.preventDefault() to prevent the submit is executed, call the function by passing the event as parameter.

Example:

$("#form-anuncio-edita-texto").submit(function(event){
   event.preventDefault();
});

Event.preventDefault()

Cancel the event if cancellable, without stopping the spread of the event.

$("#form-anuncio-edita-texto").submit(function(event){
  event.preventDefault();
  console.log("Entrei mas não enviei");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form method="post" action="pagina2.asp" id="form-anuncio-edita-texto">
  <button type="submit" id="btn">
    Enviar
  </button>
</form>

Answer 2

I think you have to do something like this:

<form id="form">
 <input type="text" name="name" id="name">
 <button type="button" id="submit">teste</button>
</form>

<script>
 $('#submit').click(function () {
   $('#form').submit();
 });
 $('#form').submit(function (e) {
   e.preventDefault();
   if //logica
 });
</script>