使用jquery或ajax更新表后更新输入表单

Question

I have this table i've built with jquery and ajax (watching some tutorials, so i'm not an advanced programmer). Well, what i do is i insert some values in a table and i need to get all the sum of this values in an input form.

I can do that, but what i need is to get the sum without refreshing the page, so anytime i enter: 200 in the Value column, the Sum should become :

Sum + 200

Please i need some help with what to do, i've searched for datagrid, but sincerely i don't know how can i do it. Thanks

Php code of the input :

<table class="vlera">

<tr id="<?php echo $id; ?>" class="edit_tr">

<td class="edit_td">
<span id="first_<?php echo $id; ?>" class="text"><?php echo $kodi; ?></span>
<input type="text" value="<?php echo $kodi; ?>" class="editbox" id="first_input_<?php echo $id; ?>" /&gt;
</td>

<td class="edit_td">
<span id="last1_<?php echo $id; ?>" class="text"><?php echo $pershkrimi_pjeses; ?></span>
<input type="text" value="<?php echo $pershkrimi_pjeses; ?>" class="editbox" id="last_input1_<?php echo $id; ?>"/>
</td>
<td class="edit_td">
<span id="last_<?php echo $id; ?>" class="text"><?php echo $vlera; ?></span>
<input type="text" value="<?php echo $vlera; ?>" class="editbox" id="last_input_<?php echo $id; ?>"/>
</td>
<td class="edit_td">
<span id="last2_<?php echo $id; ?>" class="text"><?php echo $kosto; ?></span>
<input type="text" value="<?php echo $kosto; ?>" class="editbox" id="last_input2_<?php echo $id; ?>"/>
</td>

</tr>
<?php
}
?>
</table>

<?php
$sql_shuma="SELECT SUM(vlera) AS shuma FROM servis_pjeset_perdorura WHERE random=$random";
$resultshuma = odbc_exec($connection, $sql_shuma) or die(odbc_error());
while( $rowshuma = odbc_fetch_array($resultshuma ) ) {
           $total1 = $rowshuma['shuma'];
}
?>
<label for='shuma'>Shuma:</label>
<input id="shuma" name="shuma" type="text" value=" <?php echo $total1;?>"  size="20" />

Answer 1

the code you posted doesn't really show the full format (what the inputs look like)... but if you do something like:

$(".values").keyup(function() {
    var sum = 0;
    $(".values").each(function(){
        sum += Number($(this).val());
    });
    $("#shuma").val(sum)
});

and each of your text inputs you want to go towards the total sum has a class of "values" on it, it should work. http://jsfiddle.net/NNbtk/

Answer 2

try this code... This code get the value of the text box when value enter and add it to the sum.

$(document).ready(function(){
   $('#shuma').keyup(function(){
   var val=$('#shuma').val();
   sum=sum+val;
    });
});

Answer 3

just put this code inside another php file...say abc.php

<?php
$sql_shuma="SELECT SUM(vlera) AS shuma FROM servis_pjeset_perdorura WHERE random=$random";
$resultshuma = odbc_exec($connection, $sql_shuma) or die(odbc_error());

while( $rowshuma = odbc_fetch_array($resultshuma ) ) {
           $total1 = $rowshuma['shuma'];
}
echo $total1;
?>

Then from the main page do the following call on a button lets say button1

$(document).ready({
     setInterval(function(){            
        $.ajax({
            url: 'abc.php',
            type: "POST",
            success: function(contents){
               $('#shuma').val(contents);
            }

        });
     }, 1000);

});

Now the explanation:
In the main page when document gets ready, setInterval method of javascript will be called which takes 2 parameters, code and delay time in ms. this code will call the abc.php after every 1 sec and check the db for the new value and return it and put it in the field.

Hope that was what you were looking for.