3

Que tal, tengo un botón AGREGAR, que contiene dos campos, los cuales se llenan y se envían los datos a la tabla en mysql y en la tabla debajo introducir la descripción de la imagen aquí

Al dar click en GUARDAR para enviar los datos me sale este mensaje, pero me lo manda a otra pagina, como le hago para que salga en la misma ventana del modal?

introducir la descripción de la imagen aquí

y tengo que volver a la pagina y actualizar para que me aparezcan los datos, lo cual es molesto, quiero que se haga en automático, me dijeron que con ajax, pero no se como, apenas empiezo y no se utilizarlo que necesito, alguna librería? Ojala me puedan ayudar

Les dejo mi código de mi modal

<!-- Modal-->
<form id="form1" name="form1" method="post" action="agregarModal_validacion.php">
<div id="myModal1" class="modal fade" role="dialog">
  <div class="modal-dialog modal-sm">
    <!-- Modal content-->
    <div class="modal-content"> 
      <!--Cabecera del modal-->
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Nuevo Trabajo</h4>
      </div> 
      <!--Contenido del modal-->
      <div class="modal-body">
      
        <div class="form-group">
          <div class="col-xm-6">
          <input class="form-control" type="text" id="txt_nombre" name="txt_nombre" placeholder="Nombre del trabajo" required="">
          </div>
        </div>
        
        <div class="form-group">
          <div class="col-xm-6">
          <input class="form-control " type="text" id="txt_costo" name="txt_costo" placeholder="Costo" required="">
          </div>
        </div>
      </div> 
      <!--Final del modal-->
      <div class="modal-footer">
        <button type="submit" class="btn btn-success btn-lg" style="width: 100%;"><span class="glyphicon glyphicon-ok-sign"></span> Guardar</button>
      </div>
    </div>
  </div>
</div>
</form>  

Y el codigo de mi php que hace la consulta

<?
$conexion= mysqli_connect("localhost", "root", "root", "registros");
if($conexion)
{


  //Variables
  
  $Nombre_Trabajo = $_POST['txt_nombre'];
  $Costo=$_POST['txt_costo'];


//realiza la consulta
  $consulta= "INSERT INTO trabajos (Nombre_Trabajo, Costo) values ('$Nombre_Trabajo','$Costo')";
  
  

//para ejecutar consulta
  $resultado=mysqli_query($conexion ,$consulta);
 
  if ($resultado) 
  { 
    $messages[]  = "Los datos han sido agregados correctamente";
  }
    
  else 
  {
    $errors[]= "No se puedo realizar la accion";
  } 
      
if (isset($errors)){
      
      ?>
      <div class="alert alert-danger" role="alert">
        <button type="button" class="close" data-dismiss="consulta_lista.php">&times;</button>
          <strong>Error!</strong> 
          <?php
            foreach ($errors as $error) {
                echo $error;
              }
            ?>
      </div>
      <?php
      }

if (isset($messages)){
        
        ?>
        <div class="alert alert-success" role="alert">
            <button type="button" class="close" data-dismiss="myModal1">&times;</button>
            <strong>¡Bien hecho!</strong>
            <?php
              foreach ($messages as $message) {
                  echo $message;
                }
              ?>
        </div>
        <?php
      }

  

}
  else{ 
        echo ""; 
      }
        mysqli_close($conexion);   
      ?> 

3 respuestas 3

2

Para que esto no ocurra la forma mas logica es que tu modal no sea un <form> y asi ahorrar el submitde tu boton una vez que hagas click en el boton llamas al ajax y en success actualizas los valores que recibes de la respuesta de tu ajax

El click del boton ahora debe funcionar con jquery

Boton

<button id="guardar" class="btn btn-success btn-lg" style="width: 100%;"><span class="glyphicon glyphicon-ok-sign"></span> Guardar</button>

Click

$('#guardar').click(function(){
       var parametros = {
            "nombre" : $("#txtNombre").val(),
            "costo" : $("#txtCosto").val()
      }
      $.ajax({
              data : parametros,
              url : "agregarModal_validacion.php"
              type : "post"
              success : function(response){
                     //response contiene la respuesta al llamado de tu archivo
                     //aqui actualizas los valores de inmediato llamando a sus respectivas id.
              }
       })
});

Debes modificar la respuesta de tu archivo PHP y dejarla como JSON

4
  • Muchas gracias, pero como llamo al ajax? no se
    – Root93
    el 3 nov. 2016 a las 1:19
  • Edite mi respuesta.
    – sioesi
    el 3 nov. 2016 a las 1:30
  • eso de que dices que modifique la respuesta en el php, te refieres a la consulta?
    – Root93
    el 3 nov. 2016 a las 2:21
  • No amigo! La consulta esta todo correcto! Pero ajax trabaja con formato Json! Y debes comprender que cuando se hace una llamada esta entrega una respuesta. En tu caso tu hacer un nuevo insert en tu tabla y tambien quieres actualizar los valores en tu lista!. Lamentablemente no estoy en un computador como para darte un ejemplo mas completo pero te dejo un link interesante donde podras comprender mas de Ajax y Php. google.cl/amp/s/cybmeta.com/…
    – sioesi
    el 3 nov. 2016 a las 2:39
2

Es muy facil su implementación, en primer lugar debes eliminar tu action de la etiqueta form de tu formulario y segundo lugar debes crear una caja para obtener la respuesta AJAX.

Ejemplo:

<form id="form1" name="form1" method="POST">
   <!-- Tus inputs -->
</form>

<div id="respuesta"><!-- Respuesta AJAX --></div>

En la misma página que tu formulario debes añadir el AJAX

$(document).ready(function(){   
    $(document).on('submit', '#form1', function() { 

        //Obtenemos datos formulario.
        var data = $(this).serialize(); 

        //AJAX.
        $.ajax({  
            type : 'POST',
            url  : 'agregarModal_validacion.php',
            data:  data, 

            success:function(data) {  
                $('#respuesta').html(data).fadeIn();
            }  
        });
        return false;
   });
});//Fin document.

Nota: importante añadir la librería de jQuery en tu documento HTML, lo suyo seria entre la etiqueta <head></head>

Ejemplo Completo:

<!DOCTYPE html>
<html lang ="es-ES">
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

    <script>
      $(document).ready(function(){   
         $(document).on('submit', '#form1', function() { 

              //Obtenemos datos formulario.
              var data = $(this).serialize(); 

              //AJAX.
              $.ajax({  
                 type : 'POST',
                 url  : 'agregarModal_validacion.php',
                 data:  data, 

                 success:function(data) {  
                     $('#respuesta').html(data).fadeIn();
                 }  
              });
              return false;
        });
      });//Fin document.
    </script>        
</head>
<body>
   <!-- tu formulario -->
   <form id="form1" name="form1" method="POST">
      <!-- Tus inputs -->
   </form>

   <div id="respuesta"><!-- Respuesta AJAX --></div>
</body>
</html>

agregarModal_validacion.php

Sigues con tu código PHP, es importante que el archivo PHP coincida con la URL del AJAX.

1

El modal deja el formulario y quita submit por button, en ella le agregas un id y ya con el Jquery lo haces:

$(document).ready(function () {
$("#idTuboton").click(function () {
   var data = form.serialize();
   $.post('urlDetuPhp',data,function (data) {
       $('#respuesta').html(data);
    });
 });
});

Boton:

<button type="button" class="btn btn-success btn-lg" style="width: 100%;" id="idTuboton><span class="glyphicon glyphicon-ok-sign"></span> Guardar</button>

Ya simplemente es acomodarlo a su gusto y en el archivo php hacer el insert, eso si, haz un alert del data para que veas como se envía... Ya el resto pues es un poco de imaginacion y autodidacta...

Tu Respuesta

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

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