时间戳

首页 > 解决方案 > html表单，提交并停留在页面上的同一位置

javascript - html表单，提交并停留在页面上的同一位置

问题描述

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

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

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

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

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

希望有人能给我一些建议

谢谢丽莎

标签： javascriptphphtmljquery

解决方案

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.

推荐阅读