如何使用 OnChange 將數據從 javascript 傳輸到 php

Question

我試圖從下拉菜單中獲取一些數據，並且我想在它更改以在第二個下拉菜單中進行查詢時使用該值，但直到現在，我無法使用 javascript 將值發送到我的 php。

我使用這段代碼：

<script type="text/javascript" language="javaScript">

  function flow() {
    
    var x = document.getElementById("txt_maq").value;
    document.getElementById("demo").innerHTML = x;
    
    var maq = document.getElementById('txt_maq').value;
    var cat = document.getElementById('txt_catmaterial').value;

    if (maq != "")
    {
      document.getElementById('txt_catmaterial').disabled=false;
    }
    if (cat == "")
    {
      document.getElementById('txt_material').disabled=true;
    }
    if (cat != "")
    {
      document.getElementById('txt_material').disabled=false;
    }
                
                
  }

</script>

<div class="col-2">
      <div class="input-group">
        <label class="label">Maq. Destino</label>
        <div class="rs-select2 js-select-simple select--no-search">
          <select id="txt_maq" name="txt_maq" onchange="flow()">
            <option value="">Selecione</option>
            <option value="E02">E02</option>
            <option value="E03">E03</option>
            <option value="E04">E04</option>
            <option value="E05">E05</option>
            <option value="E06">E06</option>
            <option value="E07">E07</option>
            <option value="E08">E08</option>
            <option value="E04/E07">E04/E07</option>
            <option value="E04/E08">E04/E08</option>
            <option value="E03/E04">E03/E04</option>
            <option value="E03/E07">E03/E07</option>
            <option value="E04/E07/E08">E04/E07/E08</option>
            <option value="E03/E07/E08">E03/E07/E08</option>
            <option value="E07/E08">E07/E08</option>
            <option value="E09">E09</option>
          </select>
          <div class="select-dropdown"></div>
          </div>    
        </div>
      </div>
</div>

<div class="row row-space">
  <div class="col-2">
    <div class="input-group">
      <label class="label">Cat. Material</label>
      <div class="rs-select2 js-select-simple select--no-search">

        <select id="txt_catmaterial" disabled="true" name="txt_catmaterial" onchange="flow()">
            <option value=""></option>
            <?php

              $maquina = $_POST['txt_maquina'];
              $type_te = "";


              if ($maquina == "E09"){
                $type_te= "ET";
              } else {
                $type_te= "EP";
              }
              
              echo $type_te;
              $selecione = "";
              $consulta = "SELECT Cat_Material FROM cat_mat where TE = '".$type_te."' "; //código SQL
                    


                $resultado = mysqli_query($ligacao,$consulta);

                while ($listar = mysqli_fetch_array($resultado)){

                    $catmat = $listar['Cat_Material'];
                    
                    echo "<option value=".$catmat.">$catmat</option>";
                }
            ?>                                          
        </select>   
                    
        <div class="select-dropdown"></div>
      </div>        
    </div>
  </div>
</div>

如果 txt_maq 是 E09，我要做的就是做一個 If，這樣我就可以在 txt_catmaterial 中進行查詢，但該值不是來自 javascript。

Answer 1

使用 Ajax 將數據從 Javascript 發送到 PHP

function testEndpoint(){
        $.ajax({
            url: "https://path/to/your-php-script.php",
            type: "POST",
            crossDomain: true,
            data: {"txt_maq": $("#txt_maq").val()},
            dataType: "json",
            error: function(xhr, status, error){
                console.log("Error: " + error);
            },
            success: function(result, status, xhr){
                console.log(result);
            }
        });
}

testEndpoint();

在您的 PHP 腳本your-php-script.php您可以使用 txt_maq 作為 POST 變量：

$useTxtMag = $_POST['txt_maq'];

Answer 2

Ajax 應在包含 jQuery 之后使用，或者您可以簡單地將 jQuery 包含在您的頭部元素中