Question

I currently have a drop-down menu box that takes an element from a column from my mySQL database and displays it in the drop-down box. The user can also select from five of the pre-determined options. When submit is clicked, the changes get reflected in the database.

There is no issue with my code, but I would like to make it more intuitive for the user. At the moment, upon clicking submit, the page refreshes, and the page loses its scroll position (once refreshed, the page goes to the top).

How would one make a submit button outside of the while-loop? I want to have the submit button at the bottom of the page, which would mean it will be outside of the iterating while loop, right? How could I do this?

Attached is my code:

<?
if (isset($_POST['formSubmit'])){
    $rating = $_POST['rating'];
    $accountID = $_POST['accountID']; 

mysql_query("UPDATE Spreadsheet SET rating='$rating' WHERE accountID='$accountID'");
}

while ($row = mysql_fetch_array($query)){ ?>

<form name ="rating" method ="POST" action ="" > <?

echo "<input type = 'hidden' name = 'accountID' value = '" . $row['accountID'] . "' >";

?>
    <select name="rating">

        <? $values = array('0 - No rating','1 - Very Bad','2 - Bad','3 - Average','4 - Above Average');

        for ($i =0; $i < count($values); $i = $i + 1){
            echo "<option value = \"$i\""; 

            if ($row['rating'] == $i) {
                echo "selected=\"selected\"";
            }

            echo ">" . $values[$i] . "</option>";

        }

        ?>

        </select>
        <input type ="Submit" name ="formSubmit" value ="Submit" />
        </form>
}

Answer 1

I suggest you work this out with AJAX. Instead of submitting it as form, send it as a AJAX request. Something like:

$('select[name="rating"]').change(function () {
    var rating = $("select[name="rating"] option:selected").val();
    $.post(
        'YOUR-URL.php',
        {'rating' : rating},
        function(response) {
            //do what you got to do
        }
    )
});