-3

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.

Jon
  • 19
  • 7
  • 1
    The `.getElementById()` function is supposed to be about **id** attributes, not "name". Firefox adheres to the spec, other browsers don't. Give your form an "id" attribute and it'll work. – Pointy Jul 22 '15 at 23:29
  • 1
    Also, when asking a question about a code mystery like this, it's considerate to cut down the amount of code to a small sample that illustrates the problem. – Pointy Jul 22 '15 at 23:30
  • What is the error in the conole/ – epascarello Jul 22 '15 at 23:33
  • Input elements don't have closing tags. Much better to use a submit button, then you don't need script at all. If you do need to call a function when the form is submitted, put the listener on the form's submit listener (forms can be submitted without clicking the submit button). And pass a reference to the form in the call: `submitForm(this)` so you don't need *getElementById* at all. – RobG Jul 22 '15 at 23:40
  • BTW, you could just clone the *OnCall0* div, change the id of the clone to *OnCall1* and the form control names similarly, then just append it. It would save a huge amount of script (and where you find yourself writing the same code 3 times, you've gotta start thinking a loop is required). – RobG Jul 23 '15 at 01:49
  • Pointy: I can see where it might be confusing because the variable in the Javascript says form name, but I am actually passing the form ID. I have corrected this, as well as removing the name attributes from the dynamically created input items, so they are only IDs. RobG: I also have attempted to use a submit button rather than an input button calling a function. I am not sure how you would clone the oncall div, but I'll look into that after I figure out how to get the submit button working. epacsarello: nothing in the console. Doesn't act like it even knows I've clicked the button. – Jon Jul 31 '15 at 17:21

1 Answers1

0

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>
Jon
  • 19
  • 7