2016-10-20 5 views
0

私はテーブルを含むWebページを持っています。すべての行にチェックボックスがあります。ユーザーが行を選択し、チェックボックスを使用してボタンを押すと(アレイにコードを保存する)、4つのボタン(入力)を持つウィンドウモードが表示されます。このボタンの1つをクリックすると、データベースを更新するPHPページが起動します。PHP POSTのウィンドウ配列からの配列

ウィンドウモーダルが表示されたら、選択行のコードで配列が取得され、この配列(jqueryコード)をPOSTメソッドを使用してPHPページに送信する方法がわかりません。

ウィンドウモーダルのHTMLコード:

<!-- 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コード:

/* 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); 
    }); 

そしてPHPページ:

 $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); 

は、私はそれを行う方法にはわからない、でした私はjqueryからグローバルなPHP変数を保存しますか?または、ボタンをクリックするとメソッドポストで配列を送信できますか? :(

答えて

1

はすべて[]hiddenフィールドのリストとしてのコードをチェックします、そして、PHPは、同様にリストとしてそれらを受け取ることがモーダルのこれら4つのボタンのいずれかが提出するどのformにする必要があります:。

PHPに続い
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(); 
}); 

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

例:

$("#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>

このコードはあくまで参考例です。私はあなたのコードに基づいていませんでした。