Esconder DIV após submit

[tiagocaus 1]

Preciso esconder uma div e mostra a outra com o resultado após o submit.

Estou usando esse código:

 

$(document).ready(function(){
	$('#conteudo').hide();

	$('#button').click(function(event){

		$('form#form1').submit(function(event){
			$("#form").hide("slow");
			$("#conteudo").show("slow"); 
			event.preventDefault();
		});

	});
	

	$('#mostrar').click(function(event){
		event.preventDefault();
		$("#form").show("show");
		$("#conteudo").hide("show");
	});
});

 

 

Ele esta escondendo e aparecendo, mas não executa o submit.

[William Bruno 1501]

troca:

	$('#button').click(function(event){

 

$('form#form1').submit(function(event){

$("#form").hide("slow");

$("#conteudo").show("slow");

event.preventDefault();

});

 

});

por:

$('form#form1').submit(function(event){

$("#form").hide("slow");

$("#conteudo").show("slow");

event.preventDefault();

});

[tiagocaus 1]

Fiz a troca, mas o envio do form não acontece. Vou postar meu form a qui para você ver.

 

<div class="form-actions clearfix" id="form">
<form action="" method="GET" name="form1" id="form1" class="form-inline" role="form">
	<label class="inline">
		<input class="form-control" type="text" name="date-range-picker" id="id-date-range-picker-1" placeholder="Selecione a data" />
	</label>
        
        
    <button type="submit" id="button" name="button" class="btn btn-success btn-sm"><i class="icon-save bigger-110"></i> Salvar</button>
	<input type="hidden" name="MM_insert" value="form1" />
</form>
</div>




<table class="table table-hover" id="conteudo">
            <thead>
              <tr>
                <th>Data</th>
                <th>Histórico</th>
                <th>Plano de conta</th>
                <th>Valor</th>
              </tr>
            </thead>
            <tbody>
            <?php do { ?>
              <tr>
                <td><?php echo $row_rs['data']; ?></td>
                <td><?php echo $row_rs['nome']; ?></td>
                <td><?php echo $row_rs['planoDeConta']; ?></td>
                <td><?php echo $row_rs['valor']; ?></td>
              </tr>
            <?php } while ($row_rs = mysql_fetch_assoc($rs)); ?>
            </tbody>
        </table>

 

 

Estou usando GET somente como teste, para ver se esta enviando.

[William Bruno 1501]

sim, não acontece pq vc impediu com o event.preventDefault();

 

Foi isso mesmo que vc disse para o código fazer. Qual a dúvida ?

[tiagocaus 1]

Eu quero que envie e faça a troca.

[William Bruno 1501]

vc entende como funciona a requisição do formulário ?

 

e os instantes em que o js e o php rodam ?

 

 

Depois que vc enviar o form tradicionalmente, uma requisição http será enviada. Nesse instante, o js não terá mais controle do que acontece, e a página será recarregada novamente, pois vc acabou de enviá-la para o server-side.

 

Dai então, o seu javascript será esvaziado, e todas as variaveis e funções que haviam na memória serão reiniciadas, logo, da forma que vc está pensando, é impossível usar js + form.

 

 

O que vc deve fazer, é identificar com php o envio, e ai sim esconder os teus elementos com server-side.

Ou então, fazer todo o envio com ajax, dessa forma evitando o processamento do request http, e ainda tendo o js na memória.

[tiagocaus 1]

Eu preciso fazer isso como falei, mas não estou sabendo.

[William Bruno 1501]

Vc não tá conseguindo, pq não dá.

 

Entendeu oque eu disse acima ?