Foros del Web » Programando para Internet » Javascript »

mensaje de envío formulario

Estas en el tema de mensaje de envío formulario en el foro de Javascript en Foros del Web. me pueden decir como hacer al hacer click sobre el boton enviar lance un mensaje de alert() con un saludo personalizado con los datos que ...
  #1 (permalink)  
Antiguo 10/01/2013, 12:00
 
Fecha de Ingreso: noviembre-2012
Ubicación: Monzón
Mensajes: 157
Antigüedad: 9 años, 6 meses
Puntos: 0
Exclamación mensaje de envío formulario

me pueden decir como hacer al hacer click sobre el boton enviar lance un mensaje de alert() con un saludo personalizado con los datos que se han enviado. saludos...
  #2 (permalink)  
Antiguo 10/01/2013, 12:52
 
Fecha de Ingreso: enero-2013
Mensajes: 8
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: mensaje de envío formulario

Pues basicamente mandas a llamar una funcion javascript con un "onclick" y en la funcion recoges los valores introducidos en el Form. A modo de ejemplo pongo lo siguiente:

Código HTML:
<html>
<head>
    <script type="text/javascript">
    function enviaForm(){
        var usuario = document.getElementById("usuario").value;
        var asunto = document.getElementById("asunto").value;
        alert("Usurio: "+usuario+"Asunto: "+asunto);
    }
    </script>
</head>
<body>
    <form>
    Usuario
    <input type="text" id="usuario" name="usuario" />
    Asunto
    <input type="text" id="asunto" name="asunto" />
    <input type="submit" onclick="enviaForm()" value="Enviar" />
    </form>
</body>
</html> 
  #3 (permalink)  
Antiguo 10/01/2013, 13:03
 
Fecha de Ingreso: noviembre-2012
Ubicación: Monzón
Mensajes: 157
Antigüedad: 9 años, 6 meses
Puntos: 0
Exclamación Respuesta: mensaje de envío formulario

He hecho este escript:
ahora el problema me surje que este formulario ya muestra unas ventanas de alerta si alguno de los campo no se completan como indico en algunas condiciones;
pero el problema te comento que como hacer para que la ventana de alert que te muestro se muestre en este caso despues de que los datos se haigan puesto correctamente por el usuario...no se si me entiendes..

function mostrar() {

var usuario = document.getElementById('nombre').value;
var apellido1 = document.getElementById('apellido1').value;
var apellido2 = document.getElementById('apellido2').value;
var localidad = document.getElementById('localidad').value;
var codigo = document.getElementById('codigo').value;
var telefono = document.getElementById('telefono').value;
var email = document.getElementById('email').value;
alert("Datos enviados:"+"\n"+"nombre: "+usuario+"\n"+"Primer apellido: "+apellido1+
"\n"+"Segundo apellido: "+apellido2+"\n"+"Localidad de nacimiento: "+localidad+
"\n"+"Código postal: "+codigo+"\n"+"Teléfono: "+telefono+"\n"+"Email: "+email);

es hacer esto basicamente:
Debe incluir un botón que al hacer click sobre él lance un mensaje de alert() con un saludo personalizado con los datos que se han enviado. Previamente se debe comprobar que los campos del formulario no estén vacíos, en caso contrario, debe lanzar otro mensaje advirtiendo de ello.

}
  #4 (permalink)  
Antiguo 10/01/2013, 13:38
 
Fecha de Ingreso: enero-2013
Mensajes: 8
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: mensaje de envío formulario

Hola, puedes hacer algunas cuantas validaciones para que cuando esten llenos los campos te muestre el msj de alerta, algo asi como:


Código Javascript:
Ver original
  1. if(usuario != "" && apellido1 != "" && apellido2 != "" && localidad != "" && codigo != "" && telefono != "" && email != ""){
  2.             alert("Usurio: "+usuario+"Asunto: "+asunto);
  3.         }else{
  4.             alert("Completa todos los campos")
  5.         }
Ahora, esto es "validacion de formularios" si quieres hacerlo un poco mas dinamico y con algo de Jquery puedes hacerlo con una libreria llamada jquery.validate.js http://docs.jquery.com/Plugins/Validation es muy completa y te ayuda a validar ciertos aspectos por ejemplo que un campo de "email" contenga la estrcutura de un email, un minimo-maximo de caracteres en un campo, un campo sea necesario o no.
Te pongo un ejemplo de un formulario de "Contacto" tienes de importar la libreria Jquery y Jquery.validate.js

Código HTML:
 <form id='formContacto' >
            <div><label>Nombre</label> <input type='text' id='nombre' name='nombre' /><br></div>
            <div><label>E-mail</label> <input type='text' id='email' name='email' /><br></div>
            <div><label>Web</label> <input type='text' id='web' name='web' /><br></div>
            <div><label>Asunto</label><input type='text' id='asunto' name='asunto' /><br></div>
            <div><label>Mensaje</label> <textarea id='msj' name='msj' tabindex="1" rows='10' cols='50' ></textarea><br></div>
            <input type='submit' id="btnContacto" class='btn' value='Enviar'/>
        </form> 
Código Javascript:
Ver original
  1. $(document).ready( function(){
  2.     $("#formContacto").validate({
  3.         rules: {
  4.             nombre: { required: true },
  5.             email: { required: true, email: true },
  6.             web: { required: false },
  7.             asunto: { required: true },
  8.             msj: { required: true }
  9.         },
  10.         messages: {
  11.             nombre: "*Campo requerido",
  12.             email: "*Campo requerido con formato de email",
  13.             asunto: "*Campo requerido",
  14.             msj: "*Campo requerido",
  15.         },
  16.         debug: true,
  17.         submitHandler: function(form){
  18.            var dataString = "nombre="+$("#nombre").val()+"&email="+$("#email").val()+"&web="+$("#web").val()+"&asunto="+$("#asunto").val()+"&msj="+$("#msj").val();
  19.            $.ajax({
  20.                 type: "POST",
  21.                 url: "email.php",
  22.                 contentType: "application/x-www-form-urlencoded",
  23.                 processData: true,
  24.                 data: dataString,
  25.                 success: function(resp){
  26.                     if(resp == 0)
  27.                         alert("Ocurrio un error en el servidor :(");
  28.                     else{
  29.                         alert("Enviado correctamente");
  30.                         $("#nombre").val(null);
  31.                         $("#email").val(null);
  32.                         $("#web").val(null);
  33.                         $("#asunto").val(null);
  34.                         $("#msj").val(null);
  35.                     }
  36.  
  37.                 }
  38.            });
  39.        }
  40.     });
  41. });
  #5 (permalink)  
Antiguo 10/01/2013, 13:50
 
Fecha de Ingreso: noviembre-2012
Ubicación: Monzón
Mensajes: 157
Antigüedad: 9 años, 6 meses
Puntos: 0
Exclamación Respuesta: mensaje de envío formulario

ya tengo hecha una validacion por cada campo y otra que te muestra por alert los datos introducidos;
sabrias decirme una funcion la cual se muestre una vez otra funcion se cumpla?
  #6 (permalink)  
Antiguo 10/01/2013, 13:51
 
Fecha de Ingreso: noviembre-2012
Ubicación: Monzón
Mensajes: 157
Antigüedad: 9 años, 6 meses
Puntos: 0
Respuesta: mensaje de envío formulario

primera funcion:
function validacion(){
valor = document.getElementById("nombre").value;
if(valor==null || valor.length==0 || /^\s+$/.test(valor)){
alert('El campo nombre no se puede dejar vacío');
return false;
}
valor = document.getElementById("apellido1").value;
if(valor==null || valor.length==0 || /^\s+$/.test(valor)){
alert('Introduce tu primer apellido');
return false;
}
valor = document.getElementById("apellido2").value;
if(valor==null || valor.length==0 || /^\s+$/.test(valor)){
alert('Introduce tu segundo apellido');
return false;
}
valor = document.getElementById("telefono").value;
if( isNaN(valor) ) {
alert('Introduce un valor numérico en el campo "teléfono"');
return false;
}
/*valor = document.getElementById("email").value;
if( !(/\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)/.test(valor)) ) {
alert('La dirección de email no es válida');
return false;
}*/
valor = document.getElementById("mensaje").value;
if(valor==null || valor.length==0 || /^\s+$/.test(valor)){
alert('Debes de dejar tu mensaje');
return false;
}
elemento = document.getElementById("aceptar_condiciones");
if( !elemento.checked ) {
alert('Debe aceptar las condiciones');
return false;
}
return true;
}
  #7 (permalink)  
Antiguo 10/01/2013, 13:52
 
Fecha de Ingreso: noviembre-2012
Ubicación: Monzón
Mensajes: 157
Antigüedad: 9 años, 6 meses
Puntos: 0
Respuesta: mensaje de envío formulario

segunda funcion que quiero que se muestre una vez se cumpla la primera funcion:

function mostrar() {

var usuario = document.getElementById('nombre').value;
var apellido1 = document.getElementById('apellido1').value;
var apellido2 = document.getElementById('apellido2').value;
var localidad = document.getElementById('localidad').value;
var codigo = document.getElementById('codigo').value;
var telefono = document.getElementById('telefono').value;
var email = document.getElementById('email').value;
alert("Le responderemos lo antes posible; saludos."+"\n"+"\n"+"Datos enviados:"+
"\n"+"nombre: "+usuario+"\n"+"Primer apellido: "+apellido1+
"\n"+"Segundo apellido: "+apellido2+"\n"+"Localidad de nacimiento: "+localidad+
"\n"+"Código postal: "+codigo+"\n"+"Teléfono: "+telefono+"\n"+"Email: "+email);
}
  #8 (permalink)  
Antiguo 10/01/2013, 18:56
 
Fecha de Ingreso: enero-2013
Mensajes: 8
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: mensaje de envío formulario

Pues en tu primera funcion una vez que este todo correcto mandas a llamar la otra funcion, un ejemplo seria:

Código Javascript:
Ver original
  1. function primera(){
  2. if(usuario != "" && asunto != ""){
  3. //true
  4. alert(usuario + asunto);
  5. //mandar a llamar la otra funcion
  6. segundaFuncion();
  7. }else{
  8. return false;
  9. }
  10. }
  11.  
  12. function segundaFuncion(){
  13. //Esto es mi segunda funcion
  14. alert("Segunda funcion");
  15. }

Última edición por misalabs; 10/01/2013 a las 18:57 Razón: Agregar codigo
  #9 (permalink)  
Antiguo 11/01/2013, 03:26
 
Fecha de Ingreso: noviembre-2012
Ubicación: Monzón
Mensajes: 157
Antigüedad: 9 años, 6 meses
Puntos: 0
Respuesta: mensaje de envío formulario

ok, gracias

Etiquetas: formulario, mensaje
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 02:46.