Foros del Web » Programando para Internet » PHP »

Datos enviados de formulario mediante alerta

Estas en el tema de Datos enviados de formulario mediante alerta en el foro de PHP en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 14/07/2014, 14:21
Avatar de Juandavo  
Fecha de Ingreso: octubre-2011
Ubicación: Quito
Mensajes: 85
Antigüedad: 12 años, 5 meses
Puntos: 0
Datos enviados de formulario mediante alerta

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 !
__________________
Juan David V.
Diseñador Multimedia
  #2 (permalink)  
Antiguo 14/07/2014, 15:48
Avatar de thedaket  
Fecha de Ingreso: junio-2011
Mensajes: 55
Antigüedad: 12 años, 8 meses
Puntos: 3
Respuesta: Datos enviados de formulario mediante alerta

Se llama AJAX amigo

jQuery AJAX

lo que quieres hacer lo puedes implementar en el success

Saludos
__________________
Sí AJAX quieres usar jQuery debes agregar...
  #3 (permalink)  
Antiguo 15/07/2014, 08:44
Avatar de Juandavo  
Fecha de Ingreso: octubre-2011
Ubicación: Quito
Mensajes: 85
Antigüedad: 12 años, 5 meses
Puntos: 0
Respuesta: Datos enviados de formulario mediante alerta

Cita:
Iniciado por thedaket Ver Mensaje
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 ....
__________________
Juan David V.
Diseñador Multimedia
  #4 (permalink)  
Antiguo 15/07/2014, 10:33
Avatar de thedaket  
Fecha de Ingreso: junio-2011
Mensajes: 55
Antigüedad: 12 años, 8 meses
Puntos: 3
Respuesta: Datos enviados de formulario mediante alerta

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
__________________
Sí AJAX quieres usar jQuery debes agregar...
  #5 (permalink)  
Antiguo 15/07/2014, 11:03
Avatar de Juandavo  
Fecha de Ingreso: octubre-2011
Ubicación: Quito
Mensajes: 85
Antigüedad: 12 años, 5 meses
Puntos: 0
Respuesta: Datos enviados de formulario mediante alerta

Cita:
Iniciado por thedaket Ver Mensaje
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
__________________
Juan David V.
Diseñador Multimedia
  #6 (permalink)  
Antiguo 15/07/2014, 12:35
 
Fecha de Ingreso: julio-2014
Mensajes: 4
Antigüedad: 9 años, 8 meses
Puntos: 2
Respuesta: Datos enviados de formulario mediante alerta

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!
  #7 (permalink)  
Antiguo 15/07/2014, 15:31
Avatar de Juandavo  
Fecha de Ingreso: octubre-2011
Ubicación: Quito
Mensajes: 85
Antigüedad: 12 años, 5 meses
Puntos: 0
Respuesta: Datos enviados de formulario mediante alerta

Cita:
Iniciado por hnevado Ver Mensaje
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 ....
__________________
Juan David V.
Diseñador Multimedia
  #8 (permalink)  
Antiguo 15/07/2014, 15:55
 
Fecha de Ingreso: octubre-2010
Ubicación: España
Mensajes: 1.007
Antigüedad: 13 años, 5 meses
Puntos: 123
Respuesta: Datos enviados de formulario mediante alerta

Cita:
Iniciado por Juandavo Ver Mensaje
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.
  #9 (permalink)  
Antiguo 15/07/2014, 18:00
 
Fecha de Ingreso: noviembre-2008
Ubicación: Cochabamba Bolivia
Mensajes: 519
Antigüedad: 15 años, 4 meses
Puntos: 26
Respuesta: Datos enviados de formulario mediante alerta

Y este tema no deberia estar en PHP, pero bueno, ya que estamos, suerte!
  #10 (permalink)  
Antiguo 17/07/2014, 15:43
Avatar de Juandavo  
Fecha de Ingreso: octubre-2011
Ubicación: Quito
Mensajes: 85
Antigüedad: 12 años, 5 meses
Puntos: 0
Respuesta: Datos enviados de formulario mediante alerta

Cita:
Iniciado por xerifandtomas Ver Mensaje
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 ......
__________________
Juan David V.
Diseñador Multimedia

Etiquetas: alerta, form, formulario-php, notificación
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 08:20.