Capturar dato desde modal

diegodelpiero

Lanero Reconocido
4 Jun 2009
215
Buen día, estoy tratando de leer una variable desde un modal en PHP, para luego enviarla a una bd de mysql, lamentablemente no manejo nada de AJAX, y he mirado en un sinfín de tutoriales la forma de hacerlo en ajax, le tratado de replicarlo pero no logro capturar dicha variable, agradezco mucho si alguien pudiese ayudarme. este es el código que tengo (de antemano acepto que mi código es bastante precario):

Código:
<?php session_start();

include ("template/cabecera.php");
error_reporting( 0 );



$usuario =$_SESSION['usuario'];

if (!isset($usuario)){
  header("location: index.php");

}else{
    echo "Bienvenido $usuario";
?>
<br><br>
<?php
    echo "<a href='salir.php'> Salir</a>";
    }
$id_solicitud=$_GET['variable'];
include('db.php');
?>

<script>
    $(document).ready(function(){
$('#mymodal').modal('show')
    });


    $(".cerrarModal").click(function(){
  $("#mimodal").modal('hide')
});
</script>

<div id="mymodal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Add New Tag</h4>
        </div>
        <form class="tagForm" id="tag-form" method="post" enctype="multipart/form-data">
            <div class="modal-body">
                <label for="tagName">Tag Name: </label>
                <input id="tagName" class="form-control" type="text"/>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <input id="tag-form-submit" type="submit" class="btn btn-primary">
            </div>
        </form>
    </div>
</div>

<script>

$(document).ready(function() {
    $("#mimodal").submit(function() {

        $.ajax(
                {
                    type: 'POST',
                    url: 'modalaprueba.php',
                    data: {tagName}, //your form datas to post        
                    success: function(response)
                    {
                        alert(response);

                    },
                    error: function()
                    {
                        alert("Failure");
                    }
                });

    });
});
</script>

<?php include ("template/pie.php"); ?>

El modal se lanza, pero no me envía nada a la pagina modalaprueba.php.. este es el código donde leería ese dato (es decir modalprueba.php):

Código:
<?php session_start();

//var_dump($_SESSION);// si no tiene variables te mostrar vacio o null caso contrario te hara un reporte

include ("template/cabecera.php");
error_reporting( 0 );



$usuario =$_SESSION['usuario'];

if (!isset($usuario)){
  header("location: index.php");

}else{


echo "Bienvenido $usuario";
?>
 <br><br>

<?php

echo "<a href='salir.php'> Salir</a>";
}
$id_solicitud=$_GET['variable'];
include('db.php');
?>



<?php

$name   = $_POST['name'];
$insertar="UPDATE solicitud SET soli_aprobado = '1', soli_nom_aprobado = '$name' where soli_id =$id_solicitud";
$resultado1=mysqli_query($conexion,$insertar);
    if ($resultado1){
    ?>
    <?php
        echo "<script>alert('Solicitud aprobada'); window.location='resueltolistausuario.php'</script>";
    }
    ?>
<?php include ("template/pie.php"); ?>
 
Yo revisaría esto. "tagName" es un ID. Pero así cómo está escrito no está haciendo nada.

1657036324117.png



De un ejemplo que saqué de internet.

1657036553748.png


El $(.....).val(); es el que obtiene la información del input.

Y el hashtag # (en dicho ejemplo y para su caso también) es el que le dice a JS busque un ID con nombre XYZ > #XYZ

Si fuera una clase, sería (punto) $(".XYZ").val();

fuente: https://www.appsloveworld.com/how-to-pass-parameters-in-ajax-post-jquery-ajax-post-json-example


Lo otro es que la idea de utilizar una forma "FORM" es pasarsela a Javascript serializada. Eso significa que coja todos los valores que encuentre dentro de la forma y los envíe.

Otro ejemplo de internet

La serialización es tomar todo lo que está dentro del form

<form .... >

input 1 contact
input 2 language
input 3 gender...
etc

</form>

$("div").text($("form").serialize()); //Serialize Form Data

Y serializarlo:

contact=598864552&language=French&gender=Male&email=john_12%40hotmail.com&name=John

En el otro archivo leer esos valores con $_GET["contact"] ... etc

Fuente: https://www.formget.com/javascript-serialize/


Otro detalle a tener en cuenta es que para ese ultimo ejemplo, no utiliza el ID para apuntar al form. En cambio, utiliza $(¨div").text($("form") que creo busca hasta que encuentre cualquier <form

1657037261044.png



En este caso ya está entrando en territorio de Javascript. Y evidentemente no tiene mucha idea. Yo le recomiendo que antes de continuar vea algunos tutoriales de Javascript para que se ubique mejor más adelante. (no haga más ejercicios antes de ver algunos videos en youtube y se entera un poco más de información básica para que al menos tenga una mejor idea cómo buscar cuando encuentra un problema).

Porque sí, el ajax le va a funcionar, pero cómo o ¿por qué? no va a saber. Y es más difícil reconocer otros problemas más adelante.

Tony.
 
lo he conseguido de esta manera:

en la pagina aprobarresueltos.php pongo esto:

Código:
<div id="contact"><button type="button" class="btn btn-info btn" data-toggle="modal" data-target="#contact-modal">Show Contact Form</button></div>
    <div id="contact-modal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <a class="close" data-dismiss="modal">×</a>
                    <h3>Contact Form</h3>
                </div>
                <form id="contactForm" name="contact" role="form">
                    <div class="modal-body">               
                        <div class="form-group">
                            <label for="name">Name</label>
                            <input type="text" name="name" class="form-control">
                        </div>
                        
                                    
                    </div>
                    <div class="modal-footer">                   
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <input type="submit" class="btn btn-success" id="submit">
                    </div>
                </form>
            </div>
        </div>

<script>

$(document).ready(function(){   
    $("#contactForm").submit(function(event){
        submitForm();
        return false;
    });
});
// function to handle form submit
function submitForm(){
     $.ajax({
        type: "POST",
        url: "modalaprueba.php",
        cache:false,
        data: $('form#contactForm').serialize(),
        success: function(response){
            $("#contact").html(response)
            $("#contact-modal").modal('hide');
        },
        error: function(){
            alert("Error");
        }
    });
}


</script>

Y luego lo captuso en modalapueba.php asi:

Código:
if (isset($_POST['name'])) {

  $name = strip_tags($_POST['name']);
  $insertar="UPDATE solicitud SET soli_aprobado = '1', soli_nom_aprobado = '$name' where soli_id =$id_solicitud";
  $resultado1=mysqli_query($conexion,$insertar);
      if ($resultado1){
      ?>
      <?php
          echo "<script>alert('Solicitud aprobada'); window.location='resueltolistausuario.php'</script>";
      }
    
    }

Pero ahora me surge otro problema, a la pagina aprobarresuelto.php llega una variable por POST uqe viene desde otra pagina, ahora en vista del spagueti que se me armo, esta variable que recibo por POST en aprobarresuelto.php debo pasarla tambien a modalaprueba.php, puesto que la necesito para asignarle el valor a $id_solicitud, que es requerida para hacer el update a la bd... pero no he lgrado poer pasar una variabel especifica entre 3 paginas diferentes..