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

Question

我有一个很长的表格供我们的学习者填写。 当他们单击“保存进度”按钮提交到目前为止的工作时，页面会自动跳回顶部，他们必须向下滚动才能找到他们提交的最后一个答案。

我希望他们能够在任何时候保存他们的进度并停留在页面上的那个点。

我尝试了以下操作，出现警报并且页面保持静止，但未保存学习者的工作。

<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=  "Ext1SUp.php" method="post" id="form1">

保存进度按钮：

<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');    
?>

该过程运行良好，仅在添加脚本以防止页面滚动后才停止保存。

希望有人能给我一些建议

谢谢丽莎

Answer 1

将按钮类型更改为“按钮”而不是“提交”以防止执行表单。 您正在使用 ajax 存储数据，因此不需要使用按钮提交表单。

Answer 2

按钮类型应该是“按钮”。 从按钮中删除“form”属性，并将您的 $().on('submit') 更改为 for ex。 function submitForm () {} 。 然后作为按钮属性添加 onclick="submitForm()"。 你可以删除你的 preventDefault(); 和表单中的操作属性，因为您通过 Ajax 发送数据，而不是使用经典表单。 经典 forms 必须在提交后刷新页面，但使用 ajax 您甚至不需要提交任何内容。 只需在单独的 function 中发送异步请求。
像这样的东西：

 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>

哦。 我几乎忘记了。 在这种情况下，您必须从 PHP 中删除您的if(isset($_POST['Submit'])) {} 。 并停止使用 mysqli 进行连接:) 尝试 PDO