我有一個可點擊的按鈕,可以調出帶有一個文本框的彈出框。每當我輸入內容並點擊「添加」時,我都希望它被插入到我的數據庫中。使用HTML/PHP/AJAX將行插入到數據庫中
目前,當我點擊「添加」時,它會插入數據庫,但它不會讀取輸入的值。因此,只需輸入一個空值。我沒有看到任何錯誤,但是在JavaScript中,我執行的操作是console.log(dict)
,日誌中的輸出爲Object {}
,因此看起來好像沒有記錄輸入的值。我也在日誌中獲得成功的行插入消息,所以我肯定會認爲這只是能夠獲取值的讀取問題。
所以我的問題是我怎樣才能讀取它的值,併成功地將它輸入到數據庫中。
HTML的添加按鈕:
<td><button class="create-user" id="insertButton">Add Group</button></td>
彈出的HTML箱:
<div id="dialog-form" title="Add Group">
<p class="validateTips">Please Add a Group</p>
<!-- Dialog box displayed after add row button is clicked -->
<form>
<fieldset>
<label for="sku_group">SKU Group</label>
<input type="text" name="group" id="group" class="text ui-widget-content ui-corner-all">
<!-- Allow form submission with keyboard without duplicating the dialog button -->
<input type="submit" id="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
</form>
</div>
的JavaScript:
// ----- Dialog Box for adding a row -----
$(function() {
var dialog, form,
sku_group = $("#group"),
allFields = $([]).add(sku_group),
tips = $(".validateTips");
console.log(allFields);
function updateTips(t) {
tips
.text(t)
.addClass("ui-state-highlight");
setTimeout(function() {
tips.removeClass("ui-state-highlight", 1500);
}, 500);
}
function checkRegexp(o, regexp, n) {
if (!(regexp.test(o.val()))) {
o.addClass("ui-state-error");
updateTips(n);
return false;
} else {
return true;
}
}
function addGroup() {
var valid = true;
allFields.removeClass("ui-state-error");
// ----- Validation for each input in add row dialog box -----
valid = valid && checkRegexp(sku_group, /^[a-z]([0-9a-z_\s])+$/i, "Please enter a valid SKU Group name");
console.log(allFields);
if (valid) {
var $tr = $("#skuTable tbody tr").eq(0).clone();
var dict = {};
var errors = "";
$.each(function(){
$tr.find('.' + $(this).attr('id')).html($(this).val()+"-"+sku_group);
var type = $(this).attr('id');
var value = $(this).val();
console.log(type + " : " + value);
// ----- Switch statement that provides validation for each table cell -----
switch (type) {
case "group":
dict["SKU Group"] = value;
break;
}
});
$("#skuTable tbody").append($tr);
dialog.dialog("close");
console.log(dict);
var request = $.ajax({
type: "POST",
url: "insert-group.php",
data: dict
});
request.done(function (response, textStatus, jqXHR){
if(JSON.parse(response) == true){
console.log("row inserted");
} else {
console.log("row failed to insert");
console.log(response);
}
});
// Callback handler that will be called on failure
request.fail(function (jqXHR, textStatus, errorThrown){
console.error(
"The following error occurred: "+
textStatus, errorThrown
);
});
// Callback handler that will be called regardless
// if the request failed or succeeded
request.always(function() {
});
}
return valid;
}
var dialog = $("#dialog-form").dialog({
autoOpen: false,
height: 400,
width: 350,
modal: true,
buttons: {
"Add Group": addGroup,
Cancel: function() {
dialog.dialog("close");
}
},
close: function() {
form[ 0 ].reset();
}
});
form = dialog.find("form").on("submit", function(event) {
event.preventDefault();
addGroup();
});
$(".create-user").button().on("click", function() {
dialog.dialog({
show: 'blind',
hide: 'blind'
});
dialog.dialog("open");
});
});
刀片式group.php腳本:
<?php
$SKU_Group = $_POST['SKU Group'];
$host="xxxxxxxxxxx";
$dbName="xxxxxxx";
$dbUser="xxxx";
$dbPass="xxxxxxxxxxxxxx";
$pdo = new PDO("sqlsrv:server=".$host.";Database=".$dbName, $dbUser, $dbPass);
$sql = "INSERT INTO SKU_Group_Dim ([SKU Group]) VALUES (?)";
$stmt = $pdo->prepare($sql);
$result = $stmt->execute(array($SKU_Group));
echo json_encode($result);
?>
編輯
我的HTML表:
<table id="skuTable" cellspacing="5" class="ui-widget ui-widget-content">
<thead>
<tr class="ui-widget-header">
<th class="skuRow">SKU Group</th>
<th class="skuRow">Group ID</th>
<th class="skuRow">Edit</th>
<th class="skuRow">Delete</th>
</tr>
</thead>
<tbody>
<?php foreach ($dbh->query($sql_table) as $rows) { ?>
<tr>
<td class="sku_group" id="sku_group-<?php echo intval ($rows['SKU Group'])?>"><?php echo $rows['SKU Group']?></td>
<td class="group_id" align="center" id="group_id-<?php echo intval ($rows['Group_ID'])?>"><?php echo $rows['Group_ID']?></td>
<td><button type="button" class="edit" name="edit">Edit</button></td>
<td><button type="button" class="delete" onclick="deleteRow(this)">Delete</button></td>
</tr>
<?php
}
?>
</tbody>
</table>
什麼的console.log的輸出(類型+ 「:」 +值); (內部。每個函數? – boroboris
由於某種原因,我沒有得到一個輸出 – Rataiczak24
檢查我的答案如下。我認爲這是行不通的,因爲每個不重複,程序跳過它 – boroboris