Javascript document.getElementById() not working after submit button

Question

I have a html code which works fine as soon I haven't clicked on the submit button. I am rendering checkboxes for the server's directory structure.Using checkboxes I want to let the user to select file. I've handled onclick event in javascript and maintains a array to store selected files. It also shows the selected file on the right pannel. Every thing works fine till now, but after submitting the button things go weird. I checked that the onclick event is getting captured but the document.write is not working till I refresh the page manually.

document.getElementById("selection").innerHTML=selectedFiles;

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>

.button {
    width: 320px !important;;
    background-color: #4CAF50 !important;; /* Green */
    border: none !important;;
    color: white !important;;
    padding: 15px 32px !important;;
    text-align: center!important;;
    text-decoration: none!important;;
    display: inline-block!important;;
    font-size: 16px!important;;
    left :80px !important;;
    top :20px !important;;
    position: relative !important;;

}

.button1{
    width: 220px !important;;
    background-color: #006699 !important;;
    border: none !important;;
    color: white !important;;
    left :80px !important;;
    top :20px !important;;
    position: relative !important;;
    padding: 10px 20px 10px 20px !important;;
    text-decoration: none !important;;
    display: block !important;;
    font-size: 16px!important;;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19) !important;;
    cursor: pointer !important;;
}

div.headerLeft {
    background-color: #006699;
    color: white;
    margin: 20px 0 20px 0;
    padding: 20px;
}

div.headerRight {
    background-color: #b3e6b3;
    color: white;
    margin: 20px 0 20px 0;
    padding: 20px;
}


.wrap {
width: 100%;
overflow:auo;
}

.fleft {
    float:left; 
    width: 50%;
    background:white;
}

.fright {

float: right;
    background-color:white;
    width: 50%;
}
</style>
</head>
<body>
<form action="list.php" id="copy" method="post" >
<div id="container" style="width:100%;">  
<div class="fleft">
<div class="headerLeft">Last Modified files</div>
<?php

function listFolderFiles($dir,$parent,$lastmodifiedfiles)
{
    $flag = false;
    foreach (new DirectoryIterator($dir) as $fileInfo) {
        if (!$fileInfo->isDot()) {
            $file=$fileInfo->getFilename();
            if ($fileInfo->isDir()) {
                $path = $fileInfo->getPathname();
                echo '<div data-role="main" class="ui-content">';
                echo ' <div data-role="collapsible">';
                echo " <h1>$path</h1>";
                echo " <p>";
                //echo "<input type='checkbox' name='$path' id='$path' value='$path' onclick='handleClick(this);'>&nbsp;&nbsp;&nbsp$path<br>";
                listFolderFiles($path,"$dir",null);
                echo '</p>';
                echo '</div>';
                echo '</div>';
            }
            else {
                echo "<input type='checkbox' name='$dir/$file' id='$dir/$file' value='$dir/$file' onclick='handleClick(this);'>&nbsp;&nbsp;&nbsp$dir/$file<br>";    
            }
        }
    }
}
$dir = "css";
$lastmodifiedfiles = [];
if (isset($_POST['copysubmit'])) {
    //listFolderFiles($dir,"",$lastmodifiedfiles);
}
else {
    listFolderFiles($dir,"",$lastmodifiedfiles);
}
?>
</div>

<div class="fright" > 
<button type=submit" name="copysubmit" class="button" value="Submit" onclick="clean_up_list();" >Copy to airbnstories</button>
<br/>
<br/>
<div style="color:#006699;position:relative; left:30px" id="selectlabel">
<?php
if (isset($_POST['copysubmit'])) {
//do something
}
?>
</div>
<div id="selection" style="position:relative; left:40px">
</div>
</div>
</div>
</form>
</body>
</html>

<script language="javascript" type="text/javascript">
var filesList = {};
function clean_up_list() {
filesList = {};
 document.getElementById("selectlabel").innerHTML="";
document.getElementById("selection").innerHTML="";
}
function handleClick(cb) {
  if (cb.checked) {
    filesList[cb.value] = true;
  }
  else {
    delete filesList[cb.value];
  }
  var keys = Object.keys(filesList);
  var selectedFiles = "";
    for(i in keys){
        selectedFiles += keys[i];
    selectedFiles += "<br/>";
    }
    if(Object.keys(filesList).length > 0) {
        document.getElementById("selectlabel").innerHTML="Files selected";
    }
    document.getElementById("selection").innerHTML=selectedFiles;
}


function getCheckedBoxes(chkboxName) {
    var checkboxes = document.getElementsByName(chkboxName);
    var checkboxesChecked = [];
    // loop over them all
    for (var i=0; i<checkboxes.length; i++) {
        // And stick the checked ones onto an array...
        if (checkboxes[i].checked) {
            checkboxesChecked.push(checkboxes[i]);
        }
    }
    // Return the array if it is non-empty, or null
    return checkboxesChecked.length > 0 ? checkboxesChecked : null;
}
</script>

Answer 1

document.write() is used to write to the document stream.

In your case, the stream is most probably already closed when your submit handler is called, because your document has finished loading.

Watch out, because calling document.write() on a closed document stream automatically calls document.open() , which should in theory clear the document.

Javascript document.getElementById() not working after submit button

Question

1 answers

solution1
0 2017-03-11 06:52:15

Javascript document.getElementById() not working after submit button

Question

1 answers

solution1 0 2017-03-11 06:52:15

solution1
0 2017-03-11 06:52:15