[英]how can insert all table's rows from script to database at once
我有一個問題...在這里,每當用戶按下“添加”按鈕時,都將創建表的行,如何只按提交插入數據庫的最后一行而不是將所有表插入數據庫的情況,一次如何將表的所有數據發送到數據庫?應該提交所有數據的所有行
我是php的新手,所以在php代碼中沒有很多,這是php代碼
<?php
include_once("dbinfo.php");
session_start();
$name= $_SESSION['user'];
if(isset($_POST['savepav'])){
date_default_timezone_set("Asia/Riyadh");
$pavdate= date("Y/m/d");
$pavtime=date("h:i:sa");
$pavloca=$_POST['pavlocation'];
$pavtype=$_POST['ddlPassport'];
$pavdist=$_POST['pavedist'];
$pavplan=$_POST['pavplan'];
$pavseve=$_POST['pavseverity'];
echo "<script>alert(' Pavement data saved successfully ');</script>";
$query="INSERT INTO `pevement`(`userName`, `plocation`, `pavType`, `padistr`, `pavplan`, `severity`, `pavdate`, `pavtime`) VALUES ('$name' ,'$pavloca', '$pavtype', '$pavdist' ,'$pavplan', '$pavseve', '$pavdate' ,'$pavtime')";
$result_query=mysqli_query($conn,$query);
}
?>
這是腳本代碼
<script>
function AddData() {
var rows = "";
var name = document.getElementById("locapavm").value;
var city = document.getElementById("sevepavm").value;
var plan = document.getElementById("planpavm").value;
rows += "<tr><td>" + name + "</td><td>" + city + "</td><td>" + plan + "</td><td><button onclick = deleterow(this)>Delete</button></td></tr>";
$(rows).appendTo("#list tbody");
}
function ResetForm() {
document.getElementById("person").reset();
}
function deleterow(el) {
$(el).closest('tr').remove();
}
</script>
和HTML
<html>
<div id = "data">
<form id = "person">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="col-12" style="width: 1514px">
<select id = "locapavm" name = "pavlocation" style="width: 26%">
<option value="">- Location -</option>
<option value="Runway 17">Runway 17</option>
<option value="Runway 35">Runway 35</option>
<option value="Runway 18">Runway 18</option>
<option value="Runway 36">Runway 36</option>
</select><br>
<div class="col-12">
<select id = "ddlPassport" name = "ddlPassport" style="width: 26%" onchange = "ShowHideDiv()">
<option value="">- Pavement Type -</option>
<option value="Flexible Pavement (Asphalt)">Flexible Pavement (Asphalt)</option>
<option value="Rigid Pavement (Concrete)">Rigid Pavement (Concrete)</option>
</select>
</div><br/>
<div class="col-12" style="width: 1514px">
<select id="pavdistrees" name="pavedist" style="width: 26%">
<option value="">- Distress selections - </option>
</select><br> </div>
<div class="col-12" style="width: 1514px">
<select id="sevepavm" name="pavseverity" style="width: 26%">
<option value="">- Severity -</option>
<option value="Low">Low</option>
<option value="Medium"> Medium</option>
<option value="High">High</option>
</select><br> </div>
<!----------------------------------------------------------------------->
<p class="auto-style1">Maintenance Plan:</p>
<textarea id="planpavm" name="pavplan" style="width: 572px; height: 129px" ></textarea><br>
<input id = "person" type = "reset" value = " Reset " onclick = "ResetForm()">
<input id = "button" type = "button" value = " Add " onclick = "AddData()">
</form>
</div>
<div id = "tab" style="width: 76%">
<table style="width: 96%" id = "list" cellspacing = "0px" cellpadding = "20px" text-align = "center">
<thead>
<tr>
<td>Location</td>
<td>Pavement Type</td>
<td>Type Distrees</td>
<td>Severity</td>
<td style="width: 396px">Maintenance Plan</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<br><input type="submit" name="savepav" value="Submit"/>
</html>
我看到您正在使用JQuery,因此基於此,我認為XHR是您的最佳選擇。 如果您使用“添加”按鈕將其添加到表中,那么除了重定向到其他頁面外,我看不到“提交”按鈕的意義,因此在此示例中我將省略它,並且如果您有其他計划,請稍后再編輯我的答案。
您的PHP代碼看起來不錯,除了它容易受到SQL注入攻擊之外。 為防止這種情況,我將對放在數據庫中的所有字符串調用mysql_real_escape_string
方法,如下所示:
$pavloca=mysql_real_escape_string($_POST['pavlocation']);
$pavtype=mysql_real_escape_string($_POST['ddlPassport']);
$pavdist=mysql_real_escape_string($_POST['pavedist']);
$pavplan=mysql_real_escape_string($_POST['pavplan']);
$pavseve=mysql_real_escape_string($_POST['pavseverity']);
對於HTML,我會給你Add
按鈕的類型submit
,然后添加action
和method
屬性,你開始form標簽,就像這樣:
<form id = "person" method = "POST" action = "/path/to/php/page">
/path/to/php/page
是將所有內容添加到數據庫的PHP頁面的路徑。
最后是JavaScript。
不用在“ Add
按鈕上具有onclick
屬性,而是將其刪除,然后將這部分JQuery添加到腳本標簽中:
$("#person").submit(function(d){
d.preventDefault();
AddData(new FormData(d.target));
})
然后為您的AddData函數添加以下形式的輸入參數:
function AddData(form)
PS,完成此操作后有一點技巧,實際上您可以通過name
屬性而不是像這樣的id
來獲取值:
var name = form["pavlocation"];
var city = form["pavseverity"];
var plan = form["pavplan"];
最后但並非最不重要的一點,將以下代碼添加到AddData()
函數的末尾:
var xhr = new XMLHttpRequest();
xhr.open(form.method, form.action);
xhr.send();
就是這樣!
注意:我沒有測試任何這些,因此對於任何錯別字或語法錯誤,我深表歉意。 如果這不起作用,我將相應地編輯答案。
編輯:您發布的HTML中有幾個亂序標記,所以我通過IDE對其進行了一些清理,並在此處為其創建了JSFiddle: https ://jsfiddle.net/djy9vget/ 2 /
您必須將action="/path/to/php/page.php"
位更改為實際路徑,但action="/path/to/php/page.php"
,這應該可以工作。 我還注意到在原始答案XmlHttpRequest();
有一個錯字XmlHttpRequest();
應該是XMLHttpRequest();
。
我還從person
(與表單相同)將“ Reset
按鈕的ID更改為reset
。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.