0
我試圖從多個文本框中讀取值，然後將這些值以單個字符串的形式發送到我的PHP處理頁面，並將其添加到數據庫表。從多個文本框讀取值並將它們作爲單個字符串使用JavaScript發送
另外，上面提到的文本框是使用JQuery動態創建的，對於使用下拉列表中所選錯誤的ID作爲存儲隔間的用戶隱藏了該字段。
我知道如何在PHP中完成這項工作，但我使用中間的javaScript將數據從表單移交給PHP。
我已經發布了幾乎所有與動態添加/刪除區域直接相關的代碼，這些函數正在工作，但爲了以防萬一，添加了它們。
我的問題是我無法獲得名爲「errorId」的隱藏文本框的值，並將它們放在一個字符串中發送到PHP頁面。
我想要做這樣的事情IE：&errorId=19, 1, 15, 34 .... etc
我曾嘗試很多建議從SO但所有這些給我的變量undefined。正如你可以看到我的最後一次嘗試仍然在我的代碼document.getElementsByName("errorId")[0].value;。我試圖在JavaScript中做這個部分，希望有人能教會我如何完成這件事。
HTML：
<div id="jType-container">
<div id="error-Add-Container">
<div id="error-Column-Headings">
Error Number<span>Error Name</span>
</div>
<div class="error-Column">
<div class="error-container">
<input class="errorCount" size="1" value="1" style="margin-left: 2%" />
<select id="errorName" class="errorName">
<option disabled></option>
</select>
<input class="errorId" size="1" name="errorId" readonly hidden>
<input type="button" class="addRow" value="Add" disabled />
<input type="button" class="delRow" value="Delete" />
</div>
</div>
</div>
</div>
提交功能：
function timeSheetAdd() {
var jType = document.querySelector("input[name=jType]:checked").value,
errorId = document.getElementsByName("errorId")[0].value;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("msgID").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("POST", "../Functions/TimeSheetSubmit.php?jType=" + jType + "&errorId=" + errorId, true);
xmlhttp.send();
}
功能我用它來填充下拉：
//The function to drag the error data from the table qcErrors and populate the drop downs
function getError() {
//Get the selected ID using this.is in client side HTML then breaks it up using this to get the ID only
var errorSelect = document.getElementById("errorName");
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
if (errorSelect.selectedIndex === 0) {
errorSelect.innerHTML = xmlhttp.responseText;
}
}
};
xmlhttp.open("POST", "../functions/getQcErrors.php?error=geterror", true);
xmlhttp.send();
}
動態按鈕創建和啓用/禁用功能jQuery的：
//Disable the Start button after single click
function startBtnDisable() {
document.getElementById("getStartTime").disabled = 'true';
}
//Disable the End button after single click
function endBtnDisable() {
document.getElementById("getEndTime").disabled = 'true';
}
//Enable job type radio buttons
function enableJtype() {
var client = document.getElementById("clientSelect").value,
strTimeBtn = document.getElementById("getStartTime"),
jType = document.getElementsByClassName("jType");
if (client !== "") {
if (client === "Break") {
for (var j = 0; j < jType.length; j++) {
jType[j].disabled = true;
}
strTimeBtn.disabled = false
} else {
//For loop to enable radio buttons
for (var i = 0; i < jType.length; i++) {
jType[i].disabled = false;
}
}
} else {
for (var j = 0; j < jType.length; j++) {
jType[j].disabled = true;
}
}
}
// Show or hide the div which contains the error inputs
// If the QC job type is selected.
$(document).ready(function() {
$('.jType').click(function() {
if ($('#qc').is(':checked')) {
$('#jType-container').show(); //Show the content of the error container div
getError(); //Populates the error name drop down
} else {
$('#jType-container').hide();
}
$('#getStartTime').prop('disabled', false); //Enables the get start time button
});
$('#getStartTime').mousedown(function() {
$('#getEndTime').prop('disabled', false); //Enables the get end time button
$('.addRow').prop('disabled', false);
});
$(document).on('change', '.errorName', function() {
var sid = $(this).find('option:selected').attr('id');
$('.errorId').filter(':last').val(sid);
})
});
// Add and remove function for the error text boxes
$(document).ready(function() {
$(document).on('click', '.addRow', function() {
var selectedIndex = $('.errorId').filter(':last').val();
if (selectedIndex !== "") {
//$('.error-Column .error-container:first').clone().appendTo('.error-Column');//Clones the row
// --- Disabled due to is clones and resets the value of the drop down box
var $clone = $('.error-Column .error-container:first').clone().appendTo('.error-Column');
$clone.find('.errorId').val(''); //Find the errorId text box and makes value = ""
$clone.find('select.errorName').focus(); //When cloned set the focus to the error selector
$('.addRow').prop('disabled', true).filter(':last').prop('disabled', false); //Add a row and disables add buttons above
resetErrorNo(); //Reset the values
getError(); //Pulls the errors from the DB
} else {
alert("Select an error name");
}
}).on('click', '.delRow', function() {
var $btn = $(this);
if (confirm('Your sure you want to remove this?')) {
$btn.closest('.error-container').remove(); //Removes the row
$('.addRow').prop('disabled', true).filter(':last').prop('disabled', false); //Enables the last add button
resetErrorNo(); //Reset the values
}
});
});
//Reset the entire error count number index
function resetErrorNo() {
$(".errorCount").each(function(index, _this) {
$(this).val(index + 1);
});
}
是的，它的工作就像一個魅力。 – Sand
謝謝。 Cleanest：for（var error_input in error_inputs）{errorIds.push（error_input.value）; } – pagetronic