0

Estuve aprendiendo AJAX (Aclaración: se que mi código tiene inseguridad y vulneración al SQL pero con PDO no entiendo muy bien, en procedural me permite entender muy bien como interpretar los Queries y conexiones a la base de datos). Mi problema es que no entiendo bien el AJAX, para poder insertar los datos a la tabla compra_cafe de la base de datos.

Me tira este error:

Notice: Undefined index: id_cafe in C:\xampp\htdocs\ajaxanadir.php on line 2 null
Notice: Undefined index: id_usuario in C:\xampp\htdocs\ajaxanadir.php on line 3 null

Estos son los codigos:

pruebacafe3.php

<?
include "conexion.php";
?>
<title>testeando cafe</title>
<h1>Cafe</h1>
<form method="POST" action="ajaxanadir.html">
<p><b>Selección de Cafe</b></p>
id_compra_cafe: <input type="text" name="id_compra_cafe"><br/>
Cafe:<br/>
<input type="checkbox" name="id_cafe[]" value="1"/> Nescafe <br/>
<input type="checkbox" name="id_cafe[]" value="2"> Americano <br/>
<input type="checkbox" name="id_cafe[]" value="3"> Macciato <br/>
<input type="checkbox" name="id_cafe[]" value="4"> Doble <br/>
<input type="checkbox" name="id_cafe[]" value="5"> Cortado <br/>
<input type="checkbox" name="id_cafe[]" value="6"> Capuccino <br/>
<input type="checkbox" name="id_cafe[]" value="7"> Irlandes <br/>
<input type="checkbox" name="id_cafe[]" value="8"> Cafe Solo<br/>
Usuario: <br/>
<input type="checkbox" name="id_usuario[]" value="1"> Fslynx <br/>
<input type="checkbox" name="id_usuario[]" value="2"> Guts <br/>
<input type="checkbox" name="id_usuario[]" value="3"> Otter <br/>
<input type="checkbox" name="id_usuario[]" value="4"> Sebastian <br/>
<input type="checkbox" name="id_usuario[]" value="5"> Julian <br/>
<input type="checkbox" name="id_usuario[]" value="6"> Claire <br/>
Precio: <input type="text" name="precio"><br/>
IVA: <input type="text" name="iva"><br/>
Total: <input type="text" name="total"><br/>
<input type="submit" name="prueba" value="Enviar formulario">
<input type="reset" name="limpiar" value="Borrar formulario">
</form>

ajaxanadir.html

<script type="text/javascript" src="js/query.js">
$(function()) {
    $('form').on('submit', function(e) {
        e.preventDefault();
        $.ajax({
            type:'POST',
            url: 'pruebacafe3.php',
            dataType: 'json',
            data: {
                'id_compra_cafe': $("#id_compra_cafe").val(),
                'id_cafe': JSON.stringify($('[name="id_cafe[]"]').serializeArray()),
                'id_usuario': JSON.stringify($('[name="id_usuario[]"]').serializeArray()),
                'precio': $("#precio").val(),
                'iva': $("#iva").val(),
                'total': $("#total").val(),
                success: function(response){
                    $("#resultado").html(response);
                }
            }
        });
    });
}
</script>

Me pregunto si cambiaria algo del codigo del problema, se permite eliminar y editar datos del formulario para e la base de datos?

EDIT: Despues de aplicar la funcion del ajax como comentó Carmen y añadiendo la conexión al estilo MySQLi procedure, al accionar el submit, no pasa nada , no ejecuta ninguna acción del insert del formulario a la tabla compra_cafe.

6
  • ¿Dóde defines 'site_url()'? Y si haces un echo en php el archivo debería ser php, no html.
    – Carmen
    Commented el 27 jun. 2017 a las 16:08
  • lo hago en el localhost de hecho, pensé que poner 'site_url()' sería por defecto con la conexion del base de datos.
    – Baku84
    Commented el 27 jun. 2017 a las 16:11
  • Tiene que haber un url que reconozca para enviarlo. Además tienes que darle un momento de ejecución al ajax, en tu caso sería on submit.
    – Carmen
    Commented el 27 jun. 2017 a las 16:19
  • es cierto, no habia dado cuenta, debo escribir ese codigo del on submit como función, pero esto no afectará al submit del html que dejé del formulario?
    – Baku84
    Commented el 27 jun. 2017 a las 16:23
  • Lo normal es que hagas un único submit del formulario y en el archivo de destino manejes los datos para todo lo que quieras hacer con ellos. Si lo quieres hacer por ajax, llama a la función al hacer el submit o ponle un onsubmit a la etiqueta del formulario. Otra opción es que envies el formulario html y en el archivo de destino proceses los datos.
    – Carmen
    Commented el 27 jun. 2017 a las 16:29

2 respuestas 2

0

He hecho unas pequeñas modificaciones a tu formulario, le he quitado el action y vamos a llamar a nuestro formulario mediante su id.

Tambien he sustituido el <input type="submit" /> por un button.

También importante que añades la librería de jQuery, sin él, no funcionario, y a veces son pequeños despistes que vuelve loco a uno.

Para obtener la respuesta AJAX, la vamos obtener en nuestra caja <div class="result-mi-formulario"></div>

Un posible ejemplo:

<html>
<head>
    <!-- Importante la libería jQuery. -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>    
    <!-- AJAX. -->
    <script type="text/javascript">         
        $(document).ready(function() {              
            $(document).on('submit', '#mi_formulario', function() {             
                var data = $(this).serialize();//Obtenemos datos.       
                $.ajax({            
                    type : 'POST',
                    url  : 'ajaxanadir.php',
                    data : data,
                    success :  function(data) {                 
                        $(".result-mi-formulario").html(data).fadeIn();
                    },
                    complete: function(){
                       setTimeout(function() {
                            $('.result-mi-formulario').fadeOut();
                       }, 15000);    
                    }
                });         
                return false;           
            });        
        });//End document

    </script>
</head>
<body>
    <form id="mi_formulario" method="POST">
        <p><b>Selección de Cafe</b></p>
        id_compra_cafe: <input type="text" name="id_compra_cafe"><br/>
        Cafe:<br/>
        <input type="checkbox" name="id_cafe[]" value="1"/> Nescafe <br/>
        <input type="checkbox" name="id_cafe[]" value="2"> Americano <br/>
        <input type="checkbox" name="id_cafe[]" value="3"> Macciato <br/>
        <input type="checkbox" name="id_cafe[]" value="4"> Doble <br/>
        <input type="checkbox" name="id_cafe[]" value="5"> Cortado <br/>
        <input type="checkbox" name="id_cafe[]" value="6"> Capuccino <br/>
        <input type="checkbox" name="id_cafe[]" value="7"> Irlandes <br/>
        <input type="checkbox" name="id_cafe[]" value="8"> Cafe Solo<br/>
        Usuario: <br/>
        <input type="checkbox" name="id_usuario[]" value="1"> Fslynx <br/>
        <input type="checkbox" name="id_usuario[]" value="2"> Guts <br/>
        <input type="checkbox" name="id_usuario[]" value="3"> Otter <br/>
        <input type="checkbox" name="id_usuario[]" value="4"> Sebastian <br/>
        <input type="checkbox" name="id_usuario[]" value="5"> Julian <br/>
        <input type="checkbox" name="id_usuario[]" value="6"> Claire <br/>
        Precio: <input type="text" name="precio"><br/>
        IVA: <input type="text" name="iva"><br/>
        Total: <input type="text" name="total"><br/>
        <button type="submit">Guardar cambios</button>
        <input type="reset" name="limpiar" value="Borrar formulario">
    </form>
    <div class="result-mi-formulario"><!-- Respuesta AJAX --></div>
</body>
</html>

ajaxanadir.php

Te dejo un pequeña ejemplo para que puedas ver una respuesta AJAX sin recargar su contenido.

<?php 
//Reseteo.
$msg = NULL;

if (isset($_POST)) {
    //Pequeño ejemplo.
    if (empty($_POST['id_cafe'])) {
        $msg = 'EL <b>id_cafe</b> es obligatorio';
    }
    //Sigues con tu codigo PHP...
}
echo $msg;//Respuesta AJAX.
?>

Ahora bien, si lo que buscas es eliminar y editar tus datos de la Base de Datos, el sistema cambia, te dejo un posible ejemplo probado en localhost. En mi ejemplo puse una tabla llamado usuario, es simplemente para orientarte, luego la tendrás que adaptar a tu Base de datos.

Ejemplo con botón eliminar y editar:

Formulario

<!DOCTYPE html>
<html lang="es-ES">
<head>
    <!-- Jquery -> Libs -->     
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <!-- Caracteres UTF-8 -->   
    <meta charset="utf-8" />    
    <script>
        //Boton eliminar y editar.
        $(document).ready(function() {
            //boton eliminar
            $(".eliminar").click(function(e) {
                e.preventDefault();
                //Obtengo el id desde el boton.
                var id = $(this).attr('data-id');

                //alert(id);    

                //Removemos td tabla.
                $(this).parent('td').parent('tr').remove();         

                $.post('php/control_usuario.php',{
                    //Variable caso eliminar.
                    Caso:'eliminar',
                    Id:id
                },function(e){                  
                    alert(e);
                });         
            });

            //boton editar
            $(".editar").click(function(e) {
                e.preventDefault();
                //Obtengo el id desde el boton.
                var id = $(this).attr('data-id');       
                //alert(id);

                //Valores.
                var nombre = $(this).parent('td').parent('tr').find('.nombre').val();
                var apellidos = $(this).parent('td').parent('tr').find('.apellidos').val();
                var correo = $(this).parent('td').parent('tr').find('.correo').val();                   

                $.post('php/control_usuario.php',{
                    //Variable caso editar.
                    Caso:'editar',
                    Id:id,
                    Nombre:nombre,
                    Apellidos:apellidos,
                    Correo:correo
                },function(e){                  
                    alert(e);
                });         
            });

        });//End document
    </script>
</head>
<body>
<?php
    require_once'/php/conexion.php';

    //Obtengo datos desde MySQL
    $stmt = $c->prepare("SELECT * FROM usuario");//Sentencia.           
    $stmt->execute();//Ejecutar sentencia.
    $stmt->store_result();//Transfiere un conjunto de resulados de la última consulta.
    if ($stmt->num_rows>0) {
        echo "
            <div style='overflow-x:auto;'>
                <table>
                    <tr>
                        <th>ID</th>
                        <th>Nombre</th>
                        <th>Apellidos</th>
                        <th>Correo electrónico</th>
                        <th>&nbsp;</th>
                        <th>&nbsp;</th>
                    </tr>
        ";
        //Obtengo resultado desde la BD.
        $stmt->bind_result($id_usuario,$nombre,$apellidos,$correoBD);
        while ($stmt->fetch()) {
            echo "                  
                    <tr>
                        <td><input type=hidden class='myid' value='$id_usuario' /> $id_usuario</td>
                        <td><input type=text class=nombre value='$nombre' placeholder='Nombre:' /></td>
                        <td><input type=text class=apellidos value='$apellidos' placeholder='Apellidos:' /></td>
                        <td><input type=text class=correo value='$correoBD' placeholder='Email:' /></td>
                        <td><button class=editar data-id=$id_usuario>Editar</button></td>
                        <td><button class=eliminar data-id=$id_usuario>Eliminar</button></td>
                    </tr>                   
            ";
        } $stmt->close();//Cerrar sentencia.

        echo "
                </table>
            </div>
        ";

    } else {
        $stmt->close();//Cerrar sentencia.
        echo "<h3>No se encontraron ningun registro.</h3>";
    }
    $c->close();        
?>
</body>
</html>

control_usuario.php

<?php
$id = $nombre = $apellidos = $correo = NULL;

if ($_POST['Caso']=='eliminar') {
    //Obtengo el id.
    $id = $_POST['Id'] ?: '';
    require_once'conexion.php';
    //Sentencia eliminar.
    $stmt = $c->prepare("DELETE FROM usuario WHERE id_usuario=?");
    $stmt->bind_param("i",$id);
    $stmt->execute();
    $stmt->close();//Cerrar sentencia.
    echo "El usuario se elimino";
}


if ($_POST['Caso']=='editar') {
    //Obtengo datos.
    $id = $_POST['Id'] ?: '';
    $nombre = $_POST['Nombre'] ?: '';
    $apellidos = $_POST['Apellidos'] ?: '';
    $correo = $_POST['Correo'] ?: '';
    require_once'conexion.php';
    //Sentencia editar.
    $stmt = $c->prepare("UPDATE usuario SET nombre=?, apellidos=?, correo=? WHERE id_usuario=? LIMIT 1");
    $stmt->bind_param("sssi",$nombre,$apellidos,$correo,$id);
    $stmt->execute();
    $stmt->close();//Cerrar sentencia.
    echo "El usuario se edito correctamente.";
}
?>
8
  • Con razon nunca estaba el Jquery cuando programaba con sublime text, instalaré el jquery package ahora, gracias por tu respuesta al problema (por si acaso, escribiré el script src igual), yo juraba que en el ajaxanadir.php no era necesario escribir los codigos php ahi en vez del ajax. Ahora comprendo que los ajax deben estar dentro del html. Avisaré como fue!
    – Baku84
    Commented el 27 jun. 2017 a las 19:34
  • 1
    @Baku84 correcto, el AJAX la debes incluir en tu HTML donde este tu formulario, el AJAX te va devolver su resultado dependiendo de tu archivo ajaxanadir.php. Allí debes crear tus comprobaciones que uno piensa que sean necesarias, es decir. si algún input este vacío, lanzas algún error en caso contrario continuas con tu código. En mi ejemplo puedes usar la variable $msg para crear tus mensajes ya sean para error confirmación. Ya me comentas. Un saludo.
    – D.Bulten
    Commented el 27 jun. 2017 a las 20:03
  • Despues de arreglar los errores del query, funcionó :O muchas gracias por su ayuda, pero tengo dudas igual, segun pregunté en otra pregunta, que si en php solo se permite tener otros botones para otras paginas php y me respondieron que solo cada formulario en cada paginas php. Pero en este caso, me pregunto si en el formulario del ajax se puede obtener otros botones para editar y borrar los registros.
    – Baku84
    Commented el 28 jun. 2017 a las 13:04
  • 1
    Continuemos el debate en el chat.
    – D.Bulten
    Commented el 28 jun. 2017 a las 19:10
  • 1
    @Baku84 he añadido un ejemplo alternativo con la función de eliminar y editar los registros a mi respuesta. Espero verte orientado. Un saludo.
    – D.Bulten
    Commented el 29 jun. 2017 a las 13:08
0

Te comento que esta muy bonito tu código y el manejo de AJAX pero te recomiendo una funcion genérica como esta: Link

el jQuery parsea todo en el form y lo manda por POST a donde indiques. igual puedes agregar el empaquetado en JSON.

$(document).on("click",'[id^="proceso-save"]', function (event, xhr, settings) {
    var id = event.target.id;
    var req = 0;
    //formarea es el ID asignado al form generico que se utilizara para cargar todos los formulario
    var name = $("#formarea").attr("name");
    //analisamos si existen input con se requieren estar llenados.
    $('#formarea *').filter(':input').each(function(){
        if($(this).val() === "" && $(this).attr('required')){req ++;}
    });
    if(req == 0){
        //Metodo para crear y agregar un input mediante javascript y determinar el tipo de escenario que se ejecuta
        var input1 = $("<input>").attr("type", "hidden").attr("name", "idprocess").val(id);
        var input2 = $("<input>").attr("type", "hidden").attr("name", "idform").val(name);
        $('#formarea').append($(input1));
        $('#formarea').append($(input2));
        event.preventDefault();
        //Establecemos el form data
        var $form       = $("#formarea"),
            formData    = new FormData(),
            params      = $form.serializeArray();
        // Analisamos los Inputs Files tambien.
        var inputs = $("input:file[name^='i_file_']");
        $.each(inputs, function (obj, v) {
            // Prefix the name of uploaded files with "uploadedFiles-"
            // Of course, you can change it to any string
            var file = v.files[0];
            var name = $(v).attr("name");
            formData.append(name, file);
        });
        //agregamos cada parametro al FormData
        $.each(params, function(i, val) {
            formData.append(val.name, val.value);
        });
        //ejecutamos nuestra peticion Ajax
        $.ajax({
            url: $form.attr('action'),
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            type: 'POST',
            error: function(xhr,status,error){
                //en caso de errores lo soltamos por consola para la depuracion
                console.log(error);
            },
            success:    function(response) {
                // en caso de Guardado soltamos las respyesta del servidor en la caja de mensajes que estaba oculta
                $("#areasmg").html(response);
                $("#MsgArea").removeClass("").addClass("alert alert-warning alert-dismissable");
                $("#MsgArea").show();
                //Marcamos que el evento se ejecuto correctamente
                EventSuccess(id,name,'Se a Ejecutado Correctamente');
            }
        });
    }else{
        alert("Error: Debe llenar todos los Campo, Existen " + req + " campos vacios.");
    }
});
2
  • viendo tu codigo, el #formarea se tiene que ser relacionado con solamente id? ya que en el formulario, tengo dos ids. y el uploaded file es solo con xml? o hay alguna manera de conectar al base de datos localhost? y por último, el codigo se debe poner en ajaxanadir.php ?
    – Baku84
    Commented el 27 jun. 2017 a las 16:17
  • hola amigo, la funcion que te acabo de pasar es genérica y es únicamente jquery y javascript debes modificarla a tu gusto para que te funcione en mi caso yo relacione el form por el ID tu puedes usar el selector que mas te convenga y el url: $form.attr('action') puedes sustituirlo por la url que requieras, pero ten en cuenta que la funcion detecta automaticamente todo los campos de un formulario, hasta los de archivo. input file. no tiene nada que ver con tu manera de conectar a la base de datos ya eso es tema de php. y la consulta es por los errores.
    – user46896
    Commented el 27 jun. 2017 a las 16:23

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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