Ajax + JQuery com 2 submits pro mesmo form

Assuntos Gerais
#1

Bom dia,

Tenho um formulário com dois botões e preciso que ele seja enviado para caminhos diferentes de acordo com o botão que foi clicado, estou tentando usar ajax + jquery.
So que do modo que eu testei ate agora ele sempre se amarra no primeiro botão que eu clicar, mesmo se eu clicar no outro ele executa a função do primeiro botão clicado.
Segue o codigo:

<html>
<head>
	<script type="text/javascript" src="../jquery/js/jquery-1.8.3.js"></script>
	<script type="text/javascript" src="../jquery/js/jquery-ui-1.9.2.custom.min.js">
	</script><link type="text/css" href="../jquery/css/redmond/jquery-ui-1.9.2.custom.css" rel="stylesheet"/>
	<script type="text/javascript">	
	jQuery(document).ready(function(){				
		var requestRunning = false;
		
		$( "#enviar" ).button().click(function() {
			if (requestRunning) {
				return;
			}
						
			jQuery('#ajax_form').submit(function(){
				var dados = jQuery( this ).serialize();				
				var opt1 = {
					type: "POST",
					url: "processa.php",					
					cache: false,
					success: function(){						
						alert( "teste 1" );
					}
				};
				requestRunning = true;
				$.ajax(opt1);								
				return false;				
			});			
		});
			
		$( "#testar" ).button().click(function() {			
			if (requestRunning) {
				return;
			}
						
			jQuery('#ajax_form').submit(function(){
				var dados2 = jQuery( this ).serialize();					
				var opt2 = {
					type: "POST",
					url: "processa2.php",					
					cache: false,
					success: function(){						
						alert( "teste 2" );
					}
				};
				requestRunning = true;
				$.ajax(opt2);				
				return false;				
			});			
		});				
	});
	</script>
</head>
<body>
	<form method="post" action="" id="ajax_form">
		<label><input type="hidden" name="id" value="" /></label>
		<label>Nome: <input type="text" name="nome" value="" /></label>
		<label>Email: <input type="text" name="email" value="" /></label>
		<label>Telefone: <input type="text" name="telefone" value="" /></label>

		<label><input type="submit" name="enviar" value="Enviar" id="enviar" /></label>
		<label><input type="submit" name="enviar" value="Testar" id="testar" /></label>
	</form>
</body>
</html>

Se alguem puder me ajudar

#2

coloca os botões fora do form

#3

Os botões fora do form não resolverão o problema, pois ele continua sem saber qual botão foi clicado.

Não é ideal já que o certo é cada botão submit trabalhar para um formulário específico, mas se realmente precisa fazer os dois estarem no mesmo formulário, troque-os por button simples ao invés de submit e declare uma função em cada botão passando o id:

<label><input type="submit" name="enviar" value="Enviar" id="enviar" onclick="javascript:enviaForm(this.id);" /></label>  
<label><input type="submit" name="enviar" value="Testar" id="testar" onclick="javascript:enviaForm(this.id);" /></label>

Depois crie a função:

function enviaForm(idBotao) {
    var form = document.forms[0];
    if (idBotao == 'enviar') {
       form.action = "pagina_enviar.html";
    }
    if (idBotao == 'testar') {
        form.action = "pagina_testar.html";
    }
    form.submit(); // vai enviar para o action modificado nos if's.    
}

Como disse anteriormente, não é o ideal, mas é uma solução viável.

Outra coisa, se você usa ajax, mais um motivo para não utilizar submit, pois a página não precisa ser recarregada correto?

O exemplo que fiz usa javascript puro, mas se usar a mesma lógica, pode colocar diretamente no jQuery, basta apenas mudar os botões.

Espero ter ajudado.

#4

Olá amigos,

Através das dicas e com o plugin JqueryForm (http://www.malsup.com/jquery/form/#html), consegui chegar no resultado conforme o link abaixo.

http://www.wlocation.com/testes/

Meu problema agora é com as div #status, quando o registro inserido com sucesso no banco de dados, é retornado a mensagem de “Reservado” apenas na célula do dia 1/mesa 1.

Via Jquery é ocultado a div=#escrever e exibido a div=#status.

Como eu poderia fazer dezenas de submits cada um com uma div correspondente, ou ontra forma de retorna a mensagem de “reservado” para cada célula?

Pensei em trabalhar com Array ou o método fieldValue, mas não consegui a solução.

Por favor ajude-me.

Desde já agradeço

Abaixo código do link:

Link para download do código-fonte:
https://mega.co.nz/#!XR1TzQjT!4zlB3ezFUcqEj1hQsl89P2JxGak3Gt5cZLDr9VwEIWQ

Código PHP:
envia.php

[code]<?php

// Informações para conexão
$host = "localhost";
$usuario = "root";
$senha = "";
$banco = "test";

// Realizando conexão e selecioando banco de dados
$conn = mysql_connect($host, $usuario, $senha) or die(mysql_error());
$db = mysql_select_db($banco, $conn) or die(mysql_error()); 
mysql_set_charset('utf8');


// Recuperamos os valores dos campos através do método POST
$id_cliente = $_POST["id_cliente"];
$id_mesa = $_POST["id_mesa"];
$dia = $_POST["dia"];

// Verifica se o nome foi preenchido
if (empty($id_cliente)) {
	echo "Entre com o cliente";
} 

// Verifica se a mensagem foi digitada
elseif (empty($id_mesa)) {
	echo "Entre com a mesa";
} 
// Verifica se a mensagem nao ultrapassa o limite de caracteres
elseif (empty($dia)) {
	echo "Entre com o dia";
} 
// Se não houver nenhum erro
else {
	// Inserimos no banco de dados
	$query = mysql_query("INSERT INTO mesa VALUES ('', '".$id_cliente."', '".$id_mesa."', '".$dia."')");
	
	// Se inserido com sucesso
	if ($query) {
		echo false;
	} 
	
	// Se houver algum erro ao inserir
	else {
		echo "Erro ao inserir o registro";
	}
}
?>

Código HTML/Java Script:
index.php

[code]

Envio de formulário sem refresh com JQuery/PHP

#status {
display: none;
}

  Dia 1 Dia 2
Mesa 1 
</td>
<td>

</td>
Mesa 2 
</td>
<td>

</td>
[/code]
#5