Question

I need some advice on how to successfully update mutiple rows in my database from dynamically created input fields.

So, what I have is this:

PHP

<?php
   while ($row = mysql_fetch_array($sql)) {
       echo "<input class='estemated_days' type='text' id='".$row['scpe_id']."' value='".$row['scpe_estemated_days']."'></td>";
   }
?>

This will output something like this:

HTML

<input class='estemated_days' type='text' id='718' value='5'>
<input class='estemated_days' type='text' id='719' value='8'>
<input class='estemated_days' type='text' id='720' value='10'>

<input type='button' id='save' value='Save'> <!-- Button to jQuery -->

…..etc.

Here is where my knowledge is lacking. I want jQuery to do something like this:

jQuery

($"#save").click(function () {

  // Get value of id from (".estemated_days") as an identifier, and get the input value it contains
  // Send to /update.php

});

Then, the update.php would do something like this:

PHP

<?php

if (isset($_POST['save'])) {

    /*
        Get all of the id's and the value it contain's

        perform:
    */

    mysql_query = ("UPDATE myDatabase SET estemated_days = '$the_value_from_the_input' WHERE scpe_id = '$the_value_of_the_id'");
    //Repeat this for all rows from the webpage
}

?>

My knowledge is basic web programming but I would really like to make this work. Anyone got advice on how I should do it?

Answer 1

var values = {};
$('input.estimated_days').each(function(n, el){
   values[ $(el).attr('id') ] = $(el).val();
});

$.ajax(
  {
    type : 'POST',
    url : 'update.php',
    data : {edays: values}
  }
); /// see jquery docs for ajax callbacks 

<?php
   foreach($_POST['edays'] as $id=>$value) // ...

http://api.jquery.com/jQuery.ajax/
also
http://api.jquery.com/attr/

… and don’t forget to sanitize the input for mysql