0

Tengo una aplicacion en la que cargo en un div mediante jQuery AJAX un php llamado registroVehiculo.php donde tengo un formulario.

En mi funciones.js tengo el jQuery que funciona bien, me recarga el div con el php, pero me viene el problema en lo siguiente.

Tengo mi formulario cargado en el div, y tengo la siguiente funcion para cuando el usuario haga click en el boton submit, en vez de llevarme al registrarVehiculo.php, haga la consulta y me retorne a un span de debajo del formulario un "Vehiculo Registrado" o "Error al registrar". La cosa es que no me frena y me envia a la página de registrarVehiculo.php. El php se recarga dentro de un div con class='recargar'

$(document).ready(function () {
$("input[type=submit]").click(function (evt) {
    evt.preventDefault();
    var matricula = $('#matricula').val();
    var marca = $('#marca').val();
    var modelo = $('#modelo').val();
    var potencia = $('#potencia').val();
    var año = $('#año').val();
    var combustible = $('#combustible').val();

    $.post("registrarVehiculo.php", {
        matricula: matricula,
        marca: marca,
        modelo: modelo,
        potencia: potencia,
        año: año,
        combustible: combustible,
    }, function (respuesta) {
        $('#info').text(respuesta);
    });
});

});

El codigo de registrarVehiculo.php

<?php

session_start(); require("variables.php"); echo "";

//Comprobar id de usuario
$query = "select id from usuarios where usuario = '$_SESSION[usuario]'";
$resultado = mysqli_query($conexion, $query);
$fila = mysqli_fetch_array($resultado);

if(isset($_POST['enviar'])){

    $id_matricula = $_POST['matricula'];
    $marca = $_POST['marca'];
    $modelo = $_POST['modelo'];
    $potencia = $_POST['potencia'];
    $combustible = $_POST['combustible'];
    $año = $_POST['año'];

    $query = "insert into vehiculos (id_matricula, marca, modelo, combustible, potencia, año, usuario) values ('$id_matricula', '$marca', '$modelo', '$combustible', $potencia, $año, '$fila[id]')";
    $resultado = mysqli_query($conexion, $query);

}
else{

echo "<form action='registrarVehiculo.php' method='POST'>
            <label class='label'>Matrícula</label><br/>
                <input class='input' type='text'  name='matricula' id='matricula' placeholder='0000AAA' maxlength='7' require></br><br/>

            <label class='label'>Marca</label><br/>
                <input class='input' type='text' name='marca' id='marca' placeholder='Ford' require><br/><br/>

            <label class='label'>Modelo</label><br/>
                <input class='input' type='text' name='modelo' id='modelo' placeholder='Mondeo'require><br/><br/>

            <label class='label'>Potencia</label><br/>
                <input class='input' type='number' name='potencia' id='potencia' placeholder='150' min='40' max='999' size='3'><br/><br/>

            <label class='label'>Año</label><br/>
                <input class='input' type='number' name='año' id='año' placeholder='2020' min='1930' max='2021' size='4'><br/><br/>

            <label class='label'>Combustible</label><br/>
                <select name='combustible' id='combustible' class='combustible'>
                    <option value='Diesel'>Diesel</option>
                    <option value='Gasolina'>Gasolina</option>
                    <option value='Electrico'>Eléctrico</option>
                </select><br/><br/>

        <input id='enviar' type='submit' name='enviar' value='Registrar Vehiculo'><br/><br/>           
    </form>
    <div id='info'></div>";
}

?>

1 respuesta 1

0

Eso es porque estas usando el evento click y no el evento submit entonces estas previniendo el click y no el submit del formulario, por lo tanto siempre te va a llevar a la pagina:

//Cambialo a submit.
$("input[type=submit]").submit(function (evt) {
   evt.preventDefault();
}

Una recomendación mas... como estas usando jQuery jquery tiene un metodo llamado serialize este permite serializar una seríe de datos de un formulario acumulandolos en una variable, en pocas palabras lo que trato de decir es que en vez de tener esto:

$("input[type=submit]").click(function (evt) {
    evt.preventDefault();
    var matricula = $('#matricula').val();
    var marca = $('#marca').val();
    var modelo = $('#modelo').val();
    var potencia = $('#potencia').val();
    var año = $('#año').val();
    var combustible = $('#combustible').val();

    $.post("registrarVehiculo.php", {
        matricula: matricula,
        marca: marca,
        modelo: modelo,
        potencia: potencia,
        año: año,
        combustible: combustible,
    }, function (respuesta) {
        $('#info').text(respuesta);
    });
});

Podrias tener esto:

$("input[type=submit]").submit(function (evt) {
    evt.preventDefault();

    $.post("registrarVehiculo.php", {

        data: $("form['action' = 'registrarVehiculo.php']").serialize()

    }, function (respuesta) {
        $('#info').text(respuesta);
    });
});

Que es exactamente lo mismo pero mas corto.

6
  • Muchas gracias por la aclaracion @Riven aunque no se si tendre algun problema e mi php, porque al no indicarle en el form un action='registarVehiculo.php' no me hace nada, sin embargo si se lo indico, me lleva a ese php y me imprime uno de ls dos echo, pero no consigo que me lo imprima en el div con id='info'
    – Jorge
    Commented el 20 abr. 2020 a las 23:19
  • Tienes que indicarle siempre un action en el html, osea a lo que me refiero es que en javascript esta parte de aquí $("form['action' = 'registrarVehiculo.php']") es solo para obtener el elemento form de tu pagina que tenga un action igual a registrarVehiculo.php por eso igual debes ponerlo en tu html, de lo contrario no te va a funcionar, aunque lo ideal sería que en vez de usar el action para obtener el formulario, simplemente le pongas un id a tu formulario y obtengas el elemento por medio de jQuery usando el id y no el action, ya que el id siempre debería ser estatico.
    – Layer
    Commented el 20 abr. 2020 a las 23:25
  • 1
    Por otro lado amigo, eso de que te imprima la información en un div id = info, ya no tiene que ver con la pregunta, si deseas resolver esa duda, te recomiendo hacer una pregunta aparte. Tambien lo ideal sería tener el código PHP aparte de tu frontend, eso es 100% recomendable tanto por seguridad como por cuestiones de mantenibilidad, no es buena practica mezclar esa información, ya que podría ser información sensible que alguien mas facilmente podría extraer así tal cual como tienes la información.
    – Layer
    Commented el 20 abr. 2020 a las 23:32
  • gracias, abrire otro tema porque no me recarga nada.. sin embargo en otros ejemplos si que me funciona, asi que debe de ser algo del php.
    – Jorge
    Commented el 21 abr. 2020 a las 0:00
  • Por cierto, que diferencia hay entre usar $.ajax y $.post ?? en jQuery
    – Jorge
    Commented el 21 abr. 2020 a las 0:00

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.