0

I am wanting to POST a user inputted data in an html file to a Python script with AJAX and have the Python script return it so that it shows up in a specific div in the html file.

HTML

<!DOCTYPE HTML>
<html>
  <head>
    <title>AJAX Test</title>
    <script src="http://code.jquery.com/jquery-3.3.1.js"></script>
    <script>
        function test()
        {
            var message = $('input[name=message]').val();
            $.ajax({
                url: "/cgi-bin/hello.py",
                type: "POST",
                data: {"text" : message},
                success: function(response){
                        $("#div").html(response);
                }
            });
        };

    </script>
  </head>
  <body>
    <form>
    Enter Message: <input type="text" name="message">
    <input type="submit" value="submit" onclick="test()">
    </form>
    <div id="div">Default Message</div>

  </body>
</html>

Python

#!/home/user/virtualenv/test/3.5/bin/python

import cgi, cgitb 
cgitb.enable() 

data = cgi.FieldStorage()

print "Content-Type: text/html\n"
print data

When I type a message into the input box and press the submit button, nothing happens. I am new to this so I feel like I am probably not understanding how this works. Any help would be appreciated!

Edit: Console is showing Uncaught TypeError: $.ajax is not a function

Edit 2: The first problem was due to using the slim version of jquery. After fixing that, nothing is happening on the page when I input and click submit.

krazyboi
  • 77
  • 2
  • 12
  • Look at the developer console for certain javascript errors, and also make sure that your python endpoint is setup correctly. Not sure what you are using for http server. – Hozikimaru Jul 25 '18 at 18:56
  • I am trying to set up the page on a webhost and I believe python is setup correctly. In console, I am getting the error: `Uncaught TypeError: $.ajax is not a function` – krazyboi Jul 25 '18 at 20:38
  • It appears that you did not include JQuery library in the header. Also check out this: https://stackoverflow.com/questions/18271251/typeerror-ajax-is-not-a-function You should definitely be Googling before asking questions. – Hozikimaru Jul 25 '18 at 20:48
  • Thank you, I have the jquery script source in the header but it doesn't seem to work. I will try to figure it out. Regarding the googling, I would have googled it if I knew about the developer console that you told me about. Without the console, I had no idea what was going on. So, thank you twice. – krazyboi Jul 25 '18 at 21:06
  • after fixing the jquery issue, nothing happens when I input and press submit – krazyboi Jul 25 '18 at 23:13
  • when you check the console after submitting, do you see the network traffic? Do you see the request being sent? If so what is the http response? – Hozikimaru Jul 26 '18 at 04:20
  • @Hozikimaru it shows that it is using GET and the url shows the query string `?message=whateverityped` at the end – krazyboi Jul 26 '18 at 04:49
  • I changed the input button to `` and now it is POSTing the data, but I am not getting the correct data to show up in the div. Instead, I am getting `FieldStorage(None, None, [MiniFieldStorage('text', 'blahblah')])`. I think I saw something about this while researching so I will go ahead and search for it again. Thank you for all of your help so far! – krazyboi Jul 26 '18 at 05:25
  • @Hozikimaru I have figured it out, I had to access the value by using `print (data["text"].value)` in python. thank you for everything! – krazyboi Jul 26 '18 at 05:32

1 Answers1

0

The problem was that the form was submitting when I clicked the button. The solution was to change the input type to <button value="Submit" onclick="test()">.

The next problem was that python was returning FieldStorage(None, None, [MiniFieldStorage('text', 'blahblah')]). The solution was to access the value by using print (data["text"].value)

krazyboi
  • 77
  • 2
  • 12