在提交表單不工作時使用Ajax留在同一頁面

Question

我試圖創建一個表單，當您提交表單時，您將停留在同一頁面上並將用戶輸入發送到Process.php和我的數據庫。我現在面臨的問題是，無論是頁面刷新或打開的頁面Process.php

我的形式

<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

可能你對你的表單採取了行動。如果您向表單提供操作，它將打開您在操作中指定的頁面。嘗試刪除表單的action屬性。如果你給

Answer 2

儘量防止默認啓動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 3

也許這將解決該問題（從this other SO question抄答案，用學分@HarveyARamer）之前，你的Ajax成功後，而不是：

我最好的猜測是，你將你的form提交聽衆 前形式實際呈現。嘗試包裝你的jQuery $(document).ready(function() {});

Answer 4

的Html

使用類型按鈕而不是提交

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

的Javascript

在點擊功能使用此功能，下面

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

    e.preventDefault(); 

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

     });