Formulario sólo con Javascript

rodeirojg · #1 (**permalink**) 03/10/2012, 00:34

Hola gente del foro, nuevamente estoy pidiendo su ayuda!

Tengo un formulario donde ya pude validar los campos con Javascript, el tema es ¿se puede reemplazar el clásico enviar.php por alguna función en Javascript?
¿Por qué digo esto? Porque de php no sé casi nada y no quiero que el "Gracias por haberse contactado" sea una ventana nueva archi gigante. Eventualmente me serviría una ventana emergente pequeña o una leyenda que aparezca en algún lado.

Bueno, me dejo de chácharas, les dejo el código:

Código HTML:

<head> 

<script type="text/javascript"> 

function validar(frm) { 

  var resultado1 = frm.nombre.value.length > 3; 
  var resultado2 = /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,6})$/.test(frm.email.value); 
  var resultado3 = frm.comentario.value.length > 3; 
   
  document.getElementById('error').style.visibility = (resultado1) ? 'hidden':'visible'; 
  document.getElementById('error').style.color = (resultado1) ? '#999':'red'; 
  document.getElementById('input').style.borderColor = (resultado1) ? '#999':'red'; 
  document.getElementById('input').style.color = (resultado1) ? '#999':'red'; 
   
  document.getElementById('error2').style.visibility = (resultado2) ? 'hidden':'visible'; 
  document.getElementById('error2').style.color = (resultado2) ? '#999':'red'; 
  document.getElementById('input2').style.borderColor = (resultado2) ? '#999':'red'; 
  document.getElementById('input2').style.color = (resultado2) ? '#999':'red'; 
   
  document.getElementById('error3').style.visibility = (resultado3) ? 'hidden':'visible'; 
  document.getElementById('error3').style.color = (resultado3) ? '#999':'red'; 
  document.getElementById('input3').style.borderColor = (resultado3) ? '#999':'red'; 
  document.getElementById('input3').style.color = (resultado3) ? '#999':'red'; 
   
  return  (resultado1 && resultado2 && resultado3); 
} 

</script> 

</head> 
<body> 
<form action="enviar.php" method="post" class="tipo" onsubmit="return validar(this)"> 

Nombre<input type="text" name="nombre" id="input" style="border-width: 1px; border-style: solid; border-color: #999"/> 
<p id="error" style="visibility:hidden">Longitud invalida</p> 

Email: 
<input type="text" name="email" id="input2" style="border-width: 1px; border-style: solid; border-color: #999"/> 
<p id="error2" style="visibility:hidden">E-mail invalido</p> 

Comentario: 
<textarea cols="30" rows="10" name="comentario" id="input3" style="border-width: 1px; border-style: solid; border-color: #999"></textarea> 
<p id="error3" style="visibility:hidden">Texto no valido</p> 

<input type="submit" /> 

</form> 

</body> 
</html>

Dradi7 · #2 (**permalink**) 03/10/2012, 00:43

Primero de todas maneras necesitas el action del formulario si deseas enviar la informacion a la otra pagina php.

Segundo puedes usar ajax para que envies la informacion a un PHP sin necesidad de recargar la pagina

Saludos

caricatos · #3 (**permalink**) 03/10/2012, 01:02

Hola:

El formulario puede también enviarse a un iframe oculto, y desde esa ventana puede comunicarse con la ventana principal como el objeto parent...

Por ejemplo, la recepción puede tener un script así:

window.onload = parent.recibido('mensaje...');

Saludos

rodeirojg · #4 (**permalink**) 03/10/2012, 10:39

Cita:

Iniciado por caricatos

Hola:

El formulario puede también enviarse a un iframe oculto, y desde esa ventana puede comunicarse con la ventana principal como el objeto parent...

Por ejemplo, la recepción puede tener un script así:

window.onload = parent.recibido('mensaje...');

Saludos

La idea parece genial, pero mis conocimientos son algo reducidos. Dónde o cómo iría el script? y cómo puede enviarse como iframe oculto?

emprear · #5 (**permalink**) 03/10/2012, 12:41

Cita:

Iniciado por rodeirojg

Porque de php no sé casi nada ?

Cita:

Iniciado por rodeirojg

La idea parece genial, pero mis conocimientos son algo reducidos. Dónde o cómo iría el script? y cómo puede enviarse como iframe oculto?

@rodeirojg
francamente esto se torna dificil, ¿cual es la idea de ponerse a hacer una aplicación Web que involucra javascript y php sin saber javascript y php?

Te doy una solución, pero fin de cuentas creo que es más el mal que el bien que pueda hacerte

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" />
<script type="text/javascript">
//<![CDATA[
/* script */
function mensaje(texto){
document.getElementById('mensaje').innerHTML = texto;
}
//]]>
</script>
</head>
<body>
<form action="test.php" target="resultados">
    <input type="submit" value="enviar"/>
</form>
<iframe id="resultados" name="resultados" src="about:blank" width="0" height="0" style="display: none;"></iframe>
<div id="mensaje">
</div>
</body>
</html>

test.php

Código PHP:

Ver original<?php
/// proceso el form, si todo ok
?>
 
<script type="text/javascript">
//<![CDATA[
/* script */
parent.mensaje('Se proceso el form');
//]]>
</script>
 
<?php
//else
?>
 
<script type="text/javascript">
//<![CDATA[
/* script */
//parent.mensaje('Error al procesar');
//]]>
</script>

Estas son cosas muy elementales (y no es una apreciación personal), así que te sugiero que antes de volver a querer despejar una duda en el foro, agarres los libros

Saludos

rodeirojg · #6 (**permalink**) 03/10/2012, 20:21

Gracias por la solución emprear, la voy a implementar a ver cómo me resulta.

Aprovecho para despejarte algunas dudas: ¿Por qué estudias php, javascript, etc? Por mi parte todo lo que alguna vez estudié es para poder trabajar con esa determinada herramienta (mas allá que lo que estudie me guste).

El tema es que muchos de los fanáticos de todos estos temas saben poco de negocios. Yo estoy aprendiendo y dentro de esas cosas que aprendo entiendo que para que algunos negocios vayan adelante, es indispensable saber encontrar las soluciones a tiempo, por eso no veo manera que lo que me hayas proporcionado haya sido para mal. Desafortunadamente no tengo un mes para ponerme a estudiar, cuando lo que busco es un simple código en php ya que lo que yo desarrollo es sólo html.
También soy curioso y tengo una manera de aprender mucho mas efectiva y es con el camino a la inversa, casi todos los códigos los analizo y trato de comprenderlos al revés, en vez de generarlos veo cómo otros lo hicieron para entender su funcionamiento.

Como ves, todo depende de cómo se lo mire. Tu respuesta en mi caso fue para bien!

emprear · #7 (**permalink**) 03/10/2012, 21:35

Si, todo es posible, pero el punto es que así solo encontrás una solución puntual a un problema puntual. en la medida en que se te presenten nuevos problemas y desafíos, sin los conocimientos básicos, te vas a ver en problemas.
No siempre te vas a encontrar con usuarios que dispongan del tiempo y la buena voluntad para escribirte un código que necesites.
suerte