Using ajax to send GET to php file after change to input

Question

I have a series of dynamically generated inputs that I need to have ajax update in a php file for me once the user clicks off of the input.

I think I have the right code, but it's not working for reasons beyond my understanding. I'm a complete javascript/ajax noob, so be gentle.

The js/ajax:

<script type="text/javascript"> 
// Initialize the object:
var ajax = false;

// Create the object...

// Choose object type based upon what's supported:
if (window.XMLHttpRequest) {

    // IE 7, Mozilla, Safari, Firefox, Opera, most browsers:
    ajax = new XMLHttpRequest();

} else if (window.ActiveXObject) { // Older IE browsers

    // Create type Msxml2.XMLHTTP, if possible:
    try {
     ajax = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e1) { // Create the older type instead:
     try {
      ajax = new ActiveXObject("Microsoft.XMLHTTP");
     } catch (e2) { }
    }

}
function update_program(row, target, value) {
    if (ajax) { // Confirm that the object is usable
     ajax.open('get', 'update.php?row=' + encodeURIComponent(row) + '&target=' + encodeURIComponent(target) + '&nfv=' + encodeURIComponent(value)); // Call the PHP script using GET, pass the variable
     //ajax.onreadystatechange = handle_programupdate; // Function that handles the response
     ajax.send(null); // Send the request
    }
}
</script>

And the php for the dynamic input fields

echo "<td><input type=text value=\"$value\" name=\"date\" onblur=\"update_program($i, $j, this.input.date.value);\" class=med></td></td>";

The row count is $i, and the field count is $j. So the data I need sent is the row, field(target), and the modified value of the input.

The inputs are arranged in a table there are many many (varying rows, 63 fields). Each field is either a text input, or in one case a text area. How can I make them submit to the php file after the user alters them?

Answer 1

I think this part in the onclick in the input

update_program($i, $j, this.input.date.value)

should be

update_program($i, $j, this.value)

Also, consider using jQuery, it makes ajax much easier. And everything else too :P

function update_program(row, target, value) {
    $.get('update.php', {row:row, target:target, nfv:value});
}

Also, you are using time and your parameter is value in the function, right?