Datos enviados de formulario mediante alerta

Juandavo · #1 (**permalink**) 14/07/2014, 14:21

Hola a todos, tengo un formulario FORM html con JS y PHP en una página web y funciona correctamente, siempre llegan los correos con los datos del formulario.

El problema es que cuando pongo enviar se me sale de la página web y me muestra el mensaje de "gracias sus datos fueron enviados correctamente"

Lo que quiero es que ese mensaje de "gracias ... " me salga ahi mismo con una alerta o notificación sin salisre de la página web ... Es posible ? Ojo no tengo muchos conocimientos en php.

FORMULARIO:

Código HTML:

<form action="prose-form.php" method="post" class="contact-form"  onsubmit="return validar(this);">				
			<div class="formulario">
				<div class="column">
					<label for="nombre">Nombre <span>(requerido)</span></label>
					<input type="text" name="nombre" class="form-input" onblur="revisar(this);"/>
					<br>
					<label for="email">Email <span>(requerido)</span></label>
					<input type="email" name="email" class="form-input" onblur="revisar(this); revisaremail(this);"/>
					<br>
					<label for="empresa">Empresa <span></span></label>
					<input type="text" name="empresa" class="form-input" />
                    <br>
                    <label for="ciudad">Ciudad <span>(requerido)</span></label>
					<input type="text" name="ciudad" class="form-input" onblur="revisar(this);"/>
                    <br>
                    <label for="telefono">Teléfono <span>(requerido)</span></label>
					<input type="text" name="telefono" class="form-input" onblur="revisar(this);"/>
                    <br>
                    <label for="ruc">Ruc <span>(requerido)</span></label>
					<input type="text" name="ruc" class="form-input" onblur="revisar(this);"/>
                    <br>
				</div>
				
				<div class="column">
					<label for="mensaje">Mensaje </label>
					<textarea name="mensaje" class="form-input" ></textarea>
				</div>				
				
				<input class="form-btn" type="submit" value="Enviar Mensaje"/>
			</div>		
		</form>

JS:

Código:

function revisar(elemento) {
    if (elemento.value==""){
        elemento.className='error';
    } else {
        elemento.className='form-input';
    }
}

function revisaremail(elemento) {
    if (elemento.value!=""){
        var dato = elemento.value;
        var expresion = /^([a-zA-Z0-9_.-])+@(([a-zA-z0-9-])+.)+([a-zA-Z0-9-]{2,4})+$/;
        if (!expresion.test(dato)) {
            elemento.className='error';
        } else {
        elemento.className='form-input';
        }
	}
}


function validar(form) {
  if(form.nombre.value=="") { //Si este campo está vacío
    alert('No has escrito tu nombre'); // Mensaje a mostrar
    return false; //devolvemos un valor negativo
  }
  
  if(form.email.value=="") { //Si este campo está vacío
    alert('No has escrito tu e-Mail'); // Mensaje a mostrar
    return false; //devolvemos un valor negativo
  }
  
  if(form.telefono.value=="") { //Si este campo está vacío
    alert('No has escrito tu telefono'); // Mensaje a mostrar
    return false; //devolvemos un valor negativo
  }
  
  if(form.ciudad.value=="") { //Si este campo está vacío
    alert('No has escrito tu ciudad'); // Mensaje a mostrar
    return false; //devolvemos un valor negativo
  }
  
  if(form.ruc.value=="") { //Si este campo está vacío
    alert('No has escrito tu ruc'); // Mensaje a mostrar
    return false; //devolvemos un valor negativo
  }
 
  return true; // Si esta todo bien, devolvemos Ok, positivo
}

PHP:

Código PHP:

  <?php

 
 if(!empty($_POST['nombre']) AND !empty($_POST['email']) AND !empty($_POST['telefono']) AND !empty($_POST['ciudad']) AND !empty($_POST['ruc'])){

 
$to ="[email protected], [email protected]";

$headers = "Content-Type: text/html; charset=iso-8859-1\n"; 

$headers .= "From: [email protected]"."\r\n";

$user = "[email protected]";

$tema="Contacto desde el Sitio Web";

$mensaje="

<table border='0' cellspacing='2' cellpadding='2'>

  <tr>

    <td width='20%' align='center' bgcolor='#FFFFCC'><strong>Nombre:</strong></td>

    <td width='80%' align='left'>$_POST[nombre]</td>

  </tr>

  <tr>

    <td align='center' bgcolor='#FFFFCC'><strong>E-mail:</strong></td>

    <td align='left'>$_POST[email]</td>

  </tr>

   <tr>

    <td width='20%' align='center' bgcolor='#FFFFCC'><strong>Empresa:</strong></td>

    <td width='80%' align='left'>$_POST[empresa]</td>

  </tr>

  <tr>

    <td width='20%' align='center' bgcolor='#FFFFCC'><strong>Telefono:</strong></td>

    <td width='80%' align='left'>$_POST[telefono]</td>

  </tr>

  <tr>

    <td width='20%' align='center' bgcolor='#FFFFCC'><strong>Ciudad:</strong></td>

    <td width='80%' align='left'>$_POST[ciudad]</td>

  </tr>

  <tr>

    <td width='20%' align='center' bgcolor='#FFFFCC'><strong>Ruc:</strong></td>

    <td width='80%' align='left'>$_POST[ruc]</td>

  </tr>

  <tr>

    <td align='center' bgcolor='#FFFFCC'><strong>Comentario:</strong></td>

    <td align='left'>$_POST[mensaje]</td>

  </tr>

</table>

";

@mail($to,$tema,$mensaje,$headers,$user); 

echo "Gracias por sus comentarios. Pronto nos comunicaremos con usted";

} else {

    echo "No se puede enviar el formulario, verifica los campos";

}

?>

Espero su pronta ayuda ... de antemano GRACIAS !

thedaket · #2 (**permalink**) 14/07/2014, 15:48

Se llama AJAX amigo

jQuery AJAX

lo que quieres hacer lo puedes implementar en el success

Saludos

Juandavo · #3 (**permalink**) 15/07/2014, 08:44

Cita:

Iniciado por thedaket

Se llama AJAX amigo

jQuery AJAX

lo que quieres hacer lo puedes implementar en el success

Saludos

Gracias por la respuesta pero para ser sincero no tengo ni idea de cómo hacerlo y no tengo nada de conociemientos de ajax ....

thedaket · #4 (**permalink**) 15/07/2014, 10:33

Muy sencillo le colocas un atributo id a tu formulario ej: id="form-registro"

Ahora en jquery seria lo siguiente:

$("form-registro").submit(function(e){
e.preventDefault();
url = $(this).attr('action');
$.ajax({
url: url,
type: "POST",
success: function(r) {
alert('Mensaje enviado');
}
});
});

Y en esto en tu validacion en vez de un return true pondrias
$("form-registro").submit();

esto es una opcion rapida en el link que te deje vienen mas configuraciones

Juandavo · #5 (**permalink**) 15/07/2014, 11:03

Cita:

Iniciado por thedaket

Muy sencillo le colocas un atributo id a tu formulario ej: id="form-registro"

Ahora en jquery seria lo siguiente:

$("form-registro").submit(function(e){
e.preventDefault();
url = $(this).attr('action');
$.ajax({
url: url,
type: "POST",
success: function(r) {
alert('Mensaje enviado');
}
});
});

Y en esto en tu validacion en vez de un return true pondrias
$("form-registro").submit();

esto es una opcion rapida en el link que te deje vienen mas configuraciones

Ahora cómo o dónde pongo estos códigos que me das ? estoy algo perdido ... no tengo conocimiento ni php ni jquery y sería de gran ayuda que me digas por fa en qué parte aumento estos dódigos que me das o cómo quedaría mi código que envié ..

Saludos

hnevado · #6 (**permalink**) 15/07/2014, 12:35

Hola,

Te pongo un ejemplo sencillo, que espero que te sirva:

Como puedes ver en el siguiente código, creamos un formulario con 2 campos: Nombre y mensaje más un botón con identificador contact_ok.

Código HTML:

<form name="contact_form" id="contact_form" method="POST" action="#">
<p> Tu nombre </p> <input type="text" name="nombre" id="nombre"> </p>
<p> Tu mensaje </p> <input type="text" name="msj" id="msj"> </p>
<p> <input type="button" id='contact_ok' value='Enviar'></p>

Una vez tenemos el formulario hecho en HTML, vamos a la parte de JQuery. JQuery deberá realizar la llamada a nuestro fichero PHP pasándole los datos introducidos por el usuario. (Este código lo colocamos entre <head> y </head> después de haber llamado al js de jquery)

Código:

$("#contact_ok").click(function (){
				var formulario = $('#contact_form').serialize();
				$.ajax({
				 type: "POST",
				 dataType: 'json',
				 url: "mi_pagina.php",
				 data: formulario,
				 success:function(respuesta){											
				   alert(respuesta.mensaje);
				    location.reload();
				 }
																			
			   }); // fin $.ajax  
			 });

Lo que hemos hecho ha sido recoger los datos que el usuario ha introducido, para ello hemos utilizado serialize, después hacemos una llamada ajax, indicando que el tipo de dato será json, utilizaremos post y la página php se llama mi_pagina.php.

El respuesta.mensaje viene del siguiente fichero PHP, como ahora verás respuesta es un objeto vacio que creamos.

PHP

Código PHP:

  <?php
      $respuesta=new stdClass();
      //Aqui recoges el valor de las variables y devuelves en un respuesta->mensaje el mensaje que se mostrara al usuario
      //Por ejemplo: respuesta->mensaje="Error - el campo nombre no puede estar vacio"
      echo json_encode($respuesta);
?>

Lo he ido haciendo al momento, creo que no se me ha pasado nada y está todo correcto. Espero que te sirva, si tienes cualquier duda al generar el PHP correspondiente, dímelo y te ayudo a generarlo.

Un saludo y suerte!

Juandavo · #7 (**permalink**) 15/07/2014, 15:31

Cita:

Iniciado por hnevado

Hola,

Te pongo un ejemplo sencillo, que espero que te sirva:

Como puedes ver en el siguiente código, creamos un formulario con 2 campos: Nombre y mensaje más un botón con identificador contact_ok.

Código HTML:

<form name="contact_form" id="contact_form" method="POST" action="#">
<p> Tu nombre </p> <input type="text" name="nombre" id="nombre"> </p>
<p> Tu mensaje </p> <input type="text" name="msj" id="msj"> </p>
<p> <input type="button" id='contact_ok' value='Enviar'></p>

Una vez tenemos el formulario hecho en HTML, vamos a la parte de JQuery. JQuery deberá realizar la llamada a nuestro fichero PHP pasándole los datos introducidos por el usuario. (Este código lo colocamos entre <head> y </head> después de haber llamado al js de jquery)

Código:

$("#contact_ok").click(function (){
				var formulario = $('#contact_form').serialize();
				$.ajax({
				 type: "POST",
				 dataType: 'json',
				 url: "mi_pagina.php",
				 data: formulario,
				 success:function(respuesta){											
				   alert(respuesta.mensaje);
				    location.reload();
				 }
																			
			   }); // fin $.ajax  
			 });

Lo que hemos hecho ha sido recoger los datos que el usuario ha introducido, para ello hemos utilizado serialize, después hacemos una llamada ajax, indicando que el tipo de dato será json, utilizaremos post y la página php se llama mi_pagina.php.

El respuesta.mensaje viene del siguiente fichero PHP, como ahora verás respuesta es un objeto vacio que creamos.

PHP

Código PHP:

  <?php

      $respuesta=new stdClass();

      //Aqui recoges el valor de las variables y devuelves en un respuesta->mensaje el mensaje que se mostrara al usuario

      //Por ejemplo: respuesta->mensaje="Error - el campo nombre no puede estar vacio"

      echo json_encode($respuesta);

?>

Lo he ido haciendo al momento, creo que no se me ha pasado nada y está todo correcto. Espero que te sirva, si tienes cualquier duda al generar el PHP correspondiente, dímelo y te ayudo a generarlo.

Un saludo y suerte!

Algo comprendo pero no se como ponerlo en mi código ....

xerifandtomas · #8 (**permalink**) 15/07/2014, 15:55

Cita:

Iniciado por Juandavo

Algo comprendo pero no se como ponerlo en mi código ....

Necesitas incar codos y estudiar, aqui estamos para ayudar, intentar orientar y solucionar problemas concretos, pero si no dispones de unos conocimientos minimos, todo te puede sonar a chino. Y creo es lo que te esta pasando, te han facilitado codigo con el que deberias poder resolver tu problema, pero si no sabes que hacer con el o donde debes de colocarlo es que te faltan unos conocimientos basicos que deberias adquirir primero, si en la adquisicion de esos conocimientos tienes dudas, podemos ayudarte, pero no es finalidad de este foro, creo, relizar el trabajo de otro.

fido-strike · #9 (**permalink**) 15/07/2014, 18:00

Y este tema no deberia estar en PHP, pero bueno, ya que estamos, suerte!

Juandavo · #10 (**permalink**) 17/07/2014, 15:43

Cita:

Iniciado por xerifandtomas

Necesitas incar codos y estudiar, aqui estamos para ayudar, intentar orientar y solucionar problemas concretos, pero si no dispones de unos conocimientos minimos, todo te puede sonar a chino. Y creo es lo que te esta pasando, te han facilitado codigo con el que deberias poder resolver tu problema, pero si no sabes que hacer con el o donde debes de colocarlo es que te faltan unos conocimientos basicos que deberias adquirir primero, si en la adquisicion de esos conocimientos tienes dudas, podemos ayudarte, pero no es finalidad de este foro, creo, relizar el trabajo de otro.

Es muy lamentable tu comentario ya que acá en este foro sin han podido ayudarme de esa manera y he visto muchos casos que si los ayudan así .... Cuando me ponen otros tipos de códigos como jquery o java que yo no sé obvio se me hace chino y se me hace re complicado adaptarlo a mi código, esa es la razón por la cual pongo mi código para que puedan utilizarlo y para que puedan ayudarme mediante mi código .... No tengo los suficientes conocimientos pero para eso acurro acá ... siempre me han ayudado y es la primera vez que veo un comentario como el tuyo ......