1

aquí les dejo el código:

$("#ajax_formulario").submit(function () {
    $.post("ajax.php", {nombre:$(".ajax_nombre").val(), apellido:$(".apellido_ajax").val(), edad:$(".edad_ajax").val() }, function () {
          alert("Exitos al enviar los datos");
    });
});

Este es el código JS, usando el $.post para que se envíe mediante post al php ajax.php; empaquetando las variables y luego una función anónima, en php las recibo así:

<?php

    $nombre = $_POST["nombre"];
    $apellido = $_POST["apellido"];
    $edad = $_POST["edad"];


    echo $nombre + $apellido + $edad;
?>

pero me sale el error de

index $nombre undefined

al igual con la edad y apellido.

3
  • añade el html que estas usando
    – user75901
    el 26 may. 2018 a las 23:09
  • tus div con las clases(ajax_nombre, apellido_ajax y edad_ajax) estan llegando con algun valor y estan escritas correctamente?
    – user47993
    el 26 may. 2018 a las 23:13
  • @Shum te agregué una respuesta espero te sirva
    – user75901
    el 26 may. 2018 a las 23:36

4 respuestas 4

1

Te comento lo siguiente de tu ejercicio, si bien estas tomando en JavaScript los valores de tus cajas de texto, el error que te aparece de PHP es por que a el le estas indicando que le van allegar 3 valores en forma de nombre, edad y apellido y así no se llaman.

  1. AJAX no te va a funcionar como lo tienes por que en tu form tienes la etiqueta de action indicando a donde se procesará
  2. el button que estas usando para procesar tu petición tiene el tipo de submit, el cual por defecto su comportamiento es recargar la página completa

Es decir las etiquetas de tus inputs deben ser así

<input type="text" name="edad">

También te comento lo ideal es que si estás tomando valores únicos no apliques una etiqueta de clase y en su lugar uses la etiqueta de id

Te dejo un ejemplo similar a lo que buscas en tu ejercicio aplicando AJAX

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
</head>
<body>
<form id="ajax_formulario" method="post">
            <table>
                <tr>
                    <td> <label>Nombre:</label></td>
                    <td><input type="text" name="nombre"></td>
                </tr>
                <tr>
                    <td> <label>apellido:</label></td>
                    <td><input type="text" name="apellido"></td>
                </tr>
                <tr>
                    <td> <label>edad:</label></td>
                    <td><input type="text" name="edad"></td>
                </tr>
                <tr>
                    <td><input type="button" id="enviar"></td>
                </tr>
            </table>
        </form>
        <div id="resultado"></div>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
 $(function(){
  $('#enviar').click(function(){
    $.ajax({
      url: 'ajax.php',
      type: 'POST',
      data: $('#ajax_formulario').serialize(),
      success: function(data){
        $('#resultado').html(data)
      }
    })
  })
})
</script>
</body>
</html>

PHP

<?php

$nombre = $_POST["nombre"];
$apellido = $_POST["apellido"];
$edad = $_POST["edad"];


echo $nombre.' '.$apellido.' '.$edad;

Al final como requieres retornar el resultado concatenado en PHP se usa el punto, cuando tu usas el signo de mas estas sumando; entonces te mostrará el error de que dos valores no son numéricos y uno si

1
  • gracias amigo :)
    – plus
    el 27 may. 2018 a las 1:17
0

Aqui el formulario:

<form id="ajax_formulario" action="ajax.php" method="post">
            <table>
                <tr>
                    <td> <label>Nombre:</label></td>
                    <td><input type="text" class="ajax_nombre"></td>
                </tr>
                <tr>
                    <td> <label>apellido:</label></td>
                    <td><input type="text" class="apellido_ajax"></td>
                </tr>
                <tr>
                    <td> <label>edad:</label></td>
                    <td><input type="text" class="edad_ajax"></td>
                </tr>
                <tr>
                    <td><input type="submit" id="enviar"></td>
                </tr>
            </table>
        </form>
0

pon el name a tus formularios así

<td><input type="text" name="nombre" class="ajax_nombre"></td>

Y para recoger los datos del input , lo haces así

 $("input[name='nombre']").val()

Creo que tu problema es que estas recogiendo value vacio.

0

Las variables:

{"nombre":$(".ajax_nombre").val(), "apellido":$(".apellido_ajax").val(), 
"edad":$(".edad_ajax").val() }.

Seria conveniente ademas invocar los elementos por su id(unica) y no por su clase.

ej:

$("#apellido_ajax").val(), y en formulario, id="apellido_ajax"

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.