0

Tengo una tabla en la cual listo los productos cada uno con una ID única, al final de la tabla he creado un input de tipo button, el cual quiero que al darle click, envíe el ID único del producto para hacer una consulta a la BD y mostrar los datos en el modal, todo eso, solo necesito saber como enviar el ID, este es el botón.

<input type="button" name="btnEditarS" value="Editar" class="btn btn-outline-dark" data-toggle="modal" data-target="#editSpecify">

Y si sirve algo, aquí dejo el modal:

<div class="modal fade" id="editSpecify" tabindex="-1" role="dialog" 
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
  <div class="modal-header">
    <h5 class="modal-title text-dark" id="exampleModalLabel"> Editar producto </h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <form action="" method="" id="editProductSpecifyForm">

      <div class="form-group row">
        <figure class="block-4-image mx-auto d-block" style='height:30px; width:50px;'>
          <img src="" alt="Producto" class="img-fluid">
        </figure>
      </div>

      <div class="form-group row">

      </div>

      <div class="form-group row">
        <label for="editStock" class="col-sm-2 col-form-label"> Inventario: </label>
        <div class="col-sm-10">
          <input type="text" name="editStock" class="form-control" id="editStock">
        </div>
      </div>

    </form>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal"> Cancelar </button>
    <input type="button" class="btn btn-outline-dark" name="editBtn" id="editBtn" form="editProductSpecifyForm" value="Guardar cambios">
  </div>
</div>

1 respuesta 1

3

Hay un ejemplo en la documentación usando jQuery para leer un atributo data-* en el botón

$('#editSpecify').on('show.bs.modal', function(event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('elvalor') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('Editar producto con id ' + recipient)
  modal.find('.modal-body input').val(recipient)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>


<input type="button" name="btnEditarS" value="Editar 1" 
 data-elvalor=1
 class="btn btn-outline-dark" data-toggle="modal" data-target="#editSpecify"> <br/>
<input type="button" name="btnEditarS" value="Editar 2" 
 data-elvalor=2
class="btn btn-outline-dark" data-toggle="modal" data-target="#editSpecify">


<div class="modal fade" id="editSpecify" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title text-dark" id="exampleModalLabel"> Editar producto </h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
      </div>
      <div class="modal-body">
        <form action="" method="" id="editProductSpecifyForm">

          <div class="form-group row">
            <figure class="block-4-image mx-auto d-block" style='height:30px; width:50px;'>
              <img src="" alt="Producto" class="img-fluid">
            </figure>
          </div>

          <div class="form-group row">

          </div>

          <div class="form-group row">
            <label for="editStock" class="col-sm-2 col-form-label"> Inventario: </label>
            <div class="col-sm-10">
              <input type="text" name="editStock" class="form-control" id="editStock">
            </div>
          </div>

        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal"> Cancelar </button>
        <input type="button" class="btn btn-outline-dark" name="editBtn" id="editBtn" form="editProductSpecifyForm" value="Guardar cambios">
      </div>
    </div>

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.