Ayuda a los gurus de javascript

V-P · #1 (**permalink**) 06/03/2009, 12:52

Bueno tenia la necesidad de enviar datos por método POST sin tener que usar un formulario, y buscando en Internet encontré un script que lo hacia y me sirvió de mucho pero ahora tengo la necesidad de enviar los datos pulsando un botón y no mediante un enlace como lo hace actualmente

Aquí esta el código

Código HTML:

<html> 
<head> 
<title>Enviando información por post</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
</head> 
 
<body> 
<script type="text/javascript" language="javascript"> 
	
	var form = document.createElement("form"); // crear un form
	with(form) {
		setAttribute("name", "myform"); //nombre del form
		setAttribute("action", ""); // action por defecto
		setAttribute("method", "post"); // method POST
	}
	
	
	var input = document.createElement("input"); // Crea un elemento input
	with(input) {
		setAttribute("name", "theInput"); //nombre del input
		setAttribute("type", "hidden"); // tipo hidden
		setAttribute("value", ""); // valor por defecto
	}
	form.appendChild(input); // añade el input al formulario
	
 
	document.getElementsByTagName("body")[0].appendChild(form); // añade el formulario al documento
	
window.onload=function(){
var my_links = document.getElementsByTagName("a");
for (var a = 0; a < my_links.length; a++) {
if (my_links[a].name=="post") my_links[a].onclick = function() {
	document.myform.action=this.href;
	document.myform.theInput.value=this.title;
	document.myform.submit();
	return false;}
}
 
}
 
</script> 
<h3>Enviando información por post</h3> 
<a href="ejemplo_post.php"  name="post" title="Este valor se enviará por post" >Pulsa aquí </a> para hacer POST<br> 
También puedes <a href="ejemplo_post.php"  name="post" title="Este valor también se envía por post" >pulsar aquí</a> para hacer otro POST<br> 
Esto es un<a href="ejemplo_post.php" > link normal</a> 
</body> 
 
</html>

hago cambios para que me envíe pulsando un botón pero no me funciona que es lo que debo cambiar para hacerlo.

Se que en esta linea

Código:

document.getElementsByTagName("a");

toma como objeto el dato del enlace

jeybi · #2 (**permalink**) 06/03/2009, 13:41

Puedes usar esto:

Código javascript:

Ver originaldocument.getElementById('postbotton').onclick = function(){
    document.myform.action=this.className;
    document.myform.theInput.value=this.title;
    document.myform.submit();
    return false;
}

En el atributo class del boton va el action del form:

Código html:

Ver original<input type="button" value="Enivar Form" title="Este valor se enviará por post" id='postbotton' class="ejemplo_post.php"/ >

Aunque yo te recomendaria usar CSS en el enlace para que paresca un boton, asi si el usuario tiene javascript desabilitado aun te lleva a 'ejemplo_post.php', solo que sin enviar nada.Ya tu con tu script muestras algun contenido alterno deacuerdo a si hay o no parametros.

buzu · #3 (**permalink**) 06/03/2009, 13:52

No entiendo por que quieres hacer eso, tu script al final de cuentas te crea un formulario. Por que no usar entonces un formulario desde el principio y asegurar máxima compatibilidad y accesibilidad?

V-P · #4 (**permalink**) 06/03/2009, 15:18

Cita:

Iniciado por buzu

No entiendo por que quieres hacer eso, tu script al final de cuentas te crea un formulario. Por que no usar entonces un formulario desde el principio y asegurar máxima compatibilidad y accesibilidad?

Si entiendo a lo que te refieres, y se que no es algo lógico hacer esto si tranquilamente se lo hace desde un formulario, y yo se eso pero el problema es que estoy haciendo un trabajo en el cual usaron Joomla! 1.5 para desarrollar la página y tengo un formulario creado en el breezingforms el cual tengo que enlazar con un formulario externo de pago por Internet, busque en todo lugar y no encontré la forma de hacerlo desde el breezingforms, así que mi única opción es introducir un código en javascript el cual obligue al breezingforms a enviar los datos por método POST al formulario externo ahora si alguien sabe la forma de hacerlo le estaría muy agradecido que me diga como lo hago.

Volviendo al tema

Gracias jeybi, yo revisando el código también encontré la forma de hacerlo pero creo que lo que me diste tu es mucho mejor, ahora me tope con otro problema que en este si estoy atado de manos, ¿Como hago para que el script me funcione en Internet Explorer 7 o superior?

Revise en todos los demas exploradores y todos trabajaron normalmente y enviaron los datos, pero el IE no lo hace y me muestra este error

Código:

'document.myform' es nulo o no es un objeto

El Código final que obtuve es este

Código HTML:

<script type="text/javascript" language="javascript"> 
	var form = document.createElement("form"); // crear un form
	with(form) {
		setAttribute("name", "myform"); //nombre del form
		setAttribute("action", ""); // action por defecto
		setAttribute("method", "post"); // method POST
	}
	var input = document.createElement("input"); // Crea un elemento input
	with(input) {
		setAttribute("name", "theInput"); //nombre del input
		setAttribute("type", "hidden"); // tipo hidden
		setAttribute("value", ""); // valor por defecto
	}
	form.appendChild(input); // añade el input al formulario
	
	document.getElementsByTagName("body")[0].appendChild(form); // añade el formulario al documento
	
window.onload=function(){
document.getElementById('postbotton').onclick = function(){
	document.myform.action="resultado.php";
	document.myform.theInput.value=document.getElementById('valor').value
	document.myform.submit();
	return false;}
}
</script> 
<h3>Enviando información por post</h3> 
<p>
  <input name="valor" type="text" id="valor">
</p>
<p>
  <input type="button" name="post" id="postbotton" value="Bot&oacute;n">
</p>

Ayuda con esto mas plz.

jeybi · #5 (**permalink**) 06/03/2009, 16:06

Ni idea, prueba con document.forms['myform'].XXXX <- las diferentes propiedades que usas

V-P · #6 (**permalink**) 06/03/2009, 16:21

Ya probé y no me ejecuta

ahora me dice que

document.forms.myform es nulo

yo supongo que es porque se crea ahí, asumo que de alguna forma se debería declarar al formulario ya sea como una variable o alguna otra cosa pero no se como, de todos modos gracias por tu ayuda jeybi

buzu · #7 (**permalink**) 06/03/2009, 16:55

agrega:

setAttribute("id", "myForm");

a tu with(form)

y en lugar de
document.myform
usa
document.getElementById('myForm')
en las últimas lineas.

V-P · #8 (**permalink**) 07/03/2009, 08:32

Cita:

Iniciado por buzu

agrega:

setAttribute("id", "myForm");

a tu with(form)

y en lugar de
document.myform
usa
document.getElementById('myForm')
en las últimas lineas.

Muchas gracias buzu, ahí estaba el problema, aunque también tuve que aumentar la linea

Código:

setAttribute("id", "theInput");

De nuevo muchas gracias.

buzu · #9 (**permalink**) 07/03/2009, 13:39

Que bueno que este solucionado, suerte.