JQuery .submit() não está funcionando corretamente

Maycon Brito · Julho 12, 2013

Olá amigos,

estou incrementando o meu sistema inserindo a funcionalidade de carregar uma página dentro de uma div dinamicamente, ou seja, apenas a área central da página é atualizada. Para isto estou usando o JQuery. Porém, ainda no início estou tendo um problema que é o seguinte, quando submeto um FORM o mesmo tem que carregar a próxima página via JQuery-Ajax para enviar o post, para utilização dos dados nesta segunda página.

O engraçado é que não estou conseguindo pegar o .submit() do FORM sempre, sendo apenas em um caso. Vou postar abaixo o HTML das duas situações:

Neste código abaixo html o aviso de teste que criei dentro do FORM.submit() está sendo exibido.

<form id="form" accept-charset="utf-8" name="frmPadrao" method="POST" action="HTTP://localhost/fwsibe/index.php/acesso/listarSistemasValidar">


<br>


<fieldset id="tabelainfo" style="width: 560px;">


<legend style="color: #083C06;">


<b>Dados</b>


</legend>


<br>


<table id="tabelainfo">


<tbody>


<tr>


<td>


<b>SIBE:* </b>


</td>


<td>


<select name="slSibe">


</td>


</tr>


<tr>


<td>


<br>


</td>


</tr>


<tr>


<td colspan="2">


<input class="button" type="submit" value="Confirmar" name="btConfirmar">


</td>


</tr>


</tbody>


</table>


</fieldset>


<br>


<br>


</form>

Neste segundo código o aviso do .submit() não é exibido, ou seja, não é reconhecida a submissão do form:

<form id="form" accept-charset="utf-8" name="frmPadrao" method="POST" action="HTTP://localhost/sibe/index.php/almembal/motivoajustealm/pesquisar">

<br>


<fieldset id="tabelainfo" style="width: 560px;">


<legend style="color: #083C06;">


<b>Filtrar por:</b>


</legend>


<br>


<table id="tabelainfo">


<tbody>


<tr>


<td>


<b>SubTipo Produto:* </b>


</td>


<td>


<select name="slSubTipo">


</td>


</tr>


<tr>


<td>


<br>


</td>


</tr>


<tr>


<td colspan="2">


<input class="button" type="submit" value="Confirmar" name="btConfirmar">


</td>


</tr>


</tbody>


</table>


</fieldset>


<br>


<br>


<div>


<a title="" onclick="window.open('HTTP://localhost/sibe/index.php/almembal/motivoajustealm/incluir', '_blank', 'width=800,height=600,scrollbars=yes,status=yes,resizable=yes,screenx=0,screeny=0');" href="javascript:void(0);">Incluir</a>


</div>


<br>


<table id="tabelainfo">


<tbody>


<tr id="corpotabela">


<td align="center">Não existem Motivos de Ajuste cadastrados para esta pesquisa.</td>


</tr>


</tbody>


</table>

Abaixo o script JQuery que já está inicializado corretamente no HEAD da página, além disso, já o testei para outros enventos como $(this).click e está tudo ok.

$(document).ready(function() {


    $("#form").submit(function() {
        alert("SUBMIT FORM");
//        alert($(this));
//        console.log($(this));


//        $.post($(this).attr("action"), $(this).serialize(), function(data) {
//            $("#divCentral").html(data);
//        });

//        return false;

    });
});

Vocês poderiam me ajudar a encontrar o erro que faz com que o .submit() não seja reconhecido pelo JQuery?

Obrigado.

Bru_ce · Julho 12, 2013

Tenta assim amigo,
Essa sua tabela esta horrível, você também esqueceu de fechar o select e o seu form.
Dá uma arrumada no seu código:

Segue:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$(".button").click(function() {
alert("SUBMIT FORM");
//        alert($(this));
//        console.log($(this));
 
 
//        $.post($(this).attr("action"), $(this).serialize(), function(data) {
//            $("#divCentral").html(data);
//        });
 
return false;
 
});
});
 
 
</script>
</head>
 
<body>
<form id="form" accept-charset="utf-8" name="frmPadrao" method="POST" action="HTTP://localhost/sibe/index.php/almembal/motivoajustealm/pesquisar">
<br>
<fieldset id="tabelainfo" style="width: 560px;">
  <legend style="color: #083C06;"> <b>Filtrar por:</b> </legend>
  <br>
  <table id="tabelainfo">
    <tbody>
      <tr>
        <td><b>SubTipo Produto:* </b></td>
        <td><select name="slSubTipo">
          </select></td>
      </tr>
      <tr>
        <td><br></td>
      </tr>
      <tr>
        <td colspan="2"><input class="button" type="submit" value="Confirmar" name="btConfirmar"></td>
      </tr>
    </tbody>
  </table>
</fieldset>
</form>
<br>
<br>
<div> <a title="" onclick="window.open('HTTP://localhost/sibe/index.php/almembal/motivoajustealm/incluir', '_blank', 'width=800,height=600,scrollbars=yes,status=yes,resizable=yes,screenx=0,screeny=0');" href="javascript:void(0);">Incluir</a> </div>
<br>
<table id="tabelainfo">
  <tbody>
    <tr id="corpotabela">
      <td align="center">Não existem Motivos de Ajuste cadastrados para esta pesquisa.</td>
    </tr>
  </tbody>
</table>
</fieldset>
</body>
</html>

Maycon Brito · Julho 12, 2013

Olá @Bru_ce,

obrigado pela ajuda. O negócio é que eu copiei o código do console html do navegador, pois aqui na nossa empresa nós estamos utilizando um framework que está sendo desenvolvido por nós mesmos, e por isso ele gera a interface html de acordo com o nosso formulário, talvez este seja o motivo do form não ter sido fechado. Quanto o select, ele está fechado sim, só que na hora de copiar o código html eu não expandi o trecho referente a este componente, pois ele tem muitos elementos dentro, o que não acrescentaria em nada na resolução do problema.

Eu vou corrigir o form sim, mas acredito que o problema não seja este, pois fiz testes em outras telas em que o form está fechado e mesmo assim o problema persiste... :pinch:

Kakashi_Hatake · Julho 12, 2013

Sua dúvida não é sobre PHP. Vou mover para o fórum correto

PHP :seta: Javascript

Maycon Brito · Julho 15, 2013

Bru_ce,

eu conferi agora cedo aqui no código e tanto o <form> quanto a <div> estão sendo fechados corretamente, eu que esqueci de copiar esta parte do código.

Porém, o meu problema ainda persiste. Continuo na tentativa da solução.

Bru_ce · Julho 15, 2013

Cara, hospeda sua página em algum lugar e manda o link.

Fica mais fácil te ajudar.

abs

Edultra · Julho 15, 2013

Fera, o seguinte não estou vendo onde você chama o submit neste botão "incluir" você esta chamando um window.location não esta chamando nenhum ajax, jquery .load nada, por isso os dados não estão utilizando o submit, não é assim que funciona..., a chamada do jquery .submit só funciona quando for clicado em um botão com a função submit:

Isso:

<a title="" onclick="window.open('HTTP://localhost/sibe/index.php/almembal/motivoajustealm/incluir', '_blank', 'width=800,height=600,scrollbars=yes,status=yes,resizable=yes,screenx=0,screeny=0');" href="javascript:void(0);">Incluir</a>

É diferente disso:

<input class="button" type="submit" value="Confirmar" name="btConfirmar">

O que você quer, acredito eu é enviar os dados para um código php sem dar o refresh na tela, inserir ou fazer uma busca, leia este tutorial que ele trata exatamente disso:

http://rafaelcouto.com.br/envio-de-formulario-sem-refresh-com-jquery-php/

Maycon Brito · Julho 15, 2013

Olá Edultra,

vou ler agora o tutorial recomendado por você. Ele parece ser exatamente o que eu estou tentando fazer. Porém, enquanto isso, vou informar a origem do problema, afinal, acabei de descobrí-la, é o seguinte.

O formulário que está dando o problema citado neste tópico é carregado dinamicamente via JQuery-Ajax no centro da página, enquanto o restante da mesma continua estática. O que acontece é que os componentes carregados dinamicamente pelo ajax não interagem com o meu código JQuery, por isso o submit() do <form> acaba não sendo "visto" pelo meu código JQuery.

Abaixo tenho duas funções que ainda estou testando para carregar a página central dinâmica com Ajax. A primeira é comum, apenas para efeito de teste, enquanto a segunda eu estou construindo para que sempre envie o $_POST para a próxima página carregada pelo Ajax.

/**
 * Carrega na área central do template a url enviada por parâmetro
 *
 * @param {string} url endereço url da página a ser exibida na área central do template
 * @returns {undefined}
 */
function carregaUrl(url) {
    //alert("carregaUrl=" + url);
    $("#divCentral").load(url);
    console.log($('form').attr('name'));



}

function carregaUrl2(url) {

    $.ajax({
        type: "POST",
        url: url,
        data: '',
        
    }).done(function(){
      $("#divCentral").load(url);  
    });
      
}

Arquivado

JQuery .submit() não está funcionando corretamente

Recommended Posts

Maycon Brito 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bru_ce 53

Compartilhar este post

Link para o post

Compartilhar em outros sites

Maycon Brito 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Kakashi_Hatake 267

Compartilhar este post

Link para o post

Compartilhar em outros sites

Maycon Brito 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bru_ce 53

Compartilhar este post

Link para o post

Compartilhar em outros sites

Edultra 13

Compartilhar este post

Link para o post

Compartilhar em outros sites

Maycon Brito 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Orientação - Codificação Caracteres Especiais em Java

Não consigo carregar imagem do captcha no meu formulário

Estou criando uma calculadora de m2 e litros de tinta

Fóruns

Tempo Real

Informação importante