Update Database multiple times with form elements

Question

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

So the easiest way to describe my problem ( my problem, to me at least, is pretty complex) is with an image (If this isn't the best way to describe this, please just tell me and I will describe it more in detail):

I have the PHP code that takes the value (that is the location number) passed to it and inserts the location number into the database along with the time of the time the user.

Here's the PHP code:

<?php
  date_default_timezone_set('America/Denver');

  $apptid = $_REQUEST['apptid'];
  $currentlocation = $_REQUEST['currentlocation'];
  $currentlocationstart = date("Y-m-d 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 filled with a little 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 I have is how to do this with Javascript/JQuery and if my php will work with the Javascript/Jquery. I'd also like to store everything from the initial "Check In" button to when the user hits check out.

Another problem is I need this to happen automatically with AJAX, instead of refreshing the page a lot of times.

Thanks so much for all and any help. If I didn't explain my problem well enough, please tell me and I'll fill in more details!

Answer 1

just a quick question first off, are you able to make the fields into one form instead of having them disappear onchange?

That way when they click check in you can make the form appear, they fill it in, and when they press checkout at the bottom of the form we can use AJAX to submit the form and display a response.

So that would 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>

That should be that, except you will of course need to build your own form where my example one is. With the PHP page you send the AJAX to, that should be a regular PHP page which accepts $_POST data just like when you post a form normally.