Updating the database several times with form elements

Question

I am working on a site for the office of doctors. I'm pretty good at HTML / CSS and some PHP, but I'm still trying to learn Javascript / JQuery.

So, the easiest way to describe my problem (my problem is at least quite complicated for me) with an image (If this is not the best way to describe it, just tell me and I will describe it in more detail):

I have a PHP code that takes a value (i.e. a place number) passed to it, and inserts the location number into the database along with the user time.

Here's the PHP code:

<?php date_default_timezone_set('America/Denver'); $apptid = $_REQUEST['apptid']; $currentlocation = $_REQUEST['currentlocation']; $currentlocationstart = date("Ymd H:i:s"); /*** mysql hostname ***/ $hostname = '******'; /*** mysql username ***/ $username = '***********'; /*** mysql password ***/ $password = '***************'; $conn = new PDO("mysql:host=$hostname;dbname=sv", $username, $password); /*** The SQL SELECT statement ***/ $sql = "UPDATE schedule SET currentlocation = ?, currentlocationstart = ? WHERE apptid= ? "; $q = $conn->prepare($sql); $q->execute(array($currentlocation,$currentlocationstart, $apptid)); ?> 

Here is the html code (which is populated with a bit of php to populate):

 $sql = "SELECT * FROM locations order by patientlocation ASC"; echo "<td><select name=location>"; foreach ($dbloc->query($sql) as $row2) { echo "<option>".$row2['patientlocation']."</option>"; } echo "<option value='Check Out'>Check Out</option>"; echo "</select></td>"; 

So the problem is how to do this with Javascript / JQuery and if my php will work with Javascript / JQuery. I would also like to save everything from the initial "Check In" button until the user types a check.

Another problem: I need this to happen automatically with AJAX, and not refresh the page many times.

Thank you very much for everyone and for your help. If I don’t explain my problem well enough, tell me and I will write more details!

Answer 1

just the first question, can you make the fields in one form instead of having them disappear in the exchange?

Thus, when they click on the "Check" button, you can make the form, fill it in, and when they click on the confirmation button at the bottom of the form, we can use AJAX to submit the form and display the response.

So this will be something like:

 <script type="text/javascript"> $(document).ready(function() { // Hide the form on load $('#myForm').hide(); // Hide the completed message $('#finished').show(); }); // When someone clicks checkin this function will be called $('#checkIn').click(function(){ $e = $(this); $.ajax({ type: "POST", url: "[URL OF PHP PAGE HERE]", // this page should add date to the database data: "checkIn="+$(this).val(), // This will send $_POST['checkIn'] success: function(){ // Display the form once the AJAX is finished $('#myForm').show(); } }); }); // This function will be called when someone uses the select field $('.[yourClassName]').change(function(){ $e = $(this); $.ajax({ type: "POST", url: "[URL OF PHP PAGE HERE]", data: "yourFieldName="+$(this).val(), success: function(){ // Display the form once the AJAX is finished alert('Done'); } }); }); // When someone clicks checkOut this function will be called $('#checkOut').click(function(){ $e = $(this); $.ajax({ type: "POST", url: "[URL OF PHP PAGE HERE]", // this page should save data to db data: "example="+$('select#exampleId').val(), success: function(){ // Hide the form again $('#myForm').hide(); // Show the finished div with your success msg $('#finished').show(); } }); }); </script> <input type="button" value="Check In" id="checkIn" /> <form method="post" id="myForm" action=""> // Build the rest of your form here <select name="example" id="exampleId"> <option value="1">Test</option> </select> <input type="button" value="Check Out" id="checkOut" /> </form> <div id="finished" style="color:#ff0000;">Checked Out</div> 

This should be the case, except that of course you will need to create your own form, where my example is one. The PHP page you submit to AJAX should have a regular PHP page that accepts $_POST data in the same way as when submitting a form normally.