Question

I have tested the following script is working in my PHP page:

<script>
  function calculate<?=$performance_item_id;?>(){
    alert('<?=$performance_item_id;?>');
    $.post('complete_calculate.php',{
      tid: document.getElementById('performance_item_id<?=$performance_item_id;?>').value
    },
    function(output){
      $('#complete_percentage<?=$performance_item_id;?>').html(output);
    });
  }
  calculate<?=$performance_item_id;?>()
</script>
<span id='complete_percentage<?=$performance_item_id;?>'></span>

First, I would like to change the post value to something like "$('.complete<?=$performance_item_id;?>').val();", that is, not get something from an id field, but gather values from several fields having the same class.

Second, I would like to use a text box to hold the HTML output, while “<input type = "text" id='complete_percentage<?=$performance_item_id;?>' name = "complete_percentage[]" size = "5" value="0">” is not working! Please help! Thanks!

Answer 1

Your question is not very clear, but here are a few points to consider:

1. There’s no need to constantly intermingle your PHP with the JavaScript.
   Store the value of $performance_item_id in a JavaScript variable, then re-use that.

2. There’s no need to declare a function and then immediately call it.
   You can use the (function(){}()) pattern* to execute your code immediately.

3. Use jQuery’s .map() and .get() functions to get an array of all the values.

(function () {
    var id = '<?=$performance_item_id;?>';
    alert(id);

    $.post('complete_calculate.php', {   
        tid: $('.complete' + id).map(function(){ return this.value; }).get()
    }, function(output) {
        $('#complete_percentage' + id).html(output);
    }); 
}());

_{* Called either a Self Executing Annonymous Function or an Immediately Invoked Function Expression.}

---

After further clarification, it seems you don’t need any PHP in your JavaScript:

jQuery(function($) {
    $('[class^=complete_]').keyup(function() {
        $.post('complete_calculate.php', {   
            tid: $('.' + this.className).map(function(){ return this.value; }).get()
        }, function(output) {
            $('#complete_percentage' + this.className.replace('complete', '')).html(output);
        }); 
    });
});