Error sending variable from ajax to php via post, help please

Question

Error sending variable from ajax to php via post, help please

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)
#4 by (0 votes)

1

Well here is the code:

$("#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");

            });

        });

this is the JS code, using the $ .post to be sent by post, to the php "ajax.php", packing the variables and then an anonymous function, in php I receive them like this:

<?php

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


echo $nombre + $apellido + $edad;

? >

but I get the error of index $ name undefined as with age and last name, thanks for your answers

javascript php ajax

asked by Shum 27.05.2018 в 01:07

source

4 answers

0

Here's the form:

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

answered by 27.05.2018 в 01:10

0

put the name to your forms like this

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

And to collect the input data, you do it like this

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

I think your problem is that you are collecting value empty.

answered by 27.05.2018 в 01:27

0

Variables:

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

It would also be convenient to invoke the elements by their id (only) and not by their class.

ex:

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

answered by 27.05.2018 в 01:30

capture data with a modal from a dynamic table error: Maximum update depth exceeded

score 1 · Accepted Answer

I mention the following of your exercise, although you are taking in JavaScript the values of your text boxes, the error that appears to you from PHP is because you are indicating that you will be attaching 3 values in the form of a name , age and last name and so they are not called.

AJAX is not going to work as you do because in your form you have the action tag indicating where it will be processed

the button that you are using to process your request has the type of submit, which by default its behavior is to reload the page   complete

That is, the labels of your inputs should be like this

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

I also tell you the ideal is that if you are taking unique values, apply a class tag and use the id tag instead

I leave an example similar to what you are looking for in your exercise applying 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;

In the end, as you need to return the concatenated result in PHP, use the point, when you use the plus sign you are adding; so will show you the error that two values are not numeric and one if