Hi,
For a work/self development project I am massively underqualified for, I am attempting to build a live webchat to be intergrated on our website. For testing purposes I set up a HTTPServer using Python what will ‘pull’ the index.html file on localhost. All was working perfectly until I was attempting to print the input value from the form in the console.
Since then when starting up the server it doesn’t GET the index.html file, but does get the style.css and script.js files. When it was working it only used to get the html file. Can anyone spot an obvious reason why it is no longer working.
Please try and dumb answers down as much as possible as I don’t really have any coding/web development experience. (Google has been my best friend 
) Code below.
pythonHander.py (Server-side)
from http.server import BaseHTTPRequestHandler, HTTPServer
import os
import cgi
class handler(BaseHTTPRequestHandler):
def do_GET(self):
pat = '\index.html'
try:
if pat != ".py":
f = open(pat[1:]).read()
self.send_response(200)
self.end_headers()
self.wfile.write(bytes(f, 'utf-8'))
else:
f = pat + " - File Not Found"
self.send_error(404,f)
except:
f = pat + " - File Not Found"
self.send_error(404,f)
def do_POST(self):
print("here")
self.send_response(200)
self.send_header('Content-type','text/html')
self.end_headers()
form = cgi.FieldStorage()
usermessage = form.getvalue('textbox')
print (usermessage)
message = "Dummy response for type POST"
self.wfile.write(bytes(message, "utf8"))
with HTTPServer(('', 8000), handler) as server:
server.serve_forever()
index.html (client-side)
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Lato'><link rel="stylesheet" href="./style.css">
</script>
</head>
<body>
<!-- partial:index.partial.html -->
<div id="webchat"></div>
<button class="chatbox-open">
<i class="fa fa-comment fa-2x" aria-hidden="true"></i>
</button>
<button class="chatbox-close">
<i class="fa fa-close fa-2x" aria-hidden="true"></i>
</button>
<section class="chatbox-popup">
<header class="chatbox-popup__header">
<aside style="flex:3">
<i class="fa fa-user-circle fa-4x chatbox-popup__avatar" aria-hidden="true"></i>
</aside>
<aside style="flex:8">
<h1>Agent Name</h1> Agent (Online)
</aside>
<aside style="flex:1">
<button class="chatbox-maximize"><i class="fa fa-window-maximize" aria-hidden="true" onclick="return false"></i></button>
</aside>
</header>
<main class="chatbox-popup__main">
Placeholder text <br> Lorem Ipsum is simply dummy text of the <br> printing and typesetting industry.<br>
<div class="Imessage">
<p class="from-them"><?php echo $_GET["text_box"]; ?>
</div>
</main>
<footer class="chatbox-popup__footer">
<input style="display:none" type="file" id="my-file">
<button style="flex:1;color:#888;text-align:center;">
<i class="fa fa-camera" aria-hidden="true" onclick="document.getElementById('my-file').click()"></i>
</Button>
<form class="textbox" action="pythonHandler.py" method="POST" button="submit-button1" style="flex:10">
<input id="text_box" type="text" placeholder="Type your message here..." autofocus></input>
<button id="submit-button1" type='submit' onclick="return false" form="User-message" style="flex:1;color:#888;text-align:center;">
<i class="fa fa-paper-plane" aria-hidden="true"></i>
</button>
</form>
</footer>
</section>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script><script src="./script.js">
</script>
<script var form = document.getElementById("submit-button1");
function handleForm(event) { event.preventDefault(); }
form.addEventListener('submit', handleForm);
</script>
</body>
</html>
Below is an screenshot of the server console
