Pass information to a Bootstrap Modal

Question

I need to pass the id from a modal to my controller.php. In modal, when clicking the "delete" button I’m trying to pass via POST the id client, but controller receives nothing.

Here I get the data that are in the bank:

foreach($dados as $row){
    $idCliente   = $row['idClienteFisico'];
    $nomeCliente = $row['nomeCliente'];
    $rgCliente   = $row['rgCliente'];
    $cpfCliente  = $row['cpfCliente'];
}

Here is the button that activates the modal and switches to the jQuery id and name by data-id and by data-nome.

<button type="button" data-id="<?php echo $idCliente; ?>" data-nome="<?php echo $nomeCliente; ?>" data-remote="false" data-toggle="modal" data-target="#exampleModal" class="btn btn-danger"><em class="fa fa-trash"></em></button>

This is my Bootstrap Modal where I get the id and the name of the customer

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">Excluir Cliente</h4>
      </div>
      <div class="modal-body">
        <form action="../Controller/cadastro.php" method="post">
          <div class="form-group">
            <h3>Deseja excluir</h3>
            <label for="recipient-name" class="control-label">ID:</label>
            <input type="text" class="form-control hidden" id="recipient-name" name="id">
          </div>
            <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-danger" value="btnDelete" name="btnDelete">Excluir</button>
      </div>
        </form>
      </div>
    </div>
  </div>
</div>

This is where I open the modal and where I pass the account id and name by the "data-id" and "data-name" of my button.

$('#exampleModal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget) 
    var id = button.data('id') 
    var nome = button.data('nome')

    var modal = $(this)
    modal.find('.modal-body input').val(id)
    modal.find('.modal-body h3').text('Deseja excluir o usuario ' +nome+ '?')
})

My.php controller looks like this:

if(isset($_POST['btnDelete'])){
    $dao = new funcionarioDAO();
    $dao->Deletar($_GET['id']);
}

The way I’m getting it id and the name in the modal. But I don’t know how to send the id via POST for my controller.php that will receive the id and delete the Customer.

Some Suggestion?

Answer 1

Your code, with some amendments:

<script type="text/javascript">

$(function () {
    $("#btnDelete").click(function () {
        send_data();
    });
});

function send_data(){
    $.ajax({
        url: "../Controller/cadastro.php",
        type: 'post',
        dataType: 'json',
        data: {
            id:$("#recipient-name").val()
        },
        success: function () {
            alert('Enviou o ID '+$("#recipient-name").val()+"!");
            // Fecha o MODAL
            //$('#exampleModal').modal('toggle');
        },
        error: function () {
            alert('Falhou ao enviar o ID '+$("#recipient-name").val()+"!");
        }
    });
}
</script>

<button type="button" data-id="<?php echo $idCliente; ?>" data-nome="<?php echo $nomeCliente; ?>" data-remote="false" data-toggle="modal" data-target="#exampleModal" class="btn btn-danger">
    <em class="fa fa-trash"></em>
</button>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel">Excluir Cliente</h4>
            </div>
            <div class="modal-body">
                <form action="../Controller/cadastro.php" method="post">
                    <div class="form-group">
                        <h3>Deseja excluir</h3>
                        <label for="recipient-name" class="control-label">ID: <?php echo $idCliente; ?></label>
                        <input type="text" class="form-control hidden" id="recipient-name" name="id" value="<?php echo $idCliente; ?>">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-danger" value="btnDelete" name="btnDelete" id="btnDelete">Excluir</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

OBS: when working with Jquery, use id, it is more practical to reference the elements. Since you don’t need to send all FORM data, you don’t need SUBMIT. POST is done by the send_data function().

Answer 2

Good morning, I set up this script to see if it helps you; by clicking on the "Delete" button of the modal, you load the control page inside the modal itself, passing the data via $_POST, so the data will be deleted!

<script>
    $("#btnDelete").click(function(){
        var id = button.data('id'); //recuperando id
        $("#retorno").load("controller.php", {id:id}); //carregando pagina controller.php passando id por POST
    }); 
</script>   

<html>
    <button type="submit" class="btn btn-danger" value="btnDelete" name="btnDelete" id="btnDelete">Excluir</button>
    <div id="retorno" style="display:none"></div> <!--Div onde vai carregar a controller.php -->    
</html>

I only used the section of the modal button in this example!