Edit Form Output

[shackwm60]

Honestly, i dont even know where to start here... or if its even possible the way i am envisioning it BUT

 

I currently output form information from a MySQL DB - its pretty large - about 75 fields and i format them in a zebra-striped table for easy reading.  Heres a small example

while ($row = mysqli_fetch_array($result)) {

				       echo "<tr>";
                                       echo "<td>Provider</td>";
                                       echo "<td>";
                                       echo $row['assignedcounselor'];
                                       echo "</td></tr>";                                        
                                      
                                       echo "<tr>";
                                       echo "<td>Patient Name (" . $row['childadult'];
                                       echo ")</td>";
                                       echo "<td>";
                                       echo $row['firstname'] ." ". $row['lastname'];
                                       echo "</td></tr>";
                                       
                                       and so on....

}

  I want my receptionist to be able to click on a small icon next to any field and just be able to edit the contents and the field updates in mysql upon clicking another button (save icon). Something sorta like the scren mockup below.

 

 

 

Is something like this do-able in PHP or will i need to add javascript.. Any ideas?

[Psycho]

OK, are you only wanting the user to edit individual fields or the entire record? Allowing edit of the entire record would actually be easier.

 

You could allow them to edit individual fields by clicking a button and, I assume, you want it to all happen on the current page. If that's the case, then you'll need to use a combination of JavaScript and PHP (i.e. AJAX). It would take quite a lot to explain everything, but I can break it down to the main features.

 

1. When generating the output, create input fields for the data - but set them to readonly and apply a style so they are visibly readonly (e.g. I typically use a grey background). So, instead of

 

echo "<td>{$row['assignedcounselor']}</td>\n";

Use something like this

 

echo "<td><input type='text' id='assignedcounselor' name='assignedcounselor' value='{$row['assignedcounselor']}</td>\n";

 

2. Additionally, when outputting the records create an edit icon/button for each field as well as a save icon/button. These will call JS functions to initiate the edit/save processes. The function calls will need to include the field name or ID. The save option should be initially disabled.

 

3. Create a JS function to enable editing on a field. This will take the ID/Name passed to the function. Then it will change the style properties of the field so it is not readonly and is displayed as a normal input field. The save button should be enabled and you could also change the edit button to be a cancel button at this point.

 

4. Create a JS function for the save option. That function should take the ID of the field passed to reference the value in the field. It would then make an AJAX call to a PHP page to update the selected value. You would need to pass the Record ID, the name of the field and the value of the field. The response should either be a TRUE (for success) or an error message if there were validation errors. The JS function would either set the field back to the readonly state (if success) or display the error message.

Edited February 26, 2014 by Psycho

[shackwm60]

Thanks Psycho i will follow your advice and also i think i may have located sample javascript on stackoverflow. thanks.