Usar javascript:[funcion()] en un action de form html

Hekaly · #1 (**permalink**) 08/05/2012, 10:34

Buenas a todos.

Tengo algunos problemillas en la web que estoy haciendo pero este no lo he sabido solucionar y por eso recurro a vosotros.

Tengo un formulario multipagina en el que vas rellenando parametros seccion a seccion (cada una es un php), y una vez que lo e hecho, lo he metido en la web principal, en menu.php (que es llamado por un include desde index.php).

Mi idea es ir haciendo el formulario y pasando cada seccion estando siempre dentro del menu.php (sin cambiar ni recargar la pagina).

En metodo que uso para no tener que recargar la pagina es el siguiente.

Código:

function Enviar(_pagina,capa) {
    var ajax;
    ajax = ajaxFunction();
    ajax.open("POST", _pagina, true);
    ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    ajax.onreadystatechange = function() {
		if (ajax.readyState==1){
			document.getElementById(capa).innerHTML = " Aguarde por favor...";
			     }
		if (ajax.readyState == 4) {
                document.getElementById(capa).innerHTML=ajax.responseText; 
		     }}
	ajax.send(null);
}

Dentro del archivo menu.php tengo la siguiente llamada...

Código:

a href=javascript:Enviar('formulario/formulario.php','contenido') > Agregar</a>

Para que al ser llamado el formulario, no tenga que recargar la web.

Hasta ahi todo perfecto, el problema biene a la hora de ir pasando seccion a seccion y conservando los datos que voy introduciendo.

He probado por hacer lo mismo desde "action" pero nada

Código:

action="javascript:Enviar('formulario/formulario.php','contenido')"

He estado mirando por foros (incluido este) y he encontrado que use onsubmit en vez de action, pero sigue in cogerme los datos, otra posibilidad que he vsto es usar la siguiente forma "action=formulario/paso2.php enviar(/formulario/paso2.php, contenido);" pero tampoco.

Que es lo que puedo tener mal, a como deberia hacer esto. He pensado que desde action llamae a simplemente a una funcion js y esta funcion llame a la funcion enviar para seguir con el siguiente paso, pero no se si funcionara.

Otro problema que pienso es que como las secciones del formulario tiene codigo php y quiero que sea llamado por una funcion js es posible que no recoja los valores ya que php es para servidor y js ara cliente, pero aun asi, js deberia llamar bien a la web, y ahi que se encargue de cojer los datos, no se.

Ah por cierto: Para evitar posibles explicaciones, el codigo del formulario funciona perfectamente, me coge todos los datos, pero claro, voy cargando la pagina paso2.php aparte y no dentro de menu.php que es la idea, el problema esta en el action del form, o eso creo yo.

Muchas gracias por la ayuda.

maycolalvarez · #2 (**permalink**) 08/05/2012, 11:05

1 - no debes incluir código en el action, debes de incluirlo en el onsubmit y cancelar el submit real, puedes con solo hacer return false; al final

2 - en ajax necesitas verificar status==200 , consulte un manual de AJAX

caricatos · #3 (**permalink**) 08/05/2012, 11:10

Hola:

Te recomiendo que la página funcione sin depender de javascript y luego adaptes la llamada Ajax al formulario (el evento submit) para no recargar la página...

De tu código, evidentemente no pasas ningún parámetro, así que en el servidor no llega nada...

Para pasar parámetros por post, debes pasárselos con el método send(), de la misma manera que se hace como si fuera por url:

Ajax.send("param1=" + valor1 + "&param2=" + valor2);

Saludos

emprear · #4 (**permalink**) 08/05/2012, 11:13

Esta es otra forma de hacerlo

Código HTML:

Ver original<!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>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<style type="text/css">
/*<![CDATA[*/
 
/* estilos */ 
 
form{
width: 500px;
height: 300px;
display: block;
}
 
#paso1, #paso2,#paso3 {
width: 500px;
height: 300px;
border: solid 1px #000;
}
#paso2, #paso3{
display: none;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
/* script */
function paso1(){
document.getElementById('paso1').style.display='block';
document.getElementById('paso2').style.display='none';
document.getElementById('paso3').style.display='none';
}
function paso2(){
document.getElementById('paso1').style.display='none';
document.getElementById('paso2').style.display='block';
document.getElementById('paso3').style.display='none';
}
function paso3(){
document.getElementById('paso1').style.display='none';
document.getElementById('paso2').style.display='none';
document.getElementById('paso3').style.display='block';
}
 
function ver(){
alert(document.getElementById('nombre').value + '-' + document.getElementById('apellido').value);
}
 
//]]>
</script>
</head>
<body>
<p>
<a href="#" onclick="paso1();">uno</a> | <a href="#" onclick="paso2();">dos</a> | <a href="#" onclick="paso3();">tres</a>
</p>
<form action="x.php" method="post">
<div id="paso1">
Nombre : <input type="text" name="nombre" id="nombre" />
</div>
<div id="paso2">
Apellido: <input type="text" name="apellido" id="apellido" />
</div>
<div id="paso3">
<input type="button" name="procesar" onclick="ver();" value="procesar"/>
</div>
</form>
</body>
</html>

Creo que es má simple, al final puse solo un button, no un submit para que verifiques que los valores siguen estando ahi, aunque cada sección se oculte, el javascript se puede abreviar un poco, pero si no son muchos pasos se puede dejar asi

Saludos

Hekaly · #5 (**permalink**) 08/05/2012, 15:41

Muchas gracias a los tres por contestar tan rapido.

La verdad es que si, deberia aprender un poco mas de ajax (que lo unico que se es lo que voy nesesitando y algunos ejemplos, osea poco).

En cuento a "emprear" probare lo que dices, son 5 pasos asi que no son muchos, ademas de esa forma creo que me puedo evitar tener que ir recogiendo en cada paso todos los elementos introducidos y meterlos en <input hidden> para pasarlo por $_POST en el siguiente paso.

Aun asi probare las formas que me habeis recomendado los tres.

Hasta luego.