ruzD ruzD - 1 month ago 14
PHP Question

PHP POST Array from window-modal

I have a web page that contain a table. Every rows has a checkbox. When the user select the rows, using checkbox, and push a button(I save the codes in array) It show a window-modal with four buttons(input). When click one of this buttons it launch a PHP page to update database.

Now when it showed the window modal I get an array with the codes of the selections rows and I do not know how to send this array(jquery code) to PHP page using POST method.

HTML code of window-modal:

<!-- CHANGE STATUS MODAL MENU -->

<div class="modal fade" id="change" tabindex="-1" role="dialog" aria-labelledby="change" 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"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
<h4 class="modal-title custom_align" id="Heading">CANVIAR ESTAT</h3>
</div>

<form action="updateEstado.php" method="post">
<div class="modal-body">
<div class=" text-center">

<div class="container-fluid">
<div class="row">
<div class="col-md-12 text-center">
<input type="submit" class="btn btn-modal-estado" style="background-color:YellowGreen; color:white;" value="ACTIVAT">
</div>
</div>

<div class="row">
<div class="col-md-12 text-center">
<input type="submit" class="btn btn-modal-estado" style="background-color:Tomato; color:white;" value="PENDENT MIQUEL ALIMENTACIÓ">
</div>
</div>

<div class="row ">
<div class="col-md-12 text center">
<input type="submit" class="btn btn-modal-estado" style="background-color:SkyBlue; color:white;" value="PENDENT ADDCOM">
</div>
</div>

<div class="row">
<div class="col-md-12 text center">
<input type="submit" class="btn btn-modal-estado" style="background-color:Gray; color:white;" value="DESACTIVAT">
</div>
</div>

<div class="row">
<h5 id='codigosSeleccionados'></h5>
</div>
</div>

</div>
</div>
</form>
</div>
</div>
</div>
</div>


Jquery code:

/* CHANGE MODAL WINDOW */

$('#change').on('show.bs.modal', function (event) {

var arrayCod = new Array();

$('#tableprod').find('tbody tr').each(function () {

var $button = $(event.relatedTarget) // Button that triggered the modal
var row = $(this);

if (row.find('input[type="checkbox"]').is(':checked')) {

var field = $(this).data("field");
var cod;

$tds = row.find("td"); // get all table cells in that row

$.each($tds, function(index,value) {

var field = $(this).data("field");

if (field == 'codigo'){
cod = $(this).text();
console.log(cod);
arrayCod.push(cod);
return false;
}
});

}

if (arrayCod.length != 0){
$('input[type="submit"]').prop('disabled', false);
$('#codigosSeleccionados').text(arrayCod.length + " codis seleccionats");




} else {
$('input[type="submit"]').prop('disabled', true);
$('#codigosSeleccionados').text("Cap codi seleccionat");
}

});

//$('#codigosSeleccionados').text("CODIS SELECCIONATS: " + strCods);
console.log(arrayCod.length);
});


And PHP page:

$conn = dbConnect("localhost", "5432", "dbname", "dbuser", "dbpass");

$codigo = $_POST['codigo'];

$query = "UPDATE produccion.ma_producto SET estado={$estado} WHERE codigo={$codigo}";

$result = pg_query($conn, $query);


I'm not sure to how do it, Could I save in global php variable from jquery? Or Could I send the array with method post when it click on button? :(

Answer

Add all checked codes as a list of hidden fields with [], then PHP will receive them as a list as well. It should be on a form which one of those 4 buttons of the modal will submit:

var $form = $("form"); // The modal's form
arrayCod.forEach(function(cod) {
    $('<input type="hidden" name="codigo[]" value="' + cod + '">').appendTo($form);
});

// Event handler for your modal's four buttons. They will submit the form
$('.modal').on('click', 'button', function() {
    $form.submit();
});

Then in PHP:

$codigos = $_POST["codigos"]; // This will be an array

Example:

$("#open-modal").on("click", function() {
  var checkedCodes = [];
  
  // Get checked checkboxes
  $("#codes input").each(function() {
    if ($(this).is(":checked")) {
      // Get the code from td's text
      checkedCodes.push($(this).closest("tr").find("td:eq(1)").text());
    }
  });
  
  // Add hidden fields to the "modal"'s form
  var $modal = $("#modal-body"),
      $form = $modal.find("form");
  
  checkedCodes.forEach(function(code) {
    $('<input type="hidden" name="codigos[]" value="' + code + '">').appendTo($form);
  });
  
  $modal.show();
});

$("#modal-body").on("click", "button", function() {
  $("#modal-body").find("form").submit();
});
#modal-body {
  display: none;
  border: 1px solid #000
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="codes">
  <tr>
    <td><input type="checkbox"></td>
    <td>1</td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>2</td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>3</td>
  </tr>
</table>

<button id="open-modal">Open Modal</button>

<div id="modal-body">
  Imagine this is your modal
  <form>
    <button>Button #1</button>
    <button>Button #2</button>
    <button>Button #3</button>
    <button>Button #4</button>
  </form>
</div>

This code is just an example. I didn't even based it over your code.