我想從模式形式(JQuery-UI)傳遞一些數據到MySQL數據庫,我用POST方法嘗試了action =「」,但沒有出現在我的數據庫中。 我在谷歌搜索了3個第一頁中的每一個答案,但我沒有找到任何解決我的問題。我會附上我的代碼,以便你能看到我的代碼並糾正我。我使用的模式形式是關於新的客戶表單。我點擊我的頁面上的「添加客戶端」按鈕,彈出窗口(模式窗體)打開時會顯示一些html輸入信息,當我按提交時,我想要將該數據插入到我的數據庫中。 謝謝!如何將數據從模態窗體(JQUERY-UI)傳遞到mysql?
模式表單代碼:
<div id="dialog-form" title="Add new client">
<form name="new_client" method="POST" action="addclient.php">
<fieldset>
<label for="name">First Name</label>
<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all">
<label for="last">Last Name</label>
<input type="text" name="last" id="last" class="text ui-widget-content ui-corner-all">
<label for="address">Address</label>
<input type="text" name="address" id="address" class="text ui-widget-content ui-corner-all">
<label for="num">Nr. of Address</label>
<input type="text" name="num" id="num" class="text ui-widget-content ui-corner-all">
<label for="city">City</label>
<input type="text" name="city" id="city" class="text ui-widget-content ui-corner-all">
<label for="postal">Postal Code</label>
<input type="text" name="postal" id="postal" class="text ui-widget-content ui-corner-all">
<label for="state">State</label>
<input type="text" name="state" id="state" class="text ui-widget-content ui-corner-all">
<!-- Allow form submission with keyboard without duplicating the dialog button -->
<input type="submit" method="POST" name="insert-client" id="insert-client" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
</form>
(and the div tag here)
(和下面的結束標記)
AddClient.php
<?php
require_once('mysqli_connect.php');
if(isset('insert-client')){
$f_name = $_POST['name'];
$l_name = $_POST['last'];
$address = $_POST['address'];
$num = $_POST['num'];
$city = $_POST['city'];
$postal = $_POST['postal'];
$state = $_POST['state'];
$query = "INSERT INTO clients(clientID, name, last, address, num, city, postal, state) VALUES (NULL, $f_name, $l_name, $address, $num, $city, $postal, $state)";
mysqli_query($dbc, $query);
mysqli_close($dbc);
}
?>
我也tryed把下面這行代碼在我頭上的標籤模態形式javascript
$.post("addclient.php", $("new_client").serialize());
我張貼在這裏的頭標記的腳本代碼來檢查它
<script>
$(function() {
var dialog, form,
// From http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#e-mail-state-%28type=email%29
emailRegex = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-][email protected][a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/,
name = $("#name"),
last = $("#last"),
address = $("#address"),
num = $("#num"),
city = $("#city"),
postal = $("#postal"),
state = $("#state"),
allFields = $([]).add(name).add(last).add(address).add(num).add(city).add(postal).add(state),
tips = $(".validateTips");
function updateTips(t) {
tips
.text(t)
.addClass("ui-state-highlight");
setTimeout(function() {
tips.removeClass("ui-state-highlight", 1500);
}, 500);
}
function checkLength(o, n, min, max) {
if (o.val().length > max || o.val().length < min) {
o.addClass("ui-state-error");
updateTips("Length of " + n + " must be between " +
min + " and " + max + ".");
return false;
} else {
return true;
}
}
function checkRegexp(o, regexp, n) {
if (!(regexp.test(o.val()))) {
o.addClass("ui-state-error");
updateTips(n);
return false;
} else {
return true;
}
}
function addUser() {
var valid = true;
allFields.removeClass("ui-state-error");
valid = valid && checkLength(name, "name", 3, 16);
valid = valid && checkLength(name, "last", 3, 16);
valid = valid && checkLength(name, "address", 3, 16);
valid = valid && checkLength(name, "num", 3, 16);
valid = valid && checkLength(name, "city", 3, 16);
valid = valid && checkLength(name, "postal", 3, 16);
valid = valid && checkLength(name, "state", 3, 16);
if (valid) {
$("#clients tbody").append("<tr>" +
"<td>" + name.val() + "</td>" +
"<td>" + last.val() + "</td>" +
"<td>" + address.val() + "</td>" +
"<td>" + num.val() + "</td>" +
"<td>" + city.val() + "</td>" +
"<td>" + postal.val() + "</td>" +
"<td>" + state.val() + "</td>" +
"</tr>");
dialog.dialog("close");
}
return valid;
}
dialog = $("#dialog-form3").dialog({
autoOpen: false,
height: 680,
width: 770,
modal: true,
buttons: {
"Προσθήκη": addUser,
Cancel: function() {
dialog.dialog("close");
}
},
close: function() {
form[ 0 ].reset();
allFields.removeClass("ui-state-error");
}
});
form = dialog.find("form").on("submit", function(event) {
event.preventDefault();
addUser();
});
$("#create-user3").button().on("click", function() {
dialog.dialog("open");
});
});
</script>
改變輸入型提交按鈕並添加表單id爲「new_client」,並將jquery「new_client」替換爲「#new_client」 –
目前還不清楚所有JavaScript代碼如何與HTML和PHP代碼相關。你是通過AJAX提交這個表單而不是一個正常的表單文章嗎?至少,$(「new_client」)不正確。也許你的意思是'$(「form [name ='new_client']」)'?另外請注意,您的PHP代碼可以廣泛應用於SQL注入,因此可能由於許多原因而失敗。而且由於你沒有檢查'mysqli_error($ dbc)',你不能確定。使用準備好的語句和查詢參數進行輸入至少可以解決這個問題。 – David