mensaje de envío formulario

fmiguelcapel · #1 (**permalink**) 10/01/2013, 12:00

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...

misalabs · #2 (**permalink**) 10/01/2013, 12:52

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>

fmiguelcapel · #3 (**permalink**) 10/01/2013, 13:03

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.

}

misalabs · #4 (**permalink**) 10/01/2013, 13:38

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 originalif(usuario != "" && apellido1 != "" && apellido2 != "" && localidad != "" && codigo != "" && telefono != "" && email != ""){
            alert("Usurio: "+usuario+"Asunto: "+asunto);
        }else{
            alert("Completa todos los campos")
        }

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$(document).ready( function(){
    $("#formContacto").validate({
        rules: {
            nombre: { required: true },
            email: { required: true, email: true },
            web: { required: false },
            asunto: { required: true },
            msj: { required: true }
        },
        messages: {
            nombre: "*Campo requerido",
            email: "*Campo requerido con formato de email",
            asunto: "*Campo requerido",
            msj: "*Campo requerido",
        },
        debug: true,
        submitHandler: function(form){
           var dataString = "nombre="+$("#nombre").val()+"&email="+$("#email").val()+"&web="+$("#web").val()+"&asunto="+$("#asunto").val()+"&msj="+$("#msj").val();
           $.ajax({
                type: "POST",
                url: "email.php",
                contentType: "application/x-www-form-urlencoded",
                processData: true,
                data: dataString,
                success: function(resp){
                    if(resp == 0)
                        alert("Ocurrio un error en el servidor :(");
                    else{
                        alert("Enviado correctamente");
                        $("#nombre").val(null);
                        $("#email").val(null);
                        $("#web").val(null);
                        $("#asunto").val(null);
                        $("#msj").val(null);
                    }
 
                }
           });
       }
    });
});

fmiguelcapel · #5 (**permalink**) 10/01/2013, 13:50

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?

fmiguelcapel · #6 (**permalink**) 10/01/2013, 13:51

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;
}

fmiguelcapel · #7 (**permalink**) 10/01/2013, 13:52

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);
}

misalabs · #8 (**permalink**) 10/01/2013, 18:56

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

Código Javascript:

Ver originalfunction primera(){
if(usuario != "" && asunto != ""){
//true
alert(usuario + asunto);
//mandar a llamar la otra funcion
segundaFuncion();
}else{
return false;
}
}
 
function segundaFuncion(){
//Esto es mi segunda funcion
alert("Segunda funcion");
}

fmiguelcapel · #9 (**permalink**) 11/01/2013, 03:26

ok, gracias