html 表格，提交并停留在页面的同一位置

Question

I have a long form for our learners to complete. When they click the Save Progress button to submit their work so far, the page automatically jumps back to the top and they have to scroll down to find their last answer submitted.

I'd like them to be able to save their progress at any point and stay at that point on the page.

I've tried the following, the alert appears and the page stays still but the learners work isn't saved.

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
  $(function () {

    $('#form1').on('submit', function (e) {

      e.preventDefault();

      $.ajax({
        type: 'post',
        url: 'Ext1SUp.php',
        data: $('#form1').serialize(),
        success: function () {
          alert('form was submitted');
        }
      });

    });

  });
</script>

Form action:

<form action=  "Ext1SUp.php" method="post" id="form1">

Save Progress button:

<button type="Submit" name="Save" class="save-progress" form="form1" value="Submit" >Save Progress</button>

PHP:

<?php
require_once 'login.php';
$connection = new mysqli($hn, $un, $pw, $db);
if ($connection -> connect_error) {
echo "Failed to connect to MySQL: " . $connection -> connect_error;
}
if(isset($_POST['Submit'])) {
$sql =  "UPDATE unit1 SET 
         U1Q1 = '{$_POST['U1Q1']}' 
        ,U1Q2 = '{$_POST['U1Q2']}'
        ,U1Q3 = '{$_POST['U1Q3']}'
        ,U1Q4 = '{$_POST['U1Q4']}' 
        ,U1Q5 = '{$_POST['U1Q5']}'
        ,U1Q6 = '{$_POST['U1Q6']}'
        ,U1Q7 = '{$_POST['U1Q7']}'
        ,U1Q8 = '{$_POST['U1Q8']}'
        ,U1Q9a = '{$_POST['U1Q9a']}',U1Q9b = '{$_POST['U1Q9b']}',U1Q9c = '{$_POST['U1Q9c']}',U1Q9d = '{$_POST['U1Q9d']}'
        ,U1Q10 = '{$_POST['U1Q10']}'
        ,U1Q11a = '{$_POST['U1Q11a']}',U1Q11b = '{$_POST['U1Q11b']}',U1Q11c = '{$_POST['U1Q11c']}',U1Q11d = '{$_POST['U1Q11d']}'
        ,U1Q12 = '{$_POST['U1Q12']}'
        ,U1Q13 = '{$_POST['U1Q13']}'
        ,U1Q14 = '{$_POST['U1Q14']}'
        ,U1Q15a = '{$_POST['U1Q15a']}',U1Q15b = '{$_POST['U1Q15b']}',U1Q15c = '{$_POST['U1Q15c']}',U1Q15d = '{$_POST['U1Q15d']}',U1Q15e = '{$_POST['U1Q15e']}'
        ,U1Q16a = '{$_POST['U1Q16a']}',U1Q16b = '{$_POST['U1Q16b']}',U1Q16c = '{$_POST['U1Q16c']}',U1Q16d = '{$_POST['U1Q16d']}'
        ,U1Q17 = '{$_POST['U1Q17']}'
        ,U1Q18a = '{$_POST['U1Q18a']}',U1Q18b = '{$_POST['U1Q18b']}',U1Q18c = '{$_POST['U1Q18c']}'
        ,U1Q19 = '{$_POST['U1Q19']}'
        ,U1Q20a = '{$_POST['U1Q20a']}',U1Q20b = '{$_POST['U1Q20b']}',U1Q20c = '{$_POST['U1Q20c']}',U1Q20d = '{$_POST['U1Q20d']}'
        ,U1Q21 = '{$_POST['U1Q21']}'
        ,U1Q22 = '{$_POST['U1Q22']}'
        ,U1Q23 = '{$_POST['U1Q23']}'
        ,U1Q24a = '{$_POST['U1Q24a']}',U1Q24b = '{$_POST['U1Q24b']}',U1Q24c = '{$_POST['U1Q24c']}'
        ,U1Q25 = '{$_POST['U1Q25']}'
        ,U1Q26 = '{$_POST['U1Q26']}'
        ,U1Q27 = '{$_POST['U1Q27']}'
        WHERE id = '{$_POST['id']}'";

$result = mysqli_query($connection, $sql);
    }
    header('Location: Ext1S.php');    
?>

The process works fine, it only stops saving after adding the script to prevent the page from scrolling.

I hope someone can offer me some advice,

Thank you Lisa

Answer 1

Change button type to "button" instead of "submit" to prevent executing form. You are storing data using ajax so it's not needed to submitting form using button.

Answer 2

Button Type should be a "button". Remove "form" attribute from button, and change your $().on('submit') to for ex. function submitForm () {} . Then as the button attribute add onclick="submitForm()". And you can remove your preventDefault(); and action attribute from form, because you sending data by Ajax, not with a classic form. Classic forms has to refresh page after submit, but with ajax you even don't need to submit anything. Just send async request in separated function.
Something like this:

 function submitForm(){ $.ajax({ type: 'post', url: 'Ext1SUp.php', data: $('#form1').serialize(), success: function () { alert('form was submitted'); } }); }

 <form id="form1"> <;-- Yours form --> <button type="button" onclick="submitForm();">Submit</button> </form>

OH. And I almost forget. You have to remove yours if(isset($_POST['Submit'])) {} from PHP in this case. And stop using mysqli for connection:) try out PDO