使用 document.getElementById(formName).submit() 在 FireFox 中不起作用，在 Chrome 和 IE11 中起作用

Posted

技术标签:

【中文标题】使用 document.getElementById(formName).submit() 在 FireFox 中不起作用，在 Chrome 和 IE11 中起作用【英文标题】：Using document.getElementById(formName).submit() not working in FireFox, works in Chrome and IE11 【发布时间】：2015-07-22 23:27:58 【问题描述】：

好的，所以我一直在摆弄这个。我有一个表格和几个按钮。一个用于向表单添加字段，另一个用于在完成后提交表单。它们都是调用函数的按钮，一个用于添加元素，另一个只是调用提交命令。添加的元素之一是删除添加元素的另一个按钮（假设您要添加 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 中不起作用 - 我一直在阅读人们发布的所有不同的东西，并在谷歌上搜索了一下，并将我的标签重新排列为结果，但无济于事。请帮忙。

【问题讨论】：

.getElementById() 函数应该是关于 id 属性，而不是“名称”。 Firefox 遵守规范，其他浏览器则不遵守。给你的表单一个“id”属性，它就会起作用。 另外，当询问关于这样一个代码之谜的问题时，将代码量减少到一个说明问题的小样本是体贴的。 conole中的错误是什么/ 输入元素没有结束标签。使用提交按钮要好得多，那么您根本不需要脚本。如果您确实需要在提交表单时调用某个函数，请将监听器放在表单的提交监听器上（无需单击提交按钮即可提交表单）。并在调用中传递对表单的引用：submitForm(this)，因此您根本不需要 getElementById。 顺便说一句，您可以只克隆 OnCall0 div，将克隆的 id 更改为 OnCall1 和表单控件名称类似，然后只需附加它。它会节省大量的脚本（当你发现自己写了 3 次相同的代码时，你必须开始考虑需要循环）。 【参考方案1】：

好的，我做了一些调整以使其正常工作。

首先我尝试克隆而不是一遍又一遍地手动构建每个选择。花了一分钟时间弄清楚如何更改 div 内对象的名称，但最终它仍然比手动单独创建所有元素要少得多。

这对解决提交问题没有任何帮助。

首先，我从仅具有提交表单的功能切换到仅在 onclick 中使用 submit(this)。这并没有真正做任何不同的事情——仍然在 IE 中有效，但在 FireFox 中无效。所以，然后我决定尝试使用提交按钮。我不记得为什么我以前不想使用它，但我似乎记得它不起作用。不管出于什么原因，它决定这次工作，而且，整个事情现在都按预期工作了。

我对什么时候应该使用 name 以及什么时候应该使用 id 仍然有点模糊，但似乎我使用 ids 来引用 DOM 对象，但是我希望在帖子中获取或获取的任何内容都需要一个名称属性也/而不是。

感谢您的建议，它为我指明了正确的方向。

所以，对于任何想查看最终代码的人：

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>

【讨论】：

以上是关于使用 document.getElementById(formName).submit() 在 FireFox 中不起作用，在 Chrome 和 IE11 中起作用的主要内容，如果未能解决你的问题，请参考以下文章

移动端实现复制内容至剪贴板

无法使用正确的位置或原始 x,y 裁剪图像。

未定义函数 - 未捕获的 ReferenceError

js元素事件绑定与解绑

使用 Charts.js 禁用动画

事件冒泡