Save dynamically generated textfield from PHP

Question

I have a table which is being dynamically generated based on the user input, in some cases rows have a textfield and i want to save the values updated by the user in the textfield by in the MySql database. eg:

Actual Code:

echo "<tr><td>".$sql3[0]."</td><td>".$row1[2]."</td>
      <td><input type='text' class='span1' value='".$recieved."'/>
      </td><td>".$status."</td></tr>";

Simplified example:

//some user input e.g Microsoft

Table: 
item             quantity      received
Windows 7          1000       'textfield'
Office 2007         200        nothing required
Windows 8          20000      'textfield'

Now i want to save the values entered in the textfield and update them in the database. The problem is i am not sure how to define an id (id of the textfield) which can be read using a javascript so that i know which textfield i am currently talking about.

Any suggestions would help.

Answer 1

Your output should look like ( linebreaks for reading only -- not for use in actual code )

var .= '<tr class="someClass">';
var .=   '<td>'.$row["item"].'</td>';
var .=   '<td>'.$row["quantity"].'</td>';
var .=   '<td>';if(!empty($row["received"])){ var .= '<input type="text" value="'.$row["received"].'" id="'.$row['id'].'" />'; }else{ var.= '<input type="text" value="default_value" id="'.$row['id'].'"/>'; } 
var .=   '</td>';
var .= '</tr>';

return var;

Now you use jQuery's AJAX function to pass over the value ID of the 'row'.

$(".someClass input").live('keypress', function(e){
  var code = (e.keyCode ? e.keyCode : e.which);
  if(code == 13){ // if we pressed enter
    e.preventDefault(); // stop the default submission behavior
    var ourId = this.id;
    var updatedText = $(this).val();
    $.ajax({
      type: 'POST',
      url: 'path/to/my/update/file.php',
      data: 'id='+ourId+'text='+updatedText,
      success: function(data){
        //our post to the file was successful. 
        //The file returns data and that data is available as an object.
        //We declare it as 'data' in the success: function(data) string.
       $("#someContainer").append(data); //append our data returned to #someContainer

      }
    });
  }
});

Now that we've passed the ID of the input field (which is also associated directly to the row we want to update) to our PHP file, we can parse the data we need and use it to update the database accordingly.

<?php
  //include our sql.connect file

  $ourId = $_POST['id'];
  $updatedText = $_POST['text'];

  $q = mysql_query("UPDATE 'our_table' SET received='".$updatedText."' WHERE id = ".$ourId);
?>

I hope this is what you want.

EDIT 1 -- per user request

var .= '<td>'; //open the data cell    
//the below line checks to see if the row 'received' is **NOT** a empty database result
if(!empty($row["received"])){
  //our row is not empty, change the value of the input field to our $row['received'] value
  var .= '<input type="text" value="'.$row["received"].'" id="'.$row['id'].'" />'; 
}else{ 
  //our row was empty, or our row returned null. either way, we use "default_value" as our value, which will literally print as a textbox with the words default_value in it.
  var.= '<input type="text" value="default_value" id="'.$row['id'].'"/>'; 
} 
var . = '</td>'; //close the data cell

EDIT 2

Changed to reflect a unique class generated only by the rows in our PHP file. Also changed the keypress function's selector to reflect only inputs within our uniquely generated rows.

Answer 2

In the HTML add the name:

<input type='text' class='span1' name="received[]" value='".$recieved."'/>

in PHP:

$received = $_REQUEST['received']
print_r($received); 

and you will know what to do.

Alternatively, you can do received[$id] where $id is the primary identifier of the row.

Answer 3

You can try

item_id     mediumint(8)    

or even int

That will be long enough but you also need usr_id or dunno if you have that already in mind that would be enough.