[英]Using Ajax to stay on the same page upon submiting form not working
我試圖創建一個表單,當您提交表單時,您將停留在同一頁面上,並將用戶輸入發送到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');
}
});
});
});
也許這可以解決問題( 此其他SO問題的復制答案,以@HarveyARamer表示感謝):
我最好的猜測是您要在實際呈現表單之前添加
form
提交偵聽器。 嘗試將jQuery包裝在$(document).ready(function () {})
;
可能是您對表格采取了行動。 如果您向表單提供操作,它將打開您在操作中指定的頁面。 嘗試刪除表單的動作屬性(如果您給了
在ajax成功之后而不是在啟動ajax之前嘗試防止默認
$(function () {
$('form').on('submit', function (e) {
$.ajax({
type: 'post',
url: 'process.php',
data: $('form').serialize(),
success: function () {
alert('form was submitted');
e.preventDefault();
}
});
});
});
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');
}
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.