1

estou com um problema em que ao clicar o botão cancel não está cancelando a operação e esta continuando e enviando o formulário

<form action="insere_forn.php" class="control-form" method="post" id="forn_cad" name="forn_cad" enctype="multipart/form-data">
    <div class="row">
    <div class="col-6">
      <div class="form-group ">
        <input type="text" name="nome_forn" placeholder="Digite o nome do fornecedor" class="form-control " id="nome_forn" required/>
      </div>
    </div>
    </div>
       <div class="row">
    <div class="col-6">
      <div class="form-group ">
        <input type="text" name="end_forn" placeholder="Endereço" class="form-control " id="end_forn" />
      </div>
    </div>
    </div>
       <div class="row">
    <div class="col-6">
      <div class="form-group ">
        <input type="text" name="telefone_forn" placeholder="telefone" class="form-control " id="telefone_forn" />
      </div>
    </div>
    </div>
       <div class="row">
    <div class="col-6">
      <div class="form-group ">
        <input type="text" name="email_forn" placeholder="email" class="form-control " id="email_forn" />
      </div>
    </div>
    </div>
       <div class="row">
    <div class="col-6">
      <div class="form-group ">
        <input type="text" name="cnpj" placeholder="CNPJ" class="form-control " id="cnpj" />
      </div>
    </div>
    </div>
    <div class="row">
     <div class="col-6">
      <div class="input-group-prepend">
       <div class="custom-file">

     Arquivo: <input type="file" name="arquivo"  class="custom-file-input" id="customFileLang" required  accept=".jpg">
           <label class="custom-file-label" for="customFileLang">Selecione uma foto</label>
      </div>

  </div>
    </div>
    </div>
    <div class="form-group">

    <input type="hidden" name="id_fornc" value="">
    <input type="hidden" name="data_cad_forn" value="">
    </div>
   <div class="form-group">
        <div class="col-6">
            <button type="submit" id="butao"class="btn btn-primary">Cadastrar</button>
        </div>
    </div>

</form> 

eu estou enviando o formulário via ajax

 $("#forn_cad").submit(function(e) {
    var url2 = "mostra_forn.php";
    var url = "insere_forn.php"; 
     if (confirm('Tem certeza que quer cadastrar o Tipo de forncedor?')){ 

    $.ajax({
           type: "POST",
           url: url,
           data: $("#forn_cad").serialize(),
           success: function(data)
    {
                $("#mostra_forn").fadeOut(800, function(){
                $("#mostra_forn").load(url2).fadeIn().delay(2000);
               });
           }

         });
     }else{ 
           return false 
   }

    e.preventDefault();
});

so que mesmo que eu clique em cancelar envia o formulário

barra de upload

$(document).ready(function() {
    //elements
    var progressbox     = $('#progressbox');
    var progressbar     = $('#progressbar');
    var statustxt       = $('#statustxt');
    var submitbutton    = $("#butao");
    var myform          = $("#forn_cad");
    var output          = $("#output");
    var completed       = '0%';

    $(myform).ajaxForm({
        beforeSend: function() { 
            submitbutton.attr('disabled', '');
            statustxt.empty();
            progressbox.slideDown(); //exibe a barra de progresso
            progressbar.width(completed); //inicia em 0%
            statustxt.html(completed); //exibe o texto
            statustxt.css('color','#5e72e4'); //define a cor
        },
        uploadProgress: function(event, position, total, percentComplete) { 
            progressbar.width(percentComplete + '%') //atualiza o tamanho da barra
            statustxt.html(percentComplete + '%'); //atualiza o texto
            if(percentComplete>50)
                {
                    statustxt.css('color','#825ee4'); //troca a cor acima dos 50%
                }
            },
        complete: function(response) { // quando completar
            output.html(response.responseText); //exibe a resposta do seu arquivo php... podendo ser a imagem carregada
            myform.resetForm();  // reseta o form
            submitbutton.removeAttr('disabled'); //habilita o botão novamente
            progressbox.fadeOut(1000); // esconde a barra
            }
    });
});
7
  • Quem deveria ser e na linha e.preventDefault()? Provavelmente no seu console apareceu o erro de variável indefinida.
    – Woss
    23/07/2019 às 11:54
  • Qual botão cancelar?
    – LeAndrade
    23/07/2019 às 11:55
  • $("#forn_cad").submit(function(e) { 23/07/2019 às 11:58
  • Amigo tenta dar o e.preventDefault antes do return false: e.preventDefault(); return false; 23/07/2019 às 12:40
  • continua enviando 23/07/2019 às 12:46

1 Resposta 1

1

$("form").submit(function(e) {
  e.preventDefault(); // Precisa prevenir o comportamento padrão antes de qualquer coisa
  
  const isConfirmed = confirm('Tem certeza que quer cadastrar o Tipo de forncedor?');
  
  if (isConfirmed) {
    console.log('Ajax request...');
  } else {
    console.log('User did not confirm');
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>
  <input type="text" name="" required>
  <button>Cadastrar</button>
</form>

EDIT

Estava dando uma pesquisa sobre ajaxForm e acho que consegui identificar o seu problema.

O ideal é sempre entender os plugins, bibliotecas e frameworks que utiliza em seu projeto.

O ajaxForm é um plugin JQuery criado para facilitar ainda mais as requisições ajax, evitando que o desenvolvedor faça o trabalho de identificar os inputs para enviar a requisição. Veja abaixo uma requisição simples em ajax:

$('#formulario').on('submit', function () {
 
    // Armazenando informações do formulário em variáveis
    var nome = $("input[name=nome]").val();
    var email = $("input[name=email]").val();
    var mensagem = $("textarea[name=mensagem]").val();
 
    // Fazendo requisição AJAX
    $.post(this.action, {nome: nome, email: email, mensagem: mensagem}, function (resposta) {
        console.log(resposta);
    });
 
    // Retorna FALSE para que o formulário não seja enviado de forma convencional
    return false;     
});

Agora veja que utilizando o ajaxForm o código fica muito mais limpo:

$('#formulario').ajaxForm(function (resposta) {
    console.log(resposta);
});

Então o ajaxForm faz o "mapeamento" de seu formulário, inputs e atributos para criar a requisição, ou seja, como o seu elemento form no arquivo HTML já possui o atributo action definido, esse será o valor default da URL durante a requisição do ajaxForm.


O que eu sugiro a você, é eliminar essa chamada geral ao ajaxForm em seu código e atribuir as opções em uma variável da seguinte forma:

var output = $("#output");
var completed = '0%';
var options = {
    beforeSend: function() {
        submitbutton.attr('disabled', '');
        // Restante do código...
};

// $(myform).ajaxForm(); Remova esta instrução

E em sua requisição ajax você faz as alterações necessárias:

$("#forn_cad").submit(function(e) {
    var url2 = "mostra_forn.php";
    var url = "insere_forn.php";
    
    if (confirm('Tem certeza que quer cadastrar o Tipo de fornecedor?')) {

        //Adicionar os valores a variável options
        options.type = 'POST';
        options.url = url;
        options.data = $("#forn_cad").serialize();
        options.success = function(data) {
            $("#mostra_forn").fadeOut(800, function() {
                $("#mostra_forn").load(url2).fadeIn().delay(2000);
            });

        $.ajax(options);
     } else {
         return false;
     }
});

Conclusão Acredito que essa seja uma opção válida para o cenário de seu projeto mas lembre-se de que a cada requisição ajax, algumas propriedades do objeto devem ser alteradas, como por exemplo: type, url, data e success.

10
  • Por que precisa "prevenir o comportamento antes de qualquer coisa"?
    – Woss
    23/07/2019 às 12:57
  • ele ainda esta enviando mesmo que eu cancele 23/07/2019 às 13:43
  • @DanielRicardo, você sabe dizer se existe algum outro evento "amarrado" ao elemento? 23/07/2019 às 13:54
  • Não precisa de preventDefault(). Só o return false já cancela o submit. E mesmo que use o preventDefault(), ele não precisa vir antes porque o bloco da função é executado até o fim se não entrar no else que possui o return false.
    – Sam
    23/07/2019 às 13:58
  • a barra de upload, ela esta amarrado, é ela que esta dando conflto, como faço pra esse conflito não acontecer 23/07/2019 às 14:47

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .