Using AJAX to pass variable from dynamic html table to php updating query

Question

I want to add a value in the input text valor and assign this value to the row where it is, for this I need pass to the update query ID and the valor.

What am I doing wrong?

Table

<?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 QUERY PAGE

<?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)
}
?>

what error you get?? also you are using oninput event to make ajax which might be causing error as at each keystroke an ajax request is sent..and your server might not be able to handle that..try using onChange/onfouseout — RohitS
– RohitS, Commented Dec 21, 2016 at 15:49
There's a bunch of code with no proper explanation of what is not working, what is the expected output etc. Kindly explain your problem clearly. — Rajdeep Paul
– Rajdeep Paul, Commented Dec 21, 2016 at 16:12
@RajdeepPaul The expected output is to see in mysql the updated value. Something that does not happen — djva
– djva, Commented Dec 21, 2016 at 16:49
@RohitS don't does the update.I want just when i click execute the jquery function — djva
– djva, Commented Dec 21, 2016 at 16:50

Rajdeep Paul · Accepted Answer · 2016-12-22 20:31:55Z

1

See the below two statements here,

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

and

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

You're assigning the same id for all of your table rows, use class instead. Assign class to each of your IDTipoCaracteristicas, Valor input elements as well as to the update table hyperlinks. Furthermore, you didn't assign any value in Valor input element. Also, make the anchor tags non-linkable using javascript:void(0);, otherwise you'll get redirected every time you click on a link. So your while() loop should be like this:

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>";    
}

Subsequently, your jQuery/AJAX code should be like this:

<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>

edited Dec 22, 2016 at 20:31

answered Dec 21, 2016 at 18:15

Rajdeep Paul

16.9k3 gold badges21 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

djva Over a year ago

If i change the value of the input text Valor, the function onclick='UpdateTable(". $row['IDTipoCaracteristicas'] .", ". $row['Valor'] .") , doesn't pass the value of . $row['Valor'] . changed..

Rajdeep Paul Over a year ago

@djva That's because either of them or both the column values are of string type. What's the datatype of Valor and IDTipoCaracteristicas columns. I'll update my answer accordingly.

djva Over a year ago

The datatype of IDTipoCaracteristicas is numeric and valor are varchar. The problem is not IDTipoCaracteristicas, is Valor because if i force a value from Valor, it works.

Rajdeep Paul Over a year ago

@djva I've completely updated my answer. Please test your application with the updated PHP and jQuery/AJAX code snippets.

Collectives™ on Stack Overflow

Using AJAX to pass variable from dynamic html table to php updating query

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related