html form, submit and stay at same place on page

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

if `$_POST['U1Q1']` is filled with user data from the form, you are open to sqlinjections. https://stackoverflow.com/a/601524/9496199 — Ramon de Vries, Jun 05 '20 at 08:44

score 0 · Answer 1 · answered Jun 05 '20 at 08:42

0

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.

answered Jun 05 '20 at 08:42

Davor Mlinaric

1,867
1
19
25

1

In addition: remove the action and method from the form tag. – Gerard Jun 05 '20 at 08:45

Łukasz Fala Falkowski · Answer 2 · 2020-06-05T09:03:37.890

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

html form, submit and stay at same place on page

2 Answers2