After sending a POST request, my JavaScript suddenly stops working for some unknown reason.
Here's the situation: I visit my webpage, fill out the form, and then click 'Click me' :
Upon clicking OK in the alert popup, I see the expected outcome:
However, when I try to click the button again after filling out the form, nothing happens! Even the alert popup doesn't show up.
Below are the files I am using:
Starting with my CSS file, simple2.css :
body, html {
margin:0;
padding:0;
height:100%;
}
a {
font-size:1.25em;
}
#content {
padding:25px;
}
#fade {
display:none;
position:absolute;
top:0%;
left:0%;
width:100%;
height:100%;
background-color:#ababab;
z-index:1001;
-moz-opacity:0.8;
opacity:.70;
filter:alpha(opacity=80);
}
#modal {
display:none;
position:absolute;
top:45%;
left:45%;
width:64px;
height:64px;
padding:30px 15px 0px;
border:3px solid #ababab;
box-shadow:1px 1px 10px #ababab;
border-radius:20px;
background-color:white;
z-index:1002;
text-align:center;
overflow:auto;
}
#results {
font-size:1.25em;
color:red;
}
Next is my HTML file, simple2.html :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="simple2.css">
<title>simple II</title>
</head>
<body>
<div id="fade"></div>
<div id="modal"> <img id="loader" src="images/loading.gif" /> </div>
<div id="results"><!-- Results are displayed here -->
<form method="post" name="start" target="_blank">
<p>Enter thing1: <input type="text" id="thing1" name="thing1" size="10" /></p>
<p>Enter thing2: <input type="text" id="thing2" name="thing2" size="10" /></p>
<p>Enter thing3: <input type="text" id="thing3" name="thing3" size="10" /></p>
<p>Check thing4: <input type="checkbox" id="thing4" name="thing4" value=1>
<input type="hidden" id="state" name="state" value="one" /></p>
</form>
<button id='clickme' name='clickme'>Click me</button>
<script src="simple2.js?0000000000015"></script>
</div>
</body>
</html>
Then comes my JavaScript code in simple2.js :
function openModal() {
document.getElementById('modal').style.display = 'block';
document.getElementById('fade').style.display = 'block';
}
// More JavaScript functions...
Lastly, my CGI script, simple2.py :
#!/usr/bin/env python
import cgi
import os
import cgitb; cgitb.enable()
import time
import calendar
// Python CGI script functions...