1

me gustaria saber como obtener los valores input de un formulario. Muestro los valores actuales extraidos de la base de datos mediante un echo y la intención es poder cambiarlas.

El código (editarproyectos.php) seria:

<table class='table table-bordered'>
    <input type='hidden' name='id' value='<?php echo $row['id']; ?>' />
    <tr>
        <td>Titulo</td>
        <td><input type='text' id="titulo" name='titulo' class='form-control' 
            value='<?php echo $tit_proyecto ?>' ></td>
    </tr>

    <tr>
        <td>Fecha</td>
        <td><input type='text' name='fecha' class='form-control' value='<?php echo $fech_proyecto; ?>' ></td>
    </tr>

    <tr>
        <td>Texto 1</td>
        <td><textarea class="form-control" name='text1' rows="2"><?php echo $texto1_proyecto; ?></textarea></td>
    </tr>

    <tr>
        <td>Texto 2</td>
        <td><textarea class="form-control" name='text1' rows="4"><?php echo $texto2_proyecto; ?></textarea></td>
    </tr>

    <tr>
        <td colspan="2">
        <button type="submit" class="btn btn-primary" name="btn-update" id="btn-update">
        <span class="glyphicon glyphicon-plus"></span> Guardar cambios
        </button>
        </td>
    </tr>

</table>

Cuando clickeo en submit, me deriva al archivo crud2.js (el que está abajo) pero no consigo que me envie nada a "editar_proyectos_update.php".

$.post("editar_proyectos_update.php", $(this).serialize())
    .done(function(data){
        $("#dis").fadeOut();
        $("#dis").fadeIn('slow', function(){
             $("#dis").html('<div class="alert alert-info">'+data+'</div>');
             $("#emp-UpdateForm_Proyectos")[0].reset();
             $("body").fadeOut('slow', function()
             {
                $("body").fadeOut('slow');
                window.location.href="login-register/index.php";
             });                 
         });    
    });       
4
  • 1
    Juan Luis eso se hace con Ajax. Aquí hay muchas preguntas con respuestas que explican todo el proceso. Si buscas en la etiqueta Ajax encontrarás más de una. No te puedo poner algunos enlaces porque ahora estoy desde el móvil. Saludos.
    – A. Cedano
    Commented el 6 jul. 2018 a las 13:34
  • Si, como dices, pero el código que extraí y ando modificando, trae el .js que acabo de añadir, y me gustaria saber el funcionamiento del mismo, y probar este estilo de POST y no usar el mismo del otro post que me respondiste hace dos dias, y me gustaria saber el funcionamiento de este tipo. Commented el 6 jul. 2018 a las 14:01
  • En editar_proyectos_update.php tienes que recibir los datos que se envían en el post, procesarlos y devolver una respuesta que será mostrada desde el done. En realidad $.post funciona como $.ajax. No sé si el problema esté en el tratamiento de los datos o si no está funcionando el código, porque no se ejecuta ese bloque al hacer clic en enviar . Pon un alert dentro del post para comprobarlo.
    – A. Cedano
    Commented el 6 jul. 2018 a las 14:52
  • Con la respuesta de @EduardoSantillan podrás lograrlo, aunque no estoy de acuerdo con él en algunas cosas, pero se lo diré en comentario en su respuesta.
    – A. Cedano
    Commented el 6 jul. 2018 a las 15:01

1 respuesta 1

1

Si lo que deseas hacer es enviar tu formulario de forma asíncrona, entonces te recomiendo que hagas lo siguiente:

Primero, debes tener en la cabecera de tu página, donde está el formulario, el siguiente script. Este es el que te permitirá usar las funciones de ajax.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

En tu Archivo JS debes agregar lo siguiente. Este se encargará de aplicar el submit a tu formulario

$(function(){
$("#emp-UpdateForm_Proyectos").on("submit", function(e){ //Ejecutas la acción submit de tu formulario
    e.preventDefault();
    var f = $(this);
    var formData = new FormData(document.getElementById("emp-UpdateForm_Proyectos")); //Mediante el formData llamarás a las variables del formulario (inputs)
    formData.append("dato", "valor");
    //formData.append(f.attr("name"), $(this)[0].files[0]);
    $.ajax({
        url: "editar_proyectos_update.php", //url destino
        type: "post", //tipo de envío, post/get
        dataType: "html",
        data: formData, //variables (inputs)
        cache: false,
        contentType: false,
        processData: false
    })
    .done(function(result){ //Aquí puedes imprimir algún mensaje de confirmación mediante algún echo.
        alert(result);
    });
});
});

En tu archivo PHP que recibirá los datos del formulario 'editar_proyectos_update.php', puedes llamar a las variables mediante $_POST["nombre_variable"], tal como lo haces cuando envías el formulario de manera síncrona:

<?php
   if (isset($_POST["titulo"]) && isset($_POST["fecha"]) && isset($_POST["text1"])) { //Aquí validamos si existe la variable (yo solo coloqué tres parámetros de tu formulario).
      $titulo = $_POST["titulo"];
      $fecha = $_POST["fecha"];
      $text1 = $_POST["text1"]; 
   }
?>

NOTA: En tu formulario solamente es necesario tener el 'id', no necesitas tener el 'action' ni el 'method'

form id='emp-UpdateForm_Proyectos'>
   ...
</form>
10
  • Es correcto lo que dices y bien explicado, aunque difiero en algunas cosas: es mejor tener el action y el method en el formulario. Luego en JS recuperas ese atributo usando this. Eso permite escribir un código más genérico, adaptado a cualquier formulario. Además puedes usar esta variable: var f = $(this); ya para todo: var formData = new FormData(f); .... $.ajax({ url: f.prop("action"), method: f.prop("method"), o sea lees las propiedades action y method del elemento. Por cierto, type era para versiones muy antigua de jQuery.
    – A. Cedano
    Commented el 6 jul. 2018 a las 15:10
  • Muchas gracias por la aclaración. Lo escribí así en la respuesta porque así me ha funcionado. Pero debo tomarlo en cuenta también. Commented el 6 jul. 2018 a las 15:22
  • @EduardoSantillán muchas gracias, efectivamente funciona perfectamente. Commented el 6 jul. 2018 a las 16:48
  • @A.Cedano como siempre, impecable con sus respuestas. Modificaré los detalles que comentas. Commented el 6 jul. 2018 a las 16:48
  • Una pregunta extra, he buscado pero no he encontrado lo siguiente: En el formulario de arriba, querria añadir un boton "Examinar" para alojar una imagen en la carpeta /img. Por ello, se subiria al servidor la imagen, pero no quiero añadirla al mysql, sino solamente cambiar la ruta de la imagen a a editar. Commented el 6 jul. 2018 a las 16:59

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.