Остановка формы после перезагрузки страницы

Question

Я разрабатываю веб-приложение через веб-сервер APACHE 2. Когда я выполняю свой файл dropbox.html, он создает раскрывающееся меню, созданное с использованием PHP всех файлов в моем каталоге htdocs. Здесь мои файлы будут обрабатываться. Когда выбран файл, вызывается функция javascript, и это проходит через длительный процесс анализа файла с помощью Perl-скрипта и так далее. Конечная игра заключается в том, что я хочу, чтобы график был сгенерирован и появлялся, когда обработка выполнена. У меня был график, который работал до того, как у меня появилось выпадающее меню, у меня просто была кнопка, называвшаяся той же функцией JS, и она отлично работала в одном жестком закодированном файле. Вот моя проблема: теперь, когда у меня работает drop box, я вижу, что график всплывает [правильно], но он делает это только за секунду до того, как вся страница сбрасывается обратно в стартовую форму [которая будет показывать первый файл в раскрывающемся меню]. Как я могу остановить это от сброса? то есть, когда я нажимаю на что-либо из выпадающего меню, он должен оставаться в этом файле до тех пор, пока я его не изменю. Я хочу, чтобы мой график оставался до тех пор, пока пользователь не выберет другой файл для обработки.

Вот выдержки из моего файла dropbox.html. Во-первых, мой код для коробки. Я оставляю стандартный html-код и просто показываю вам мясо, которое вам нужно.

<!--The following is php code which gets the files in the current directory and 
populates a drop down menu with those files, it calls the openfilex method--> 

<form name="filex" method="get" action="" onsubmit="openfilex()"> 
<select name="select"> 
<?php 
$files = array_map("htmlspecialchars", scandir(".")); 
foreach ($files as $file) 
    echo "<option value='$file'>$file</option>"; 
?> 
</select> 
<input type="submit" value="Choose File"> 
</form> 

Следующая функция JS, которую она вызывает. Вы можете видеть, что моя JS-функция вызывает perl-скрипт, передавая имя файла в качестве параметра и возвращает данные из скрипта perl, который обрабатывается [все всплывающие подсказки]. Когда вы начинаете видеть HitCntGraph, это вызовы в javascript-библиотеке. У меня есть plot.js, которые являются методами для создания и рисования графика. Там не должно быть никаких проблем, как это было раньше.

<script type="text/javascript"> 

//The following is the function associated with the event: file selected 
function openfilex(){ 

var xmlhttp; 
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttp=new XMLHttpRequest(); 
} 
else {// code for IE6, IE5 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
} 

xmlhttp.onreadystatechange=function() { 
    var str, wordCnt, word; 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) { // Get the results of the perl script 
     // Get the complete string 
     str = xmlhttp.responseText; 
     str = str.substring(24); 
     //alert(str); 

     // Split it into the numberical results adding the keywords at the end as a long string 
     wordCnt = str.split("-"); 
     //get the big string at the end 
     word = wordCnt.pop(); 
     // Now split apart this big word into an array of the key words 
     word = word.split(","); 
     //we must pop the last element off since the string ended in an ',' which means there 
     //is an extra element on this array [empty] 
     word.pop(); 

     //word is now an array whose elements are each a keyword 
     //alert(word); 
     //wordCnt is now an array whose elements are each a keyword count 
     //alert(wordCnt); 

     var length = wordCnt[0]; //get the numer of xaxis ticks 
     for(var i=0; i < length; i++) { //initialize the x-axis array 
      wordCnt[i] = wordCnt[i+1]; 
     } 

     //this will leave an extra element on the end [we essentially shrunk our array by one] so we pop this off. 
     wordCnt.pop(); 

     // Create the graph [see the library] 
     HitCntGraph = new MakeDraw(); 
     HitCntGraph.grid=1; 
     HitCntGraph.enumerateP = 0; 
     HitCntGraph.id="HitCntGraphCanvas"; 

     HitCntGraph.data = wordCnt; // data to plot amplitude 
     HitCntGraph.dataUnit = " Hits "; // few extra spaces make more space on the left 

     HitCntGraph.dataColor = wordCnt; // data to plot colors 
     HitCntGraph.dataColorUnit = ""; //we do not need an extra unit for color, so use the empty string 

     HitCntGraph.horizontalArray = word; // my indices 

     HitCntGraph.enableMouseMove = 1; 
     HitCntGraph.enableMouseDown = 1; 
     //HitCntGraph.mouseMoveFunctionAssociated = showData;//triggerMouseMove; shows what data array index are you pointing on 
     //HitCntGraph.mouseDownFunctionAssociated = showData;//triggerMouseDown; 
     HitCntGraph.enumerateH = 1; 
     HitCntGraph.title = "Keywords"; 
     // optional HitCntGraph.maximum = 255; 
     // optional HitCntGraph.maximum = 255;HitCntGraph.minimum = 0.0001; 
     HitCntGraph.plot(); 

    } 
} 

//get the filename that was selected from php code 
var file = document.filex.select.value; 

//call the perl script, passing the filename as a parameter 
xmlhttp.open(
'GET', 
'dropdown.pl?name=' + encodeURIComponent(file), 
false 
); 

xmlhttp.send(); 

} 
</script> 

Как форма, заголовок, так и функция JS находятся в моей голове. Далее следует раздел тела, который является, где я хочу, чтобы график, который можно сделать следующим образом:

<body> 
<script src="plot_v2.js"></script> 
<canvas width="1000" height="300" id="HitCntGraphCanvas" style=""></canvas> 
<!-- This div is only needed if mouseMoveFunctionAssociated is used --> 
<div id="outputArea"></div> 
</body> 

Итак, мудрые, Это идентично моей старой версии [до выпадающего меню], который работал. Я проверил его на каждом шагу, чтобы убедиться, что все компоненты работают правильно. Я подошел к самому концу, и, как я уже сказал, я даже вижу, что CORRECT-граф генерируется, когда я нажимаю submit ... хотя он остается только на секунду. Я бы хотел, чтобы он оставался на экране ниже выпадающего меню, пока пользователь не выберет другой файл для отправки и обработки. Пожалуйста помоги?!

Answer 1

Ваш JS обработчик события должен return false (или, вы можете вызвать preventDefault() на event объекта), чтобы предотвратить форму от фактического представления обратно на страницу (и вызывая страницу, чтобы обновить)

Answer 2

вы можете изменить <input type="submit" value="Choose File" /> - <input type="button" value="Choose File" onClick="openfilex()" />, но тогда вам придется отправить имя файла как параметр функции.