Okay, so I have been fiddling with this for a while. I have a form, and a couple buttons. One to add fields to the form, and the other to submit the form when it's done. They're both buttons that call functions, one to add the elements, the other just calling the submit command. One of the elements that is added is another button that removes the added elements (say you want to add 2 rows, and you click add 3 times - so there's a X to remove the extra row)
The code works as expected when I load the page, and also after adding rows, but if I delete a row I've added, the submit button no longer works in FireFox. It still works in both IE and Chrome though.
I'm going to give you my code 2 different ways, as it's PHP, so you can see what it is I'm doing, and then I'll just do a view source from the browser so you can see what is getting to the browser vs. what Apache is processing.
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>
And Browser:
<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>
I'm really not sure why this won't work in FireFox - I've been reading through all the different things people have posted about it, and googled a bit, and re-arranged my tags a little bit as a result, but to no avail. Please help.
Okay, I made some tweaks to get this to work.
First I tried cloning instead of manually building each select over and over again. Took a minute to figure out how to change the names of the objects inside the div, but in the end it's still far less code than manually creating all the elements individually.
That didn't do anything to help with the submission issue.
First, I switched from having a function solely to submit the form to just using a submit(this) in the onclick. That didn't really do anything differently - still worked in IE but not in FireFox. So, then I decided I would just try using a submit button. I don't recall why I didn't want to use this before, but I seem to recall that it didn't work. For whatever reason, it decided to work this time, and moreover, the whole thing works as desired now.
I'm still a little fuzzy on when I should be using name and when I should be using id, but it would appear I use ids to reference DOM objects, but that anything I wish to get in a post or get needs a name attribute also/instead.
Thanks for the advice, it pointed me in the right direction.
So, for anybody that wants to see the final code:
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>
Browser:
<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>