web.input() not taking on form data

Question

So I'm trying to create a simple registration form for users to enter their info, and submit for processing. I'm having trouble with grabbing the form data. The way the site is setup, I've got the "/register" form that then sends an ajax request to the url "/postregister". From there, enters the class that gets the data from web.input(), and then references the data for whatever I need to. Or at least that's the intention...

The problem that I have lies in the very first step: Grabbing the form data from "/register" page. Nothing is actually passed along.

Here is the register.html

<div class="container">
    <h2>Register Account</h2>
    <br /><br />
    <form id="register-form">
        <div class="form-group label-static is-empty>
        <label for="username" class="control-label">Username</label>
        <input id="username" class="form-control" type="text" placeholder="Choose a username..."/>
    </div>
    <button type="submit" class="btn btn-info">Submit </button>
    </form>
</div>

The main controller.py:

import web

urls = (
    '/', 'Home',
    '/register', 'Register',
    '/postregistration', 'PostRegistration'
)

render = web.template.render("Views/Templates", base="MainLayout")
app = web.application(urls, globals())

class Home:
    def GET(self):
        return render.Home()

class Register:
    def GET(self):
        return self.Register()

class PostRegistration:
    def POST(self):
        data = web.input()
        print "data:   " + str(data) # This line is for debugging
        return data.username

if __name__ == "__main__":
    app.run()

plus the js:

$(document).ready(function() {
    console.log("loaded");

    $(document).on("submit", "#register-form", function(e) {
        e.preventDefault();

        var form = $("#register-form").serialize();
        console.log(form); //This is just for debugging
    $.ajax({
        url: '/postregistration',
        type: 'POST',
        data: form,
        success: function(response){
        console.log(response);
        }
    });
    });
});

When I run the controller.py, and navigate to localhost:8080/register, I'm prompted with the form to fill out. Success! Now I enter the information and click submit. Problem!! When checking the console log, the form is not actually being captured. An "AttributeError" is raised, with AttributeError: 'username'. And sure enough, the controller.py prints:

data:   <storage {}>

So I see that web.input() grabs no data. Going back a little further, in the web console, I can see that "loaded" is written, then when I click submit, I can see that something (but actually nothing) is written to the console. Again, all signs point to me not grabbing the form data. Any ideas where I've gone wrong?

Answer 1

I think your jQuery selector here is wrong:

var form = $("register-form").serialize();

Ought to be

var form = $("#register-form").serialize();

Source

This would possibly result in no element being selected for .serialize() to serialize.

Answer 2

it looks like the serialize method is omitting all of the fields because they dont include a name attribute. if you add it to the register entries like this:

<div class="form-group label-static is-empty">
        <label for="username" class="control-label">Username</label>
        <input id="username" class="form-control" type="text" name="username" placeholder="Choose a username" />
</div>

then the form variable will populate. this still returns a 500 error when trying to access a field with the line data.username....

sources: JavaScript - Getting HTML form values https://api.jquery.com/serialize/

Answer 3

Indentation error:

class PostRegistration:
    def POST(self):
        data = web.input()
    print "data:   " + str(data) # This line is for debugging
    return data.username

Needs to be:

class PostRegistration:
    def POST(self):
       data = web.input()
       print "data:   " + str(data) # This line is for debugging
       return data.username

On the jquery side, .serialize() will ignore all inputs which do not have a name attribute. That's why you're not getting anything sent across the wire.

Solution is add name='username' to your input.