使用AJAX將變量從動態html表傳遞到php更新查詢

Question

我想在輸入文本valor中添加一個值，並將此值分配給它所在的行，爲此我需要傳遞給更新查詢ID和valor。

我在做什麼錯？

表

<?php 
$IDTipoEquipamento = $_POST['Car']; 
$result = mysqli_query($conn,"SELECT tipocaracteristicas.IDTipoCaracteristicas,tipoequipamento.TipoEquipamento, caracteristicas.Caracteristica, Valor FROM `tipocaracteristicas` LEFT JOIN tipoequipamento on tipoequipamento.IDTipoEquipamento= tipocaracteristicas.IDTipoEquipamento LEFT JOIN caracteristicas on caracteristicas.IDCaracteristicas=tipocaracteristicas.IDCaraterisiticas WHERE tipocaracteristicas.IDTipoEquipamento= '$IDTipoEquipamento';"); 
echo "<table width='100% class='sortable' id='datatables-example'> 
    <tr> 
</tr> 
    <tr> 
    <td class='pure-table'></td> 
     <td class='pure-table'><b>Tipo de Equipamento</b></td> 
     <td class='pure-table'><b>Caracteristica</b></td> 
     <td class='pure-table'><b>Valor</b></td> 
     <td class='pure-table'><b>Atribuir</b></td> 
    </tr>"; 
while($row = mysqli_fetch_array($result)) 
{ 
echo "<tbody data-link='row' class='rowlink'>"; 
echo "<tr>"; 
echo "<td><input type='text' name='IDTipoCaracteristicas' id='IDTipoCaracteristicas' value='". $row['IDTipoCaracteristicas'] . "'></td>"; 
echo "<td>" . $row['TipoEquipamento'] . "</td>"; 
echo "<td>" . $row['Caracteristica'] . "</td>"; 
echo "<td><input type='text' name='valor' id='valor' value=''></td>"; 
echo "<td><a href='' onclick='UpdateTable()'><img id='img' src='save_icon.gif'/></a></td>"; 
echo "</tr>"; 
echo "</tbody>";  
} 
echo"<br>"; 
echo "</table>"; 
mysqli_close($conn); 
} 
?> 

的Jquery + Ajax的

<script type="text/javascript"> 
    function UpdateTable() { 

     $("#valor").on('input', function() { 
      var valor = $(this).val(); 

     $.ajax({ 
      url: 'insertCharacteristicsEquipment.php', 
      type: "POST", 
      cache:false, 
      data:{valor:valor}, 
      async: false, 
      dataType:'html', 
      success:function(data) { 
       $("#valor").html(data); 
        alert(data); 
      }, 
      error: function(jqXHR, textStatus, errorThrown){ 
        alert(errorThrown); 
       } 
      }); 
     }); 

      $("#IDTipoCaracteristicas").on('input', function(){ 
      var IDTipoCaracteristicas = $(this).val(); 
     $.ajax({ 
      url: 'insertCharacteristicsEquipment.php', 
      type: "POST", 
      cache:false, 
      data:{IDTipoCaracteristicas:IDTipoCaracteristicas}, 
      async: false, 
      dataType:'html', 
      success:function(data) { 
        $("#IDTipoCaracteristicas").html(data); 
        alert(data); 
      }, 
      error: function(jqXHR, textStatus, errorThrown){ 
        alert(errorThrown); 
       } 
      }); 

     }); 
    } 
</script> 

PHP UPDATE查詢頁面

<?php 
include ('conetar.php'); 
if(isset($_POST['valor'], $_POST['IDTipoCaracteristicas'])){ 
    $valor = $_POST['valor']; 
    $IDTipoCaracteristicas= $_POST['IDTipoCaracteristicas']; 
    $sql = "UPDATE `tipocaracteristicas` SET `Valor`='$valor' WHERE `IDTipoCaracteristicas`= '$IDTipoCaracteristicas'"; 
    if(mysqli_query($conn,$sql)){ 
} else{ 
    echo "ERROR: Could not able to execute $sql. "; 
} 
    mysqli_close($conn) 
} 
?> 

Answer 1

見下這裏兩個語句，

echo "<td><input type='text' name='IDTipoCaracteristicas' id='IDTipoCaracteristicas' value='". $row['IDTipoCaracteristicas'] . "'></td>"; 
                  ^^^^^^^^^^^^^^^^^^^^^^^^^ 

和

echo "<td><input type='text' name='valor' id='valor' value=''></td>"; 
              ^^^^^^^^^ ^^^^^^^^ 

你爲所有的錶行的分配相同ID，使用類代替。指定類每個IDTipoCaracteristicas，勇氣輸入元素以及對更新表超鏈接。此外，您並未在Valor輸入元素中分配任何值。另外，使用javascript:void(0);使錨標記不可鏈接，否則每次單擊鏈接時都會重定向。所以，你的while()循環應該是這樣的：

while($row = mysqli_fetch_array($result)) { 
    echo "<tbody data-link='row' class='rowlink'>"; 
    echo "<tr>"; 
    echo "<td><input type='text' name='IDTipoCaracteristicas' class='IDTipoCaracteristicas' value='". $row['IDTipoCaracteristicas'] . "'></td>"; 
    echo "<td>" . $row['TipoEquipamento'] . "</td>"; 
    echo "<td>" . $row['Caracteristica'] . "</td>"; 
    echo "<td><input type='text' name='valor' class='valor' value='". $row['Valor'] ."'></td>"; 
    echo "<td><a href='javascript:void(0);' class='updateTable'><img id='img' src='save_icon.gif'/></a></td>"; 
    echo "</tr>"; 
    echo "</tbody>";  
} 

隨後，您的jQuery/AJAX代碼應該是這樣的：

<script> 
    $(document).ready(function(){ 
     $(document).on('click', '.updateTable', function(){ 
      var IDTipoCaracteristicas = $(this).parents('tr').find('.IDTipoCaracteristicas').val(); 
      var valor = $(this).parents('tr').find('.valor').val(); 

      $.ajax({ 
       url: 'insertCharacteristicsEquipment.php', 
       type: "POST", 
       cache:false, 
       data:{valor:valor, IDTipoCaracteristicas: IDTipoCaracteristicas}, 
       async: false, 
       success:function(data){ 
        alert(data); 
       }, 
       error: function(jqXHR, textStatus, errorThrown){ 
        alert(errorThrown); 
       } 
      }); 
     }); 
    }); 
</script>