[SOLUCIONADO] diferentes avisos

[RicardGTX]

Hola amigos,
Tengo un pequeño problema que no se muy bien como solucionarlo.
Tengo un formulario php y ajax que funciona correctamente, el problema viene con los mensajes que quiero mostrar en casos como por ejemplo cuando dejas un input en blanco, se guarda correctamente o se produce algun error.
No se muy bien como hacer para que salte en el html el mensaje que corresponde en cada caso.
En el formulario he creado un <p> con un id diferente para cada input, pues el mensaje que quiero que salga en cada caso ira alli,
Los tiros creo que van poniendo prepend(msg) dentro del success.



formulario html
------------------------------------------------------------------------

Código HTML:

<form>
    <input type="text" class="nombre"  />
    <p id="mensaje_nombre"></p>
    <input type="text" class="email"  />
    <p id="mensaje_email"></p>
    <button id="guardar">Guardar</button>
    <p id="mensaje_general"></p>
</form>
 

js
------------------------------------------------------------------------

Código Javascript:

$("#registro").click(function() {
    
    var nombre = $(".nombre").val();
    var email = $(".email").val();
 
    
    $.ajax({
        type: "POST",
        url: "ejemplo.php",
        data: {nombre: nombre, email: email},
        success: function(msg){
            
        }
        
    })
    
});
 

ejemplo.php
------------------------------------------------------------------------

Código PHP:

$nombre = $_POST["nombre"];
$email = $_POST["email"];
    
if($nombre == ""){
    echo "rellenar nombre";
}
if($email== ""){
    echo "rellenar email";
}
    
$query = mysql_query("select...");
$numero = mysql_num_rows($query);
    
if ($numero == 0){
    echo "guardado";    
}else { echo "Error";}
 

[Alexis88]

Necesitas devolver un objeto con cada mensaje a mostrar, aunque si trabajas con navegadores que soporten HTML5, el tema de las validaciones de campos vacíos podrás hacerlo añadiendo el atributo required a cada campo:

Código HTML:

<input type="text" name="nombre" required  />
 

Por cierto, para poder obtener los valores de los campos en el archivo PHP, en lugar de asignar clases a los campos, deben ser nombres, justo como en el ejemplo anterior.

Para la respuesta final, como la estás imprimiendo en el archivo PHP, solo tienes que tomar al elemento en el cual deseas mostrarla y asignársela como contenido:

Código Javascript:

success: function(msg){
    $("#mensaje_general").text(msg);
}
 

Por cierto, para que la petición asíncrona (AJAX) se ejecute con normalidad, primero necesitas cancelar el envío del formulario. Para ello, puedes retornar el valor booleano false o utilizar el método .preventDefault():

Código Javascript:

$("#id del formulario").on("submit", function(event){
    event.preventDefault();
    //El resto de instrucciones
});
 

Aunque al darle clic al botón de envío se realice el envío de los datos del formulario, es preferible asociar el evento submit, el cual ocurre cuando se incia el procesamiento de un formulario, al formulario.

P. D.: Me parece que la condición para imprimir el mensaje final no es correcta. Si es como lo imagino, debe de imprimirse el mensaje de éxito cuando se encuentren coincidencias en la base de datos y el de error cuando eso no suceda, pero depende de qué estés haciendo.

Un saludo

[RicardGTX]

Gracias por tu respuesta :)
he estado probando y siguiendo tus consejos.
Pero lo que no consigo es hacer que

Código PHP:

if($nombre == ""){
    echo "rellenar nombre";
}
if($email== ""){
    echo "rellenar email";
}
 

aparezca cada mensaje en el div correspondiente del html

Código HTML:

<p id="mensaje_nombre"></p>
<p id="mensaje_email"></p>
 

con el required no haria fala como bien dices, pero me gustaria saberlo por curiosidad y aprender :)

saludos
gracias

[Alexis88]

En ese caso, puedes devolver un objeto desde PHP y tendrías que leer las propiedades del objeto en JavaScript:

Código PHP:

if ($nombre == ""){
    $name = 'Rellenar nombre';
}
else{
    $name = '';
}
 
if($email== ""){
    $mail = 'Rellenar email';
}
else{
    $mail = '';
}
 
if ($numero == 0){
    $resp = 'Guardado';
}
else{ 
    $resp = 'Error';
}
 
echo json_encode([
    'nombre' => $name,
    'correo' => $mail,
    'respuesta' => $resp
]);
 

Código Javascript:

$.ajax({
    type: "POST",
    url: "ejemplo.php",
    data: {nombre: nombre, email: email},
    dataType: "json",
    success: function(msg){
        $("#mensaje_nombre").text(msg.nombre);
        $("#mensaje_email").text(msg.correo);
        $("#mensaje_general").text(msg.respuesta);
    }
});
 

Como no se puede devolver un array directamente, hay que parsearlo a JSON. Asimismo, en el método $.ajax(), hay que asignar el valor "json" al atributo dataType para que la respuesta sea tratada como un objeto JSON.

Un saludo

[RicardGTX]

gracias :)
Funciona perfectamente.

un saludo