我试图从多个文本框中读取值，然后将这些值以单个字符串的形式发送到我的PHP处理页面，然后将其添加到数据库表中。
此外，上面提到的文本框是使用JQuery动态制作的，该文件对用户是隐藏的，它使用下拉列表作为所选错误ID的存储区。
我知道如何在PHP中完成这项工作，但我在中间使用javaScript将数据从表单移交给PHP。
我发布了几乎所有与动态添加/删除区域直接相关的代码，这些功能正在运行但是为了以防万一而添加它们。
我的问题是我无法获得名为＆＃34; errorId＆＃34;的隐藏文本框的值。并将它们放在一个字符串中发送到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);
});
}
答案 0 :(得分：1)
如果我理解：
var error_inputs = document.getElementsByName("errorId");
var errorIds = [];
for(var i=0; i<error_inputs.length; i++) {
errorIds.push(error_inputs[i].value);
}
var errorId = errorIds.join(', ');
答案 1 :(得分：1)
我的问题是我无法获得名为＆＃34; errorId＆＃34;的隐藏文本框的值。并将它们放在一个字符串中发送到PHP页面
errorId = document.getElementsByName("errorId")[0].value;
在上面一行中，您只获取了errorId的第一个值。
如果您想获取所有值，请使用
var value = [];
var e = document.getElementsByName("errorId");
for (a of e)
value.push(a.value);
value = value.toString();
console.log(value);<input name="errorId" value="1" />
<input name="errorId" value="2" />
<input name="errorId" value="10" />
<input name="errorId" value="12" />
答案 2 :(得分：0)
编辑：您使用jQuery标记了问题，但似乎您使用的是纯JavaScript。如果您不使用jQuery，请参阅@pagetronic的答案。
使用这个jQuery选择器，您可以获得包含errorId代码的所有元素（按类选择）：
$('.errorId')
然后你可以循环它们，将元素值附加到你可以在POST中使用的变量，如下所示：
var toPost = '';
$('.errorId').each(function() {
toPost = toPost + ' ' + $(this).val();
});