Javascript document.getElementById（）在提交按钮后无法正常工作

Question

I have a html code which works fine as soon I haven't clicked on the submit button. 我有一个html代码，我很快就没有点击提交按钮。 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. 我在javascript中处理了onclick事件并维护了一个存储所选文件的数组。 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. 我检查了onclick事件是否被捕获但是document.write在我手动刷新页面之前无法正常工作。

document.getElementById("selection").innerHTML=selectedFiles; 的document.getElementById（ “选择”）的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. document.write()用于写入文档流。

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. 当心，因为调用document.write()一个封闭的文档流自动调用document.open()理论上应该清除文件。

Javascript document.getElementById（）在提交按钮后无法正常工作

问题描述

1 个解决方案

解决方案1
0 2017-03-11 06:52:15

Javascript document.getElementById（）在提交按钮后无法正常工作

问题描述

1 个解决方案

解决方案1 0 2017-03-11 06:52:15

解决方案1
0 2017-03-11 06:52:15