使用 document.getElementById(formName).submit() 在 FireFox 中不起作用，在 Chrome 和 IE11 中起作用
Using document.getElementById(formName).submit() not working in FireFox, works in Chrome and IE11
好的，所以我已经摆弄了一段时间。我有一个表格和几个按钮。一个用于向表单添加字段，另一个用于在完成后提交表单。它们都是调用函数的按钮，一个用于添加元素，另一个只是调用提交命令。添加的元素之一是另一个删除添加元素的按钮（假设您要添加 2 行，然后单击添加 3 次 - 所以有一个 X 可以删除额外的行）
代码在我加载页面时以及在添加行后都按预期工作，但是如果我删除了我添加的行，则提交按钮在 FireFox 中不再有效。不过它在 IE 和 Chrome 中仍然有效。
我将以 2 种不同的方式为您提供我的代码，因为它是 PHP，因此您可以看到我在做什么，然后我将只从浏览器，以便您可以查看浏览器收到的内容与 Apache 正在处理的内容。
PHP:
<html>
<head></head>
<body>
<?php
REQUIRE("includes/db/mysqli_object.php");
if(count($_POST) > 0) {
echo "Post Submitted: \n<br>";
foreach($_POST as $index => $value) {
echo $index . '=' . $value . '<br>';
}
}
$teamOptionCount = 0;
$now = date_create(date("Y-m-d"));
$fullURL = $_SERVER['PHP_SELF'] . "?";
isset($_GET['team']) ? $team = $_GET['team'] : $team = '';
isset($_GET['mode']) ? $mode = $_GET['mode'] : $mode = 'day';
isset($_GET['year']) ? $year = $_GET['year'] : $year = $now -> format("Y");
isset($_GET['month']) ? $month = $_GET['month'] : $month = $now -> format("m");
isset($_GET['day']) ? $day = $_GET['day'] : $day = $now -> format("d");
foreach($_GET as $index => $value) {
$fullURL .= $index . '=' . $value . '&';
}
$teamInfo = $dashDB->query("SELECT * from `Dashboard`.`Groups` WHERE `GroupLogin` LIKE '$team'");
$teamInfo->data_seek(0);
while($row = $teamInfo->fetch_assoc()) {
$teamNum = $row['GID'];
}
$teamMemberQuery = $dashDB->query("SELECT * from `Dashboard`.`Users` WHERE `UserGroup` LIKE '$teamNum'");
$teamMemberQuery->data_seek(0);
$teamMembers = array();
while($row = $teamMemberQuery->fetch_assoc()) {
$id = $row['UserName'];
$teamMembers[$id] = $row['FirstName'] . " " . $row['LastName'];
}
$JavaScriptFunctions = "<script>
var fieldCounter = 0;
var rowCounter = 0;
function submitForm(formName) {
document.getElementById(formName).submit();
}
function addOnCallRow() {
rowCounter++;
rowName = 'newRow' + rowCounter;
nextRow = document.createElement('DIV');
nextRow.setAttribute('id', rowName);
document.getElementById('onCallList').appendChild(nextRow);
myDiv = document.getElementById(rowName);
var xButton = document.createElement('BUTTON');
var onClickAction = \"removeOnCallRow('onCallList','\" + rowName + \"')\";
xButton.setAttribute('onClick',onClickAction);
xButton.setAttribute('name','removeRow' + rowCounter);
xButton.innerHTML = 'X';
myDiv.appendChild(xButton);
previousHTML = myDiv.innerHTML;
previousHTML = previousHTML.concat(\"$year-$month-$day <br>Start: \");
myDiv.innerHTML = previousHTML;
startInput = document.createElement('INPUT');
startInput.setAttribute('id','startTime' + rowCounter);
startInput.setAttribute('name','startTime' + rowCounter);
startInput.setAttribute('type','text');
startInput.setAttribute('value','$year-$month-$day 00:00:00');
startInput.setAttribute('form','onCallList');
myDiv.appendChild(startInput);
previousHTML = myDiv.innerHTML;
previousHTML = previousHTML.concat(\" End: \");
myDiv.innerHTML = previousHTML;
endInput = document.createElement('INPUT');
endInput.setAttribute('id','endTime' + rowCounter);
endInput.setAttribute('name','endTime' + rowCounter);
endInput.setAttribute('type','text');
endInput.setAttribute('value','$year-$month-$day 00:00:00');
endInput.setAttribute('form','onCallList');
myDiv.appendChild(endInput);
previousHTML = myDiv.innerHTML;
previousHTML = previousHTML.concat(\"<br>Primary: \");
myDiv.innerHTML = previousHTML;
nextSelect = document.createElement('SELECT');
nextSelect.setAttribute('id','primaryNewSelect' + rowCounter);
nextSelect.setAttribute('name','primaryNewSelect' + rowCounter);
nextSelect.setAttribute('form','onCallList');
myDiv.appendChild(nextSelect);
primarySelect = document.getElementById('primaryNewSelect' + rowCounter);\n";
foreach($teamMembers as $index => $teamMember) {
$JavaScriptFunctions .= " primarySelect.options[primarySelect.length] = new Option('$teamMember','$index');\n";
}
$JavaScriptFunctions .= "
previousHTML = myDiv.innerHTML;
previousHTML = previousHTML.concat(\"<br>Secondary:\");
myDiv.innerHTML = previousHTML;
nextSelect = document.createElement('SELECT');
nextSelect.setAttribute('id','secondaryNewSelect' + rowCounter);
nextSelect.setAttribute('name','secondaryNewSelect' + rowCounter);
nextSelect.setAttribute('form','onCallList');
myDiv.appendChild(nextSelect);
secondarySelect = document.getElementById('secondaryNewSelect' + rowCounter);\n";
foreach($teamMembers as $index => $teamMember) {
$JavaScriptFunctions .= " secondarySelect.options[secondarySelect.length] = new Option('$teamMember','$index');\n";
}
$JavaScriptFunctions .= "
previousHTML = myDiv.innerHTML;
previousHTML = previousHTML.concat(\"<br>Tertiary:\");
myDiv.innerHTML = previousHTML;
nextSelect = document.createElement('SELECT');
nextSelect.setAttribute('id','tertiaryNewSelect' + rowCounter);
nextSelect.setAttribute('name','tertiaryNewSelect' + rowCounter);
nextSelect.setAttribute('form','onCallList');
myDiv.appendChild(nextSelect);
tertiarySelect = document.getElementById('tertiaryNewSelect' + rowCounter);\n";
foreach($teamMembers as $index => $teamMember) {
$JavaScriptFunctions .= " tertiarySelect.options[tertiarySelect.length] = new Option('$teamMember','$index');\n";
}
$JavaScriptFunctions .= "}
function removeOnCallRow(parentDiv,childDiv) {
if(parentDiv == childDiv) {
alert('Cannot remove Parent');
} else if(document.getElementById(childDiv)) {
var child = document.getElementById(childDiv);
var parent = child.parentElement;
parent.removeChild(child);
} else {
alert('There was a problem');
return false;
}
}
</script>";
echo $JavaScriptFunctions . "\n";
echo "<div id='mainOnCall'>\n";
echo "<form action='$fullURL' method='post' id='onCallList'>\n";
echo "<div>You selected $team $mode $year $month $day</div><br />\n";
echo "<div><input type=\"button\" id=\"addrow\" onclick=\"addOnCallRow()\" value=\"Add\"></input>
<input type=\"button\" id=\"SubmitForm\" onclick=\"submitForm('onCallList')\" value=\"Update\"></input>
</div>\n";
$queryresults = $dashDB->query("SELECT * from `OnCall`.`$team` WHERE `StartTime` LIKE '$year-$month-$day%'");
$queryresults->data_seek(0);
while ($row = $queryresults->fetch_assoc()) {
$StartTime = $row['StartTime'];
$EndTime = $row['EndTime'];
$Primary = $row['Primary'];
$Secondary = $row['Secondary'];
$Tertiary = $row['Tertiary'];
$Comments = $row['Comments'];
$user_row = array();
$StartDate = new DateTime($StartTime);
$StartDate = $StartDate -> format("Y-m-d");
$StartTimeNoDate = new DateTime($StartTime);
$StartTimeNoDate = $StartTimeNoDate -> format('H:i');
$EndDate = new DateTime($EndTime);
$EndDate = $EndDate -> format("Y-m-d");
$User1QueryResult = $dashDB->query("SELECT * FROM `Dashboard`.`Users` WHERE `UserName` LIKE '$Primary'");
while($User1 = $User1QueryResult->fetch_assoc()) {
$FirstName1 = $User1['FirstName'];
$LastName1 = $User1['LastName'];
$WorkPhone1 = $User1['wphone'];
$CellPhone1 = $User1['cphone'];
$HomePhone1 = $User1['HomePhone'];
$FullName1 = "$FirstName1 $LastName1";
}
$User2QueryResult = $dashDB->query("SELECT * FROM `Dashboard`.`Users` WHERE `UserName` LIKE '$Secondary'");
while($User2 = $User2QueryResult->fetch_assoc()) {
$FirstName2 = $User2['FirstName'];
$LastName2 = $User2['LastName'];
$WorkPhone2 = $User2['wphone'];
$CellPhone2 = $User2['cphone'];
$HomePhone2 = $User2['HomePhone'];
$FullName2 = "$FirstName2 $LastName2";
}
$User3QueryResult = $dashDB->query("SELECT * FROM `Dashboard`.`Users` WHERE `UserName` LIKE '$Tertiary'");
while($User3 = $User3QueryResult->fetch_assoc()) {
$FirstName3 = $User3['FirstName'];
$LastName3 = $User3['LastName'];
$WorkPhone3 = $User3['wphone'];
$CellPhone3 = $User3['cphone'];
$HomePhone3 = $User3['HomePhone'];
$FullName3 = "$FirstName3 $LastName3";
}
$user_row[] = array(
'Login1' => $Primary,
'Name1' => $FullName1,
'Work1' => $WorkPhone1,
'Cell1' => $CellPhone1,
'Home1' => $HomePhone1,
'Login2' => $Secondary,
'Name2' => $FullName2,
'Work2' => $WorkPhone2,
'Cell2' => $CellPhone2,
'Home2' => $HomePhone2,
'Login3' => $Tertiary,
'Name3' => $FullName3,
'Work3' => $WorkPhone3,
'Cell3' => $CellPhone3,
'Home3' => $HomePhone3,
'EndDate' => $EndDate,
'EndTime' => $EndTime,
'StartTime' => $StartTime);
foreach($user_row as $value) {
$SelectPrimary = "<select name='primarySelect$teamOptionCount'>\n";
$SelectSecondary = "<select name='secondarySelect$teamOptionCount'>\n";
$SelectTertiary = "<select name='tertiarySelect$teamOptionCount'>\n";
$LoginName1 = $value['Login1'];
$LoginName2 = $value['Login2'];
$LoginName3 = $value['Login3'];
$name1 = $value['Name1'];
$name2 = $value['Name2'];
$name3 = $value['Name3'];
$Start = $value['StartTime'];
$End = $value['EndTime'];
foreach($teamMembers as $LoginId => $member) {
$member == $name1 ? $SelectPrimary .= "<option value='$LoginId' selected>$member</option>\n" : $SelectPrimary .= "<option value='$LoginId'>$member</option>\n";
}
foreach($teamMembers as $LoginId => $member) {
$member == $name2 ? $SelectSecondary .= "<option value='$LoginId' selected>$member</option>\n" : $SelectSecondary .= "<option value='$LoginId'>$member</option>\n";
}
foreach($teamMembers as $LoginId => $member) {
$member == $name3 ? $SelectTertiary .= "<option value='$LoginId' selected>$member</option>\n" : $SelectTertiary .= "<option value='$LoginId'>$member</option>\n";
}
$SelectPrimary .= "</select>\n";
$SelectSecondary .= "</select>\n";
$SelectTertiary .= "</select>\n";
$startField = "<input name='start$teamOptionCount' value='$Start'>";
$endField = "<input name='end$teamOptionCount' value='$End'>";
echo "<div id='OnCall$teamOptionCount'>$year-$month-$day
<br>Start: $startField End: $endField
<br>Primary: $SelectPrimary
<br>Secondary: $SelectSecondary
<br>Tertiary: $SelectTertiary</div>\n";
$teamOptionCount++;
}
}
echo "
</form>\n</div>\n";
?>
</body>
</html>
和浏览器：
<html>
<head></head>
<body>
<script>
var fieldCounter = 0;
var rowCounter = 0;
function submitForm(formName) {
document.getElementById(formName).submit();
}
function addOnCallRow() {
rowCounter++;
rowName = 'newRow' + rowCounter;
nextRow = document.createElement('DIV');
nextRow.setAttribute('id', rowName);
document.getElementById('onCallList').appendChild(nextRow);
myDiv = document.getElementById(rowName);
var xButton = document.createElement('BUTTON');
var onClickAction = "removeOnCallRow('onCallList','" + rowName + "')";
xButton.setAttribute('onClick',onClickAction);
xButton.setAttribute('name','removeRow' + rowCounter);
xButton.innerHTML = 'X';
myDiv.appendChild(xButton);
previousHTML = myDiv.innerHTML;
previousHTML = previousHTML.concat("2015-07-01 <br>Start: ");
myDiv.innerHTML = previousHTML;
startInput = document.createElement('INPUT');
startInput.setAttribute('id','startTime' + rowCounter);
startInput.setAttribute('name','startTime' + rowCounter);
startInput.setAttribute('type','text');
startInput.setAttribute('value','2015-07-01 00:00:00');
startInput.setAttribute('form','onCallList');
myDiv.appendChild(startInput);
previousHTML = myDiv.innerHTML;
previousHTML = previousHTML.concat(" End: ");
myDiv.innerHTML = previousHTML;
endInput = document.createElement('INPUT');
endInput.setAttribute('id','endTime' + rowCounter);
endInput.setAttribute('name','endTime' + rowCounter);
endInput.setAttribute('type','text');
endInput.setAttribute('value','2015-07-01 00:00:00');
endInput.setAttribute('form','onCallList');
myDiv.appendChild(endInput);
previousHTML = myDiv.innerHTML;
previousHTML = previousHTML.concat("<br>Primary: ");
myDiv.innerHTML = previousHTML;
nextSelect = document.createElement('SELECT');
nextSelect.setAttribute('id','primaryNewSelect' + rowCounter);
nextSelect.setAttribute('name','primaryNewSelect' + rowCounter);
nextSelect.setAttribute('form','onCallList');
myDiv.appendChild(nextSelect);
primarySelect = document.getElementById('primaryNewSelect' + rowCounter);
primarySelect.options[primarySelect.length] = new Option('Jeremy Nicolls','dt51205');
primarySelect.options[primarySelect.length] = new Option('Michael Thompson','dt50571');
primarySelect.options[primarySelect.length] = new Option('Jon Griffey','dt50072');
primarySelect.options[primarySelect.length] = new Option('Marcus LaPilusa','dt51618');
primarySelect.options[primarySelect.length] = new Option('Max Guthzeit','dt50380');
primarySelect.options[primarySelect.length] = new Option('Jonathan Bishop','dt61240');
previousHTML = myDiv.innerHTML;
previousHTML = previousHTML.concat("<br>Secondary:");
myDiv.innerHTML = previousHTML;
nextSelect = document.createElement('SELECT');
nextSelect.setAttribute('id','secondaryNewSelect' + rowCounter);
nextSelect.setAttribute('name','secondaryNewSelect' + rowCounter);
nextSelect.setAttribute('form','onCallList');
myDiv.appendChild(nextSelect);
secondarySelect = document.getElementById('secondaryNewSelect' + rowCounter);
secondarySelect.options[secondarySelect.length] = new Option('Jeremy Nicolls','dt51205');
secondarySelect.options[secondarySelect.length] = new Option('Michael Thompson','dt50571');
secondarySelect.options[secondarySelect.length] = new Option('Jon Griffey','dt50072');
secondarySelect.options[secondarySelect.length] = new Option('Marcus LaPilusa','dt51618');
secondarySelect.options[secondarySelect.length] = new Option('Max Guthzeit','dt50380');
secondarySelect.options[secondarySelect.length] = new Option('Jonathan Bishop','dt61240');
previousHTML = myDiv.innerHTML;
previousHTML = previousHTML.concat("<br>Tertiary:");
myDiv.innerHTML = previousHTML;
nextSelect = document.createElement('SELECT');
nextSelect.setAttribute('id','tertiaryNewSelect' + rowCounter);
nextSelect.setAttribute('name','tertiaryNewSelect' + rowCounter);
nextSelect.setAttribute('form','onCallList');
myDiv.appendChild(nextSelect);
tertiarySelect = document.getElementById('tertiaryNewSelect' + rowCounter);
tertiarySelect.options[tertiarySelect.length] = new Option('Jeremy Nicolls','dt51205');
tertiarySelect.options[tertiarySelect.length] = new Option('Michael Thompson','dt50571');
tertiarySelect.options[tertiarySelect.length] = new Option('Jon Griffey','dt50072');
tertiarySelect.options[tertiarySelect.length] = new Option('Marcus LaPilusa','dt51618');
tertiarySelect.options[tertiarySelect.length] = new Option('Max Guthzeit','dt50380');
tertiarySelect.options[tertiarySelect.length] = new Option('Jonathan Bishop','dt61240');
}
function removeOnCallRow(parentDiv,childDiv) {
if(parentDiv == childDiv) {
alert('Cannot remove Parent');
} else if(document.getElementById(childDiv)) {
var child = document.getElementById(childDiv);
var parent = child.parentElement;
parent.removeChild(child);
} else {
alert('There was a problem');
return false;
}
}
</script>
<div id='mainOnCall'>
<form action='/edit_onCall.php?team=SASO&mode=day&year=2015&month=07&day=01&' method='post' id='onCallList'>
<div>You selected SASO day 2015 07 01</div><br />
<div><input type="button" id="addrow" onclick="addOnCallRow()" value="Add"></input>
<input type="button" id="SubmitForm" onclick="submitForm('onCallList')" value="Update"></input>
</div>
<div id='OnCall0'>2015-07-01
<br>Start: <input name='start0' value='2015-07-01 08:00:00'> End: <input name='end0' value='2015-07-02 08:00:00'>
<br>Primary: <select name='primarySelect0'>
<option value='dt51205'>Jeremy Nicolls</option>
<option value='dt50571'>Michael Thompson</option>
<option value='dt50072'>Jon Griffey</option>
<option value='dt51618'>Marcus LaPilusa</option>
<option value='dt50380'>Max Guthzeit</option>
<option value='dt61240' selected>Jonathan Bishop</option>
</select>
<br>Secondary: <select name='secondarySelect0'>
<option value='dt51205'>Jeremy Nicolls</option>
<option value='dt50571'>Michael Thompson</option>
<option value='dt50072'>Jon Griffey</option>
<option value='dt51618' selected>Marcus LaPilusa</option>
<option value='dt50380'>Max Guthzeit</option>
<option value='dt61240'>Jonathan Bishop</option>
</select>
<br>Tertiary: <select name='tertiarySelect0'>
<option value='dt51205'>Jeremy Nicolls</option>
<option value='dt50571' selected>Michael Thompson</option>
<option value='dt50072'>Jon Griffey</option>
<option value='dt51618'>Marcus LaPilusa</option>
<option value='dt50380'>Max Guthzeit</option>
<option value='dt61240'>Jonathan Bishop</option>
</select>
</div>
</form>
</div>
</body>
</html>
我真的不确定为什么这在 FireFox 中不起作用 - 我一直在阅读人们发布的关于它的所有不同内容，并在谷歌上搜索了一下，然后稍微重新安排了我的标签结果，却无济于事。请帮忙。
好的，我做了一些调整以使其正常工作。
首先，我尝试克隆而不是一遍又一遍地手动构建每个 select。花了一分钟弄清楚如何更改 div 中对象的名称，但最终它仍然比手动创建 div 中所有元素的代码少得多。
这对提交问题没有任何帮助。
首先，我从仅具有提交表单的功能切换到仅在 onclick 中使用 submit(this)。这并没有真正做任何不同的事情——在 IE 中仍然有效，但在 FireFox 中无效。所以，然后我决定只尝试使用提交按钮。我不记得为什么我以前不想使用它，但我记得它似乎没有用。不管出于什么原因，它决定这次工作，而且，现在整个事情都如愿以偿。
我对何时应该使用 name 以及何时应该使用 id 仍然有点模糊，但看起来我使用 ids 来引用 DOM 对象，但我希望得到的任何东西在 post 或 get 中需要一个名称属性 also/instead.
感谢您的建议，它为我指明了正确的方向。
因此，对于任何想要查看最终代码的人：
PHP:
<html>
<head></head>
<body>
<?php
REQUIRE("includes/db/mysqli_object.php");
if(count($_POST) > 0) {
echo "Post Submitted: \n<br>";
foreach($_POST as $index => $value) {
echo $index . '=' . $value . '<br>';
}
}
$teamOptionCount = 0;
$now = date_create(date("Y-m-d"));
$fullURL = $_SERVER['PHP_SELF'] . "?";
isset($_GET['team']) ? $team = $_GET['team'] : $team = '';
isset($_GET['mode']) ? $mode = $_GET['mode'] : $mode = 'day';
isset($_GET['year']) ? $year = $_GET['year'] : $year = $now -> format("Y");
isset($_GET['month']) ? $month = $_GET['month'] : $month = $now -> format("m");
isset($_GET['day']) ? $day = $_GET['day'] : $day = $now -> format("d");
foreach($_GET as $index => $value) {
$fullURL .= $index . '=' . $value . '&';
}
$teamInfo = $dashDB->query("SELECT * from `Dashboard`.`Groups` WHERE `GroupLogin` LIKE '$team'");
$teamInfo->data_seek(0);
while($row = $teamInfo->fetch_assoc()) {
$teamNum = $row['GID'];
}
$teamMemberQuery = $dashDB->query("SELECT * from `Dashboard`.`Users` WHERE `UserGroup` LIKE '$teamNum'");
$teamMemberQuery->data_seek(0);
$teamMembers = array();
while($row = $teamMemberQuery->fetch_assoc()) {
$id = $row['UserName'];
$teamMembers[$id] = $row['FirstName'] . " " . $row['LastName'];
}
$JavaScriptFunctions = "<script>
var fieldCounter = 0;
var rowCounter = 0;
function cloneRow(rowName) {
if (typeof rowName === 'string') {
rowName = document.getElementById(rowName);
}
var clone = rowName.cloneNode(true),
last_inc = cloneRow.last_inc || parseInt(rowName.id.match(/(\d+)$/)[0], 10);
last_inc += 1;
clone.id = 'NewOnCall' + last_inc;
cloneRow.last_inc = last_inc;
clone.querySelectorAll('[name=\"primarySelect0\"]')[0].name = 'primaryNewSelect' + last_inc;
clone.querySelectorAll('[name=\"secondarySelect0\"]')[0].name = 'secondaryNewSelect' + last_inc;
clone.querySelectorAll('[name=\"tertiarySelect0\"]')[0].name = 'tertiaryNewSelect' + last_inc;
clone.querySelectorAll('[name=\"start0\"]')[0].name = 'newStart' + last_inc;
clone.querySelectorAll('[name=\"end0\"]')[0].name = 'newEnd' + last_inc;
var xButton = document.createElement('BUTTON');
var onClickAction = \"removeOnCallRow('onCallList','\" + clone.id + \"')\";
xButton.setAttribute('onClick',onClickAction);
xButton.setAttribute('id','removeRow' + last_inc);
xButton.innerHTML = 'X';
clone.appendChild(xButton);
rowName.parentNode.appendChild(clone);
}
function removeOnCallRow(parentDiv,childDiv) {
if(parentDiv == childDiv) {
alert('Cannot remove Parent');
} else if(document.getElementById(childDiv)) {
var child = document.getElementById(childDiv);
var parent = child.parentElement;
parent.removeChild(child);
} else {
alert('There was a problem');
return false;
}
}
</script>";
echo $JavaScriptFunctions . "\n";
echo "<div id='mainOnCall'>\n";
echo "<form action='$fullURL' method='post' id='onCallList'>\n";
echo "<div>You selected $team $mode $year $month $day</div><br />\n";
echo "<div><input type=\"button\" id=\"clone\" onclick=\"cloneRow('OnCall0')\" value=\"Add\">
<input type=\"submit\" name=\"submission\" value=\"Update\">
</div>\n";
$queryresults = $dashDB->query("SELECT * from `OnCall`.`$team` WHERE `StartTime` LIKE '$year-$month-$day%'");
$queryresults->data_seek(0);
while ($row = $queryresults->fetch_assoc()) {
$StartTime = $row['StartTime'];
$EndTime = $row['EndTime'];
$Primary = $row['Primary'];
$Secondary = $row['Secondary'];
$Tertiary = $row['Tertiary'];
$Comments = $row['Comments'];
$user_row = array();
$StartDate = new DateTime($StartTime);
$StartDate = $StartDate -> format("Y-m-d");
$StartTimeNoDate = new DateTime($StartTime);
$StartTimeNoDate = $StartTimeNoDate -> format('H:i');
$EndDate = new DateTime($EndTime);
$EndDate = $EndDate -> format("Y-m-d");
$User1QueryResult = $dashDB->query("SELECT * FROM `Dashboard`.`Users` WHERE `UserName` LIKE '$Primary'");
while($User1 = $User1QueryResult->fetch_assoc()) {
$FirstName1 = $User1['FirstName'];
$LastName1 = $User1['LastName'];
$WorkPhone1 = $User1['wphone'];
$CellPhone1 = $User1['cphone'];
$HomePhone1 = $User1['HomePhone'];
$FullName1 = "$FirstName1 $LastName1";
}
$User2QueryResult = $dashDB->query("SELECT * FROM `Dashboard`.`Users` WHERE `UserName` LIKE '$Secondary'");
while($User2 = $User2QueryResult->fetch_assoc()) {
$FirstName2 = $User2['FirstName'];
$LastName2 = $User2['LastName'];
$WorkPhone2 = $User2['wphone'];
$CellPhone2 = $User2['cphone'];
$HomePhone2 = $User2['HomePhone'];
$FullName2 = "$FirstName2 $LastName2";
}
$User3QueryResult = $dashDB->query("SELECT * FROM `Dashboard`.`Users` WHERE `UserName` LIKE '$Tertiary'");
while($User3 = $User3QueryResult->fetch_assoc()) {
$FirstName3 = $User3['FirstName'];
$LastName3 = $User3['LastName'];
$WorkPhone3 = $User3['wphone'];
$CellPhone3 = $User3['cphone'];
$HomePhone3 = $User3['HomePhone'];
$FullName3 = "$FirstName3 $LastName3";
}
$user_row[] = array(
'Login1' => $Primary,
'Name1' => $FullName1,
'Work1' => $WorkPhone1,
'Cell1' => $CellPhone1,
'Home1' => $HomePhone1,
'Login2' => $Secondary,
'Name2' => $FullName2,
'Work2' => $WorkPhone2,
'Cell2' => $CellPhone2,
'Home2' => $HomePhone2,
'Login3' => $Tertiary,
'Name3' => $FullName3,
'Work3' => $WorkPhone3,
'Cell3' => $CellPhone3,
'Home3' => $HomePhone3,
'EndDate' => $EndDate,
'EndTime' => $EndTime,
'StartTime' => $StartTime);
foreach($user_row as $value) {
$SelectPrimary = "<select name='primarySelect$teamOptionCount'>\n";
$SelectSecondary = "<select name='secondarySelect$teamOptionCount'>\n";
$SelectTertiary = "<select name='tertiarySelect$teamOptionCount'>\n";
$LoginName1 = $value['Login1'];
$LoginName2 = $value['Login2'];
$LoginName3 = $value['Login3'];
$name1 = $value['Name1'];
$name2 = $value['Name2'];
$name3 = $value['Name3'];
$Start = $value['StartTime'];
$End = $value['EndTime'];
foreach($teamMembers as $LoginId => $member) {
$member == $name1 ? $SelectPrimary .= "<option value='$LoginId' selected>$member</option>\n" : $SelectPrimary .= "<option value='$LoginId'>$member</option>\n";
}
foreach($teamMembers as $LoginId => $member) {
$member == $name2 ? $SelectSecondary .= "<option value='$LoginId' selected>$member</option>\n" : $SelectSecondary .= "<option value='$LoginId'>$member</option>\n";
}
foreach($teamMembers as $LoginId => $member) {
$member == $name3 ? $SelectTertiary .= "<option value='$LoginId' selected>$member</option>\n" : $SelectTertiary .= "<option value='$LoginId'>$member</option>\n";
}
$SelectPrimary .= "</select>\n";
$SelectSecondary .= "</select>\n";
$SelectTertiary .= "</select>\n";
$startField = "<input name='start$teamOptionCount' value='$Start'>";
$endField = "<input name='end$teamOptionCount' value='$End'>";
echo "<div id='OnCall$teamOptionCount'>$year-$month-$day
<br>Start: $startField End: $endField
<br>Primary: $SelectPrimary
<br>Secondary: $SelectSecondary
<br>Tertiary: $SelectTertiary</div>\n";
$teamOptionCount++;
}
}
echo "
</form>\n</div>\n";
?>
</body>
</html>
浏览器：
<html>
<head></head>
<body>
<script>
var fieldCounter = 0;
var rowCounter = 0;
function cloneRow(rowName) {
if (typeof rowName === 'string') {
rowName = document.getElementById(rowName);
}
var clone = rowName.cloneNode(true),
last_inc = cloneRow.last_inc || parseInt(rowName.id.match(/(\d+)$/)[0], 10);
last_inc += 1;
clone.id = 'NewOnCall' + last_inc;
cloneRow.last_inc = last_inc;
clone.querySelectorAll('[name="primarySelect0"]')[0].name = 'primaryNewSelect' + last_inc;
clone.querySelectorAll('[name="secondarySelect0"]')[0].name = 'secondaryNewSelect' + last_inc;
clone.querySelectorAll('[name="tertiarySelect0"]')[0].name = 'tertiaryNewSelect' + last_inc;
clone.querySelectorAll('[name="start0"]')[0].name = 'newStart' + last_inc;
clone.querySelectorAll('[name="end0"]')[0].name = 'newEnd' + last_inc;
var xButton = document.createElement('BUTTON');
var onClickAction = "removeOnCallRow('onCallList','" + clone.id + "')";
xButton.setAttribute('onClick',onClickAction);
xButton.setAttribute('id','removeRow' + last_inc);
xButton.innerHTML = 'X';
clone.appendChild(xButton);
rowName.parentNode.appendChild(clone);
}
function removeOnCallRow(parentDiv,childDiv) {
if(parentDiv == childDiv) {
alert('Cannot remove Parent');
} else if(document.getElementById(childDiv)) {
var child = document.getElementById(childDiv);
var parent = child.parentElement;
parent.removeChild(child);
} else {
alert('There was a problem');
return false;
}
}
</script>
<div id='mainOnCall'>
<form action='/edit_onCall.php?team=SASO&mode=day&year=2015&month=07&day=01&' method='post' id='onCallList'>
<div>You selected SASO day 2015 07 01</div><br />
<div><input type="button" id="clone" onclick="cloneRow('OnCall0')" value="Add">
<input type="submit" name="submission" value="Update">
</div>
<div id='OnCall0'>2015-07-01
<br>Start: <input name='start0' value='2015-07-01 08:00:00'> End: <input name='end0' value='2015-07-02 08:00:00'>
<br>Primary: <select name='primarySelect0'>
<option value='dt51205'>Jeremy Nicolls</option>
<option value='dt50571'>Michael Thompson</option>
<option value='dt50072'>Jon Griffey</option>
<option value='dt51618'>Marcus LaPilusa</option>
<option value='dt50380'>Max Guthzeit</option>
<option value='dt61240' selected>Jonathan Bishop</option>
</select>
<br>Secondary: <select name='secondarySelect0'>
<option value='dt51205'>Jeremy Nicolls</option>
<option value='dt50571'>Michael Thompson</option>
<option value='dt50072'>Jon Griffey</option>
<option value='dt51618' selected>Marcus LaPilusa</option>
<option value='dt50380'>Max Guthzeit</option>
<option value='dt61240'>Jonathan Bishop</option>
</select>
<br>Tertiary: <select name='tertiarySelect0'>
<option value='dt51205'>Jeremy Nicolls</option>
<option value='dt50571' selected>Michael Thompson</option>
<option value='dt50072'>Jon Griffey</option>
<option value='dt51618'>Marcus LaPilusa</option>
<option value='dt50380'>Max Guthzeit</option>
<option value='dt61240'>Jonathan Bishop</option>
</select>
</div>
</form>
</div>
</body>
</html>
好的，所以我已经摆弄了一段时间。我有一个表格和几个按钮。一个用于向表单添加字段，另一个用于在完成后提交表单。它们都是调用函数的按钮，一个用于添加元素，另一个只是调用提交命令。添加的元素之一是另一个删除添加元素的按钮（假设您要添加 2 行，然后单击添加 3 次 - 所以有一个 X 可以删除额外的行）
代码在我加载页面时以及在添加行后都按预期工作，但是如果我删除了我添加的行，则提交按钮在 FireFox 中不再有效。不过它在 IE 和 Chrome 中仍然有效。
我将以 2 种不同的方式为您提供我的代码，因为它是 PHP，因此您可以看到我在做什么，然后我将只从浏览器，以便您可以查看浏览器收到的内容与 Apache 正在处理的内容。
PHP:
<html>
<head></head>
<body>
<?php
REQUIRE("includes/db/mysqli_object.php");
if(count($_POST) > 0) {
echo "Post Submitted: \n<br>";
foreach($_POST as $index => $value) {
echo $index . '=' . $value . '<br>';
}
}
$teamOptionCount = 0;
$now = date_create(date("Y-m-d"));
$fullURL = $_SERVER['PHP_SELF'] . "?";
isset($_GET['team']) ? $team = $_GET['team'] : $team = '';
isset($_GET['mode']) ? $mode = $_GET['mode'] : $mode = 'day';
isset($_GET['year']) ? $year = $_GET['year'] : $year = $now -> format("Y");
isset($_GET['month']) ? $month = $_GET['month'] : $month = $now -> format("m");
isset($_GET['day']) ? $day = $_GET['day'] : $day = $now -> format("d");
foreach($_GET as $index => $value) {
$fullURL .= $index . '=' . $value . '&';
}
$teamInfo = $dashDB->query("SELECT * from `Dashboard`.`Groups` WHERE `GroupLogin` LIKE '$team'");
$teamInfo->data_seek(0);
while($row = $teamInfo->fetch_assoc()) {
$teamNum = $row['GID'];
}
$teamMemberQuery = $dashDB->query("SELECT * from `Dashboard`.`Users` WHERE `UserGroup` LIKE '$teamNum'");
$teamMemberQuery->data_seek(0);
$teamMembers = array();
while($row = $teamMemberQuery->fetch_assoc()) {
$id = $row['UserName'];
$teamMembers[$id] = $row['FirstName'] . " " . $row['LastName'];
}
$JavaScriptFunctions = "<script>
var fieldCounter = 0;
var rowCounter = 0;
function submitForm(formName) {
document.getElementById(formName).submit();
}
function addOnCallRow() {
rowCounter++;
rowName = 'newRow' + rowCounter;
nextRow = document.createElement('DIV');
nextRow.setAttribute('id', rowName);
document.getElementById('onCallList').appendChild(nextRow);
myDiv = document.getElementById(rowName);
var xButton = document.createElement('BUTTON');
var onClickAction = \"removeOnCallRow('onCallList','\" + rowName + \"')\";
xButton.setAttribute('onClick',onClickAction);
xButton.setAttribute('name','removeRow' + rowCounter);
xButton.innerHTML = 'X';
myDiv.appendChild(xButton);
previousHTML = myDiv.innerHTML;
previousHTML = previousHTML.concat(\"$year-$month-$day <br>Start: \");
myDiv.innerHTML = previousHTML;
startInput = document.createElement('INPUT');
startInput.setAttribute('id','startTime' + rowCounter);
startInput.setAttribute('name','startTime' + rowCounter);
startInput.setAttribute('type','text');
startInput.setAttribute('value','$year-$month-$day 00:00:00');
startInput.setAttribute('form','onCallList');
myDiv.appendChild(startInput);
previousHTML = myDiv.innerHTML;
previousHTML = previousHTML.concat(\" End: \");
myDiv.innerHTML = previousHTML;
endInput = document.createElement('INPUT');
endInput.setAttribute('id','endTime' + rowCounter);
endInput.setAttribute('name','endTime' + rowCounter);
endInput.setAttribute('type','text');
endInput.setAttribute('value','$year-$month-$day 00:00:00');
endInput.setAttribute('form','onCallList');
myDiv.appendChild(endInput);
previousHTML = myDiv.innerHTML;
previousHTML = previousHTML.concat(\"<br>Primary: \");
myDiv.innerHTML = previousHTML;
nextSelect = document.createElement('SELECT');
nextSelect.setAttribute('id','primaryNewSelect' + rowCounter);
nextSelect.setAttribute('name','primaryNewSelect' + rowCounter);
nextSelect.setAttribute('form','onCallList');
myDiv.appendChild(nextSelect);
primarySelect = document.getElementById('primaryNewSelect' + rowCounter);\n";
foreach($teamMembers as $index => $teamMember) {
$JavaScriptFunctions .= " primarySelect.options[primarySelect.length] = new Option('$teamMember','$index');\n";
}
$JavaScriptFunctions .= "
previousHTML = myDiv.innerHTML;
previousHTML = previousHTML.concat(\"<br>Secondary:\");
myDiv.innerHTML = previousHTML;
nextSelect = document.createElement('SELECT');
nextSelect.setAttribute('id','secondaryNewSelect' + rowCounter);
nextSelect.setAttribute('name','secondaryNewSelect' + rowCounter);
nextSelect.setAttribute('form','onCallList');
myDiv.appendChild(nextSelect);
secondarySelect = document.getElementById('secondaryNewSelect' + rowCounter);\n";
foreach($teamMembers as $index => $teamMember) {
$JavaScriptFunctions .= " secondarySelect.options[secondarySelect.length] = new Option('$teamMember','$index');\n";
}
$JavaScriptFunctions .= "
previousHTML = myDiv.innerHTML;
previousHTML = previousHTML.concat(\"<br>Tertiary:\");
myDiv.innerHTML = previousHTML;
nextSelect = document.createElement('SELECT');
nextSelect.setAttribute('id','tertiaryNewSelect' + rowCounter);
nextSelect.setAttribute('name','tertiaryNewSelect' + rowCounter);
nextSelect.setAttribute('form','onCallList');
myDiv.appendChild(nextSelect);
tertiarySelect = document.getElementById('tertiaryNewSelect' + rowCounter);\n";
foreach($teamMembers as $index => $teamMember) {
$JavaScriptFunctions .= " tertiarySelect.options[tertiarySelect.length] = new Option('$teamMember','$index');\n";
}
$JavaScriptFunctions .= "}
function removeOnCallRow(parentDiv,childDiv) {
if(parentDiv == childDiv) {
alert('Cannot remove Parent');
} else if(document.getElementById(childDiv)) {
var child = document.getElementById(childDiv);
var parent = child.parentElement;
parent.removeChild(child);
} else {
alert('There was a problem');
return false;
}
}
</script>";
echo $JavaScriptFunctions . "\n";
echo "<div id='mainOnCall'>\n";
echo "<form action='$fullURL' method='post' id='onCallList'>\n";
echo "<div>You selected $team $mode $year $month $day</div><br />\n";
echo "<div><input type=\"button\" id=\"addrow\" onclick=\"addOnCallRow()\" value=\"Add\"></input>
<input type=\"button\" id=\"SubmitForm\" onclick=\"submitForm('onCallList')\" value=\"Update\"></input>
</div>\n";
$queryresults = $dashDB->query("SELECT * from `OnCall`.`$team` WHERE `StartTime` LIKE '$year-$month-$day%'");
$queryresults->data_seek(0);
while ($row = $queryresults->fetch_assoc()) {
$StartTime = $row['StartTime'];
$EndTime = $row['EndTime'];
$Primary = $row['Primary'];
$Secondary = $row['Secondary'];
$Tertiary = $row['Tertiary'];
$Comments = $row['Comments'];
$user_row = array();
$StartDate = new DateTime($StartTime);
$StartDate = $StartDate -> format("Y-m-d");
$StartTimeNoDate = new DateTime($StartTime);
$StartTimeNoDate = $StartTimeNoDate -> format('H:i');
$EndDate = new DateTime($EndTime);
$EndDate = $EndDate -> format("Y-m-d");
$User1QueryResult = $dashDB->query("SELECT * FROM `Dashboard`.`Users` WHERE `UserName` LIKE '$Primary'");
while($User1 = $User1QueryResult->fetch_assoc()) {
$FirstName1 = $User1['FirstName'];
$LastName1 = $User1['LastName'];
$WorkPhone1 = $User1['wphone'];
$CellPhone1 = $User1['cphone'];
$HomePhone1 = $User1['HomePhone'];
$FullName1 = "$FirstName1 $LastName1";
}
$User2QueryResult = $dashDB->query("SELECT * FROM `Dashboard`.`Users` WHERE `UserName` LIKE '$Secondary'");
while($User2 = $User2QueryResult->fetch_assoc()) {
$FirstName2 = $User2['FirstName'];
$LastName2 = $User2['LastName'];
$WorkPhone2 = $User2['wphone'];
$CellPhone2 = $User2['cphone'];
$HomePhone2 = $User2['HomePhone'];
$FullName2 = "$FirstName2 $LastName2";
}
$User3QueryResult = $dashDB->query("SELECT * FROM `Dashboard`.`Users` WHERE `UserName` LIKE '$Tertiary'");
while($User3 = $User3QueryResult->fetch_assoc()) {
$FirstName3 = $User3['FirstName'];
$LastName3 = $User3['LastName'];
$WorkPhone3 = $User3['wphone'];
$CellPhone3 = $User3['cphone'];
$HomePhone3 = $User3['HomePhone'];
$FullName3 = "$FirstName3 $LastName3";
}
$user_row[] = array(
'Login1' => $Primary,
'Name1' => $FullName1,
'Work1' => $WorkPhone1,
'Cell1' => $CellPhone1,
'Home1' => $HomePhone1,
'Login2' => $Secondary,
'Name2' => $FullName2,
'Work2' => $WorkPhone2,
'Cell2' => $CellPhone2,
'Home2' => $HomePhone2,
'Login3' => $Tertiary,
'Name3' => $FullName3,
'Work3' => $WorkPhone3,
'Cell3' => $CellPhone3,
'Home3' => $HomePhone3,
'EndDate' => $EndDate,
'EndTime' => $EndTime,
'StartTime' => $StartTime);
foreach($user_row as $value) {
$SelectPrimary = "<select name='primarySelect$teamOptionCount'>\n";
$SelectSecondary = "<select name='secondarySelect$teamOptionCount'>\n";
$SelectTertiary = "<select name='tertiarySelect$teamOptionCount'>\n";
$LoginName1 = $value['Login1'];
$LoginName2 = $value['Login2'];
$LoginName3 = $value['Login3'];
$name1 = $value['Name1'];
$name2 = $value['Name2'];
$name3 = $value['Name3'];
$Start = $value['StartTime'];
$End = $value['EndTime'];
foreach($teamMembers as $LoginId => $member) {
$member == $name1 ? $SelectPrimary .= "<option value='$LoginId' selected>$member</option>\n" : $SelectPrimary .= "<option value='$LoginId'>$member</option>\n";
}
foreach($teamMembers as $LoginId => $member) {
$member == $name2 ? $SelectSecondary .= "<option value='$LoginId' selected>$member</option>\n" : $SelectSecondary .= "<option value='$LoginId'>$member</option>\n";
}
foreach($teamMembers as $LoginId => $member) {
$member == $name3 ? $SelectTertiary .= "<option value='$LoginId' selected>$member</option>\n" : $SelectTertiary .= "<option value='$LoginId'>$member</option>\n";
}
$SelectPrimary .= "</select>\n";
$SelectSecondary .= "</select>\n";
$SelectTertiary .= "</select>\n";
$startField = "<input name='start$teamOptionCount' value='$Start'>";
$endField = "<input name='end$teamOptionCount' value='$End'>";
echo "<div id='OnCall$teamOptionCount'>$year-$month-$day
<br>Start: $startField End: $endField
<br>Primary: $SelectPrimary
<br>Secondary: $SelectSecondary
<br>Tertiary: $SelectTertiary</div>\n";
$teamOptionCount++;
}
}
echo "
</form>\n</div>\n";
?>
</body>
</html>
和浏览器：
<html>
<head></head>
<body>
<script>
var fieldCounter = 0;
var rowCounter = 0;
function submitForm(formName) {
document.getElementById(formName).submit();
}
function addOnCallRow() {
rowCounter++;
rowName = 'newRow' + rowCounter;
nextRow = document.createElement('DIV');
nextRow.setAttribute('id', rowName);
document.getElementById('onCallList').appendChild(nextRow);
myDiv = document.getElementById(rowName);
var xButton = document.createElement('BUTTON');
var onClickAction = "removeOnCallRow('onCallList','" + rowName + "')";
xButton.setAttribute('onClick',onClickAction);
xButton.setAttribute('name','removeRow' + rowCounter);
xButton.innerHTML = 'X';
myDiv.appendChild(xButton);
previousHTML = myDiv.innerHTML;
previousHTML = previousHTML.concat("2015-07-01 <br>Start: ");
myDiv.innerHTML = previousHTML;
startInput = document.createElement('INPUT');
startInput.setAttribute('id','startTime' + rowCounter);
startInput.setAttribute('name','startTime' + rowCounter);
startInput.setAttribute('type','text');
startInput.setAttribute('value','2015-07-01 00:00:00');
startInput.setAttribute('form','onCallList');
myDiv.appendChild(startInput);
previousHTML = myDiv.innerHTML;
previousHTML = previousHTML.concat(" End: ");
myDiv.innerHTML = previousHTML;
endInput = document.createElement('INPUT');
endInput.setAttribute('id','endTime' + rowCounter);
endInput.setAttribute('name','endTime' + rowCounter);
endInput.setAttribute('type','text');
endInput.setAttribute('value','2015-07-01 00:00:00');
endInput.setAttribute('form','onCallList');
myDiv.appendChild(endInput);
previousHTML = myDiv.innerHTML;
previousHTML = previousHTML.concat("<br>Primary: ");
myDiv.innerHTML = previousHTML;
nextSelect = document.createElement('SELECT');
nextSelect.setAttribute('id','primaryNewSelect' + rowCounter);
nextSelect.setAttribute('name','primaryNewSelect' + rowCounter);
nextSelect.setAttribute('form','onCallList');
myDiv.appendChild(nextSelect);
primarySelect = document.getElementById('primaryNewSelect' + rowCounter);
primarySelect.options[primarySelect.length] = new Option('Jeremy Nicolls','dt51205');
primarySelect.options[primarySelect.length] = new Option('Michael Thompson','dt50571');
primarySelect.options[primarySelect.length] = new Option('Jon Griffey','dt50072');
primarySelect.options[primarySelect.length] = new Option('Marcus LaPilusa','dt51618');
primarySelect.options[primarySelect.length] = new Option('Max Guthzeit','dt50380');
primarySelect.options[primarySelect.length] = new Option('Jonathan Bishop','dt61240');
previousHTML = myDiv.innerHTML;
previousHTML = previousHTML.concat("<br>Secondary:");
myDiv.innerHTML = previousHTML;
nextSelect = document.createElement('SELECT');
nextSelect.setAttribute('id','secondaryNewSelect' + rowCounter);
nextSelect.setAttribute('name','secondaryNewSelect' + rowCounter);
nextSelect.setAttribute('form','onCallList');
myDiv.appendChild(nextSelect);
secondarySelect = document.getElementById('secondaryNewSelect' + rowCounter);
secondarySelect.options[secondarySelect.length] = new Option('Jeremy Nicolls','dt51205');
secondarySelect.options[secondarySelect.length] = new Option('Michael Thompson','dt50571');
secondarySelect.options[secondarySelect.length] = new Option('Jon Griffey','dt50072');
secondarySelect.options[secondarySelect.length] = new Option('Marcus LaPilusa','dt51618');
secondarySelect.options[secondarySelect.length] = new Option('Max Guthzeit','dt50380');
secondarySelect.options[secondarySelect.length] = new Option('Jonathan Bishop','dt61240');
previousHTML = myDiv.innerHTML;
previousHTML = previousHTML.concat("<br>Tertiary:");
myDiv.innerHTML = previousHTML;
nextSelect = document.createElement('SELECT');
nextSelect.setAttribute('id','tertiaryNewSelect' + rowCounter);
nextSelect.setAttribute('name','tertiaryNewSelect' + rowCounter);
nextSelect.setAttribute('form','onCallList');
myDiv.appendChild(nextSelect);
tertiarySelect = document.getElementById('tertiaryNewSelect' + rowCounter);
tertiarySelect.options[tertiarySelect.length] = new Option('Jeremy Nicolls','dt51205');
tertiarySelect.options[tertiarySelect.length] = new Option('Michael Thompson','dt50571');
tertiarySelect.options[tertiarySelect.length] = new Option('Jon Griffey','dt50072');
tertiarySelect.options[tertiarySelect.length] = new Option('Marcus LaPilusa','dt51618');
tertiarySelect.options[tertiarySelect.length] = new Option('Max Guthzeit','dt50380');
tertiarySelect.options[tertiarySelect.length] = new Option('Jonathan Bishop','dt61240');
}
function removeOnCallRow(parentDiv,childDiv) {
if(parentDiv == childDiv) {
alert('Cannot remove Parent');
} else if(document.getElementById(childDiv)) {
var child = document.getElementById(childDiv);
var parent = child.parentElement;
parent.removeChild(child);
} else {
alert('There was a problem');
return false;
}
}
</script>
<div id='mainOnCall'>
<form action='/edit_onCall.php?team=SASO&mode=day&year=2015&month=07&day=01&' method='post' id='onCallList'>
<div>You selected SASO day 2015 07 01</div><br />
<div><input type="button" id="addrow" onclick="addOnCallRow()" value="Add"></input>
<input type="button" id="SubmitForm" onclick="submitForm('onCallList')" value="Update"></input>
</div>
<div id='OnCall0'>2015-07-01
<br>Start: <input name='start0' value='2015-07-01 08:00:00'> End: <input name='end0' value='2015-07-02 08:00:00'>
<br>Primary: <select name='primarySelect0'>
<option value='dt51205'>Jeremy Nicolls</option>
<option value='dt50571'>Michael Thompson</option>
<option value='dt50072'>Jon Griffey</option>
<option value='dt51618'>Marcus LaPilusa</option>
<option value='dt50380'>Max Guthzeit</option>
<option value='dt61240' selected>Jonathan Bishop</option>
</select>
<br>Secondary: <select name='secondarySelect0'>
<option value='dt51205'>Jeremy Nicolls</option>
<option value='dt50571'>Michael Thompson</option>
<option value='dt50072'>Jon Griffey</option>
<option value='dt51618' selected>Marcus LaPilusa</option>
<option value='dt50380'>Max Guthzeit</option>
<option value='dt61240'>Jonathan Bishop</option>
</select>
<br>Tertiary: <select name='tertiarySelect0'>
<option value='dt51205'>Jeremy Nicolls</option>
<option value='dt50571' selected>Michael Thompson</option>
<option value='dt50072'>Jon Griffey</option>
<option value='dt51618'>Marcus LaPilusa</option>
<option value='dt50380'>Max Guthzeit</option>
<option value='dt61240'>Jonathan Bishop</option>
</select>
</div>
</form>
</div>
</body>
</html>
我真的不确定为什么这在 FireFox 中不起作用 - 我一直在阅读人们发布的关于它的所有不同内容，并在谷歌上搜索了一下，然后稍微重新安排了我的标签结果，却无济于事。请帮忙。
好的，我做了一些调整以使其正常工作。
首先，我尝试克隆而不是一遍又一遍地手动构建每个 select。花了一分钟弄清楚如何更改 div 中对象的名称，但最终它仍然比手动创建 div 中所有元素的代码少得多。
这对提交问题没有任何帮助。
首先，我从仅具有提交表单的功能切换到仅在 onclick 中使用 submit(this)。这并没有真正做任何不同的事情——在 IE 中仍然有效，但在 FireFox 中无效。所以，然后我决定只尝试使用提交按钮。我不记得为什么我以前不想使用它，但我记得它似乎没有用。不管出于什么原因，它决定这次工作，而且，现在整个事情都如愿以偿。
我对何时应该使用 name 以及何时应该使用 id 仍然有点模糊，但看起来我使用 ids 来引用 DOM 对象，但我希望得到的任何东西在 post 或 get 中需要一个名称属性 also/instead.
感谢您的建议，它为我指明了正确的方向。
因此，对于任何想要查看最终代码的人：
PHP:
<html>
<head></head>
<body>
<?php
REQUIRE("includes/db/mysqli_object.php");
if(count($_POST) > 0) {
echo "Post Submitted: \n<br>";
foreach($_POST as $index => $value) {
echo $index . '=' . $value . '<br>';
}
}
$teamOptionCount = 0;
$now = date_create(date("Y-m-d"));
$fullURL = $_SERVER['PHP_SELF'] . "?";
isset($_GET['team']) ? $team = $_GET['team'] : $team = '';
isset($_GET['mode']) ? $mode = $_GET['mode'] : $mode = 'day';
isset($_GET['year']) ? $year = $_GET['year'] : $year = $now -> format("Y");
isset($_GET['month']) ? $month = $_GET['month'] : $month = $now -> format("m");
isset($_GET['day']) ? $day = $_GET['day'] : $day = $now -> format("d");
foreach($_GET as $index => $value) {
$fullURL .= $index . '=' . $value . '&';
}
$teamInfo = $dashDB->query("SELECT * from `Dashboard`.`Groups` WHERE `GroupLogin` LIKE '$team'");
$teamInfo->data_seek(0);
while($row = $teamInfo->fetch_assoc()) {
$teamNum = $row['GID'];
}
$teamMemberQuery = $dashDB->query("SELECT * from `Dashboard`.`Users` WHERE `UserGroup` LIKE '$teamNum'");
$teamMemberQuery->data_seek(0);
$teamMembers = array();
while($row = $teamMemberQuery->fetch_assoc()) {
$id = $row['UserName'];
$teamMembers[$id] = $row['FirstName'] . " " . $row['LastName'];
}
$JavaScriptFunctions = "<script>
var fieldCounter = 0;
var rowCounter = 0;
function cloneRow(rowName) {
if (typeof rowName === 'string') {
rowName = document.getElementById(rowName);
}
var clone = rowName.cloneNode(true),
last_inc = cloneRow.last_inc || parseInt(rowName.id.match(/(\d+)$/)[0], 10);
last_inc += 1;
clone.id = 'NewOnCall' + last_inc;
cloneRow.last_inc = last_inc;
clone.querySelectorAll('[name=\"primarySelect0\"]')[0].name = 'primaryNewSelect' + last_inc;
clone.querySelectorAll('[name=\"secondarySelect0\"]')[0].name = 'secondaryNewSelect' + last_inc;
clone.querySelectorAll('[name=\"tertiarySelect0\"]')[0].name = 'tertiaryNewSelect' + last_inc;
clone.querySelectorAll('[name=\"start0\"]')[0].name = 'newStart' + last_inc;
clone.querySelectorAll('[name=\"end0\"]')[0].name = 'newEnd' + last_inc;
var xButton = document.createElement('BUTTON');
var onClickAction = \"removeOnCallRow('onCallList','\" + clone.id + \"')\";
xButton.setAttribute('onClick',onClickAction);
xButton.setAttribute('id','removeRow' + last_inc);
xButton.innerHTML = 'X';
clone.appendChild(xButton);
rowName.parentNode.appendChild(clone);
}
function removeOnCallRow(parentDiv,childDiv) {
if(parentDiv == childDiv) {
alert('Cannot remove Parent');
} else if(document.getElementById(childDiv)) {
var child = document.getElementById(childDiv);
var parent = child.parentElement;
parent.removeChild(child);
} else {
alert('There was a problem');
return false;
}
}
</script>";
echo $JavaScriptFunctions . "\n";
echo "<div id='mainOnCall'>\n";
echo "<form action='$fullURL' method='post' id='onCallList'>\n";
echo "<div>You selected $team $mode $year $month $day</div><br />\n";
echo "<div><input type=\"button\" id=\"clone\" onclick=\"cloneRow('OnCall0')\" value=\"Add\">
<input type=\"submit\" name=\"submission\" value=\"Update\">
</div>\n";
$queryresults = $dashDB->query("SELECT * from `OnCall`.`$team` WHERE `StartTime` LIKE '$year-$month-$day%'");
$queryresults->data_seek(0);
while ($row = $queryresults->fetch_assoc()) {
$StartTime = $row['StartTime'];
$EndTime = $row['EndTime'];
$Primary = $row['Primary'];
$Secondary = $row['Secondary'];
$Tertiary = $row['Tertiary'];
$Comments = $row['Comments'];
$user_row = array();
$StartDate = new DateTime($StartTime);
$StartDate = $StartDate -> format("Y-m-d");
$StartTimeNoDate = new DateTime($StartTime);
$StartTimeNoDate = $StartTimeNoDate -> format('H:i');
$EndDate = new DateTime($EndTime);
$EndDate = $EndDate -> format("Y-m-d");
$User1QueryResult = $dashDB->query("SELECT * FROM `Dashboard`.`Users` WHERE `UserName` LIKE '$Primary'");
while($User1 = $User1QueryResult->fetch_assoc()) {
$FirstName1 = $User1['FirstName'];
$LastName1 = $User1['LastName'];
$WorkPhone1 = $User1['wphone'];
$CellPhone1 = $User1['cphone'];
$HomePhone1 = $User1['HomePhone'];
$FullName1 = "$FirstName1 $LastName1";
}
$User2QueryResult = $dashDB->query("SELECT * FROM `Dashboard`.`Users` WHERE `UserName` LIKE '$Secondary'");
while($User2 = $User2QueryResult->fetch_assoc()) {
$FirstName2 = $User2['FirstName'];
$LastName2 = $User2['LastName'];
$WorkPhone2 = $User2['wphone'];
$CellPhone2 = $User2['cphone'];
$HomePhone2 = $User2['HomePhone'];
$FullName2 = "$FirstName2 $LastName2";
}
$User3QueryResult = $dashDB->query("SELECT * FROM `Dashboard`.`Users` WHERE `UserName` LIKE '$Tertiary'");
while($User3 = $User3QueryResult->fetch_assoc()) {
$FirstName3 = $User3['FirstName'];
$LastName3 = $User3['LastName'];
$WorkPhone3 = $User3['wphone'];
$CellPhone3 = $User3['cphone'];
$HomePhone3 = $User3['HomePhone'];
$FullName3 = "$FirstName3 $LastName3";
}
$user_row[] = array(
'Login1' => $Primary,
'Name1' => $FullName1,
'Work1' => $WorkPhone1,
'Cell1' => $CellPhone1,
'Home1' => $HomePhone1,
'Login2' => $Secondary,
'Name2' => $FullName2,
'Work2' => $WorkPhone2,
'Cell2' => $CellPhone2,
'Home2' => $HomePhone2,
'Login3' => $Tertiary,
'Name3' => $FullName3,
'Work3' => $WorkPhone3,
'Cell3' => $CellPhone3,
'Home3' => $HomePhone3,
'EndDate' => $EndDate,
'EndTime' => $EndTime,
'StartTime' => $StartTime);
foreach($user_row as $value) {
$SelectPrimary = "<select name='primarySelect$teamOptionCount'>\n";
$SelectSecondary = "<select name='secondarySelect$teamOptionCount'>\n";
$SelectTertiary = "<select name='tertiarySelect$teamOptionCount'>\n";
$LoginName1 = $value['Login1'];
$LoginName2 = $value['Login2'];
$LoginName3 = $value['Login3'];
$name1 = $value['Name1'];
$name2 = $value['Name2'];
$name3 = $value['Name3'];
$Start = $value['StartTime'];
$End = $value['EndTime'];
foreach($teamMembers as $LoginId => $member) {
$member == $name1 ? $SelectPrimary .= "<option value='$LoginId' selected>$member</option>\n" : $SelectPrimary .= "<option value='$LoginId'>$member</option>\n";
}
foreach($teamMembers as $LoginId => $member) {
$member == $name2 ? $SelectSecondary .= "<option value='$LoginId' selected>$member</option>\n" : $SelectSecondary .= "<option value='$LoginId'>$member</option>\n";
}
foreach($teamMembers as $LoginId => $member) {
$member == $name3 ? $SelectTertiary .= "<option value='$LoginId' selected>$member</option>\n" : $SelectTertiary .= "<option value='$LoginId'>$member</option>\n";
}
$SelectPrimary .= "</select>\n";
$SelectSecondary .= "</select>\n";
$SelectTertiary .= "</select>\n";
$startField = "<input name='start$teamOptionCount' value='$Start'>";
$endField = "<input name='end$teamOptionCount' value='$End'>";
echo "<div id='OnCall$teamOptionCount'>$year-$month-$day
<br>Start: $startField End: $endField
<br>Primary: $SelectPrimary
<br>Secondary: $SelectSecondary
<br>Tertiary: $SelectTertiary</div>\n";
$teamOptionCount++;
}
}
echo "
</form>\n</div>\n";
?>
</body>
</html>
浏览器：
<html>
<head></head>
<body>
<script>
var fieldCounter = 0;
var rowCounter = 0;
function cloneRow(rowName) {
if (typeof rowName === 'string') {
rowName = document.getElementById(rowName);
}
var clone = rowName.cloneNode(true),
last_inc = cloneRow.last_inc || parseInt(rowName.id.match(/(\d+)$/)[0], 10);
last_inc += 1;
clone.id = 'NewOnCall' + last_inc;
cloneRow.last_inc = last_inc;
clone.querySelectorAll('[name="primarySelect0"]')[0].name = 'primaryNewSelect' + last_inc;
clone.querySelectorAll('[name="secondarySelect0"]')[0].name = 'secondaryNewSelect' + last_inc;
clone.querySelectorAll('[name="tertiarySelect0"]')[0].name = 'tertiaryNewSelect' + last_inc;
clone.querySelectorAll('[name="start0"]')[0].name = 'newStart' + last_inc;
clone.querySelectorAll('[name="end0"]')[0].name = 'newEnd' + last_inc;
var xButton = document.createElement('BUTTON');
var onClickAction = "removeOnCallRow('onCallList','" + clone.id + "')";
xButton.setAttribute('onClick',onClickAction);
xButton.setAttribute('id','removeRow' + last_inc);
xButton.innerHTML = 'X';
clone.appendChild(xButton);
rowName.parentNode.appendChild(clone);
}
function removeOnCallRow(parentDiv,childDiv) {
if(parentDiv == childDiv) {
alert('Cannot remove Parent');
} else if(document.getElementById(childDiv)) {
var child = document.getElementById(childDiv);
var parent = child.parentElement;
parent.removeChild(child);
} else {
alert('There was a problem');
return false;
}
}
</script>
<div id='mainOnCall'>
<form action='/edit_onCall.php?team=SASO&mode=day&year=2015&month=07&day=01&' method='post' id='onCallList'>
<div>You selected SASO day 2015 07 01</div><br />
<div><input type="button" id="clone" onclick="cloneRow('OnCall0')" value="Add">
<input type="submit" name="submission" value="Update">
</div>
<div id='OnCall0'>2015-07-01
<br>Start: <input name='start0' value='2015-07-01 08:00:00'> End: <input name='end0' value='2015-07-02 08:00:00'>
<br>Primary: <select name='primarySelect0'>
<option value='dt51205'>Jeremy Nicolls</option>
<option value='dt50571'>Michael Thompson</option>
<option value='dt50072'>Jon Griffey</option>
<option value='dt51618'>Marcus LaPilusa</option>
<option value='dt50380'>Max Guthzeit</option>
<option value='dt61240' selected>Jonathan Bishop</option>
</select>
<br>Secondary: <select name='secondarySelect0'>
<option value='dt51205'>Jeremy Nicolls</option>
<option value='dt50571'>Michael Thompson</option>
<option value='dt50072'>Jon Griffey</option>
<option value='dt51618' selected>Marcus LaPilusa</option>
<option value='dt50380'>Max Guthzeit</option>
<option value='dt61240'>Jonathan Bishop</option>
</select>
<br>Tertiary: <select name='tertiarySelect0'>
<option value='dt51205'>Jeremy Nicolls</option>
<option value='dt50571' selected>Michael Thompson</option>
<option value='dt50072'>Jon Griffey</option>
<option value='dt51618'>Marcus LaPilusa</option>
<option value='dt50380'>Max Guthzeit</option>
<option value='dt61240'>Jonathan Bishop</option>
</select>
</div>
</form>
</div>
</body>
</html>