提交表单后无法使用Ajax停留在同一页面上

Question

Im trying to create a form that when you submit the form,you stay on the same page and sends the user inputs to Process.php and to my database. The problem that I'm facing is that the page either refreshes or opens up the page Process.php

My Form

<form action="process.php" method="post" class="copy" id="formid" enctype="multipart/form-data">

    Project name: <input type="text" name="name"> <br>


        Video: 
        <input type="text" rows="1" cols="40" name="video">
    <br> 
    Svar 1<input type="text" name="answer1"/> 
    <select name="point1">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
    </select>
    <br>
    Svar 2<input type="text" name="answer2"/> 
    <select name="point2">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
    </select>
    <br>
    Svar 3<input type="text" name="answer3"/> 
    <select name="point3">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
    </select>
    <br>
    Svar 4<input type="text" name="answer4"/> 
    <select name="point4">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
    </select>
    <br>



       <br>
    <input type="submit" name="submit" value="create question" id="submit">
    </form>

Process.php

<?php
// Exempel 1: Lägga till 

if (isset($_POST['submit'])){

$localhost = "localhost";
$username = "root";
$password = "";

$connect = mysqli_connect($localhost, $username, $password)or 
die("Kunde inte koppla");

mysqli_select_db($connect, 'wildfire');


$name=$_POST['name'];
$video=$_POST['video'];
$answer1=$_POST['answer1'];
$answer2=$_POST['answer2'];
$answer3=$_POST['answer3'];
$answer4=$_POST['answer4'];

$point1=$_POST['point1'];
$point2=$_POST['point2'];
$point3=$_POST['point3'];
$point4=$_POST['point4'];




$sql1= "INSERT INTO question (answer, point) VALUES ('$answer1', '$point1')";

$result=$connect->query($sql1);

$sql2= "INSERT INTO question (answer, point) VALUES ('$answer2', '$point2')";

$result=$connect->query($sql2);

$sql3= "INSERT INTO question (answer, point) VALUES ('$answer3', '$point3')";

$result=$connect->query($sql3);

$sql4= "INSERT INTO question (answer, point) VALUES ('$answer4', '$point4')";

$result=$connect->query($sql4);

print $sql1;
print $sql2;
print $sql3;
print $sql4;

}


?>

Javascript

$(function () {

        $('form').on('submit', function (e) {

          e.preventDefault();

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

        });

      });   

Answer 1

Maybe this will fix the issue (copied answer from this other SO question , with credits to @HarveyARamer):

My best guess is that you are adding your form submit listener before the form is actually rendered. Try wrapping your jQuery in $(document).ready(function () {}) ;

Answer 2

probably you gave action to your form. If you provide action to your form it will open the page which you specified in your action. Try remove action attribute of form If you gave

Answer 3

try prevent default after your ajax success instead of before starting ajax

$(function () {

    $('form').on('submit', function (e) {

      $.ajax({
        type: 'post',
        url: 'process.php',
        data: $('form').serialize(),
        success: function () {
          alert('form was submitted');
          e.preventDefault();
        }
      });

    });

  });   

Answer 4

Html

Use type as button instead of submit

<input type="button" name="submit" value="create question" id="submit">

Javascript

On Click function use this below function

$('#submit').click(function(e){

     e.preventDefault();

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

        });