Question

please don’t judge my JS skills, I’m complete beginner in it. =))

So I have a function that register user, But I want to make “create_sample_user” button to fill text fields with some data. This way people can quickly check the website, without typing names, email and so on…

But the problem is: Register button works fine when I type username and all other fields by my self. But Doesn’t work(I assume it just doesn’t ‘see’ the values of the text fields) when I fill them with “create_sample_user” button.

function create_sample_user() {
    var button = $("#create-sample-user");
    button.click(function() {
        var ranNum = 1 + Math.floor(Math.random() * 100);
        var uname = 'Sample_'+ranNum;
        $("#id_username").val(uname);
        $("#id_email").val(uname+'@'+uname+'.com');
        $("#id_password").val(uname);
        $("#id_password2").val(uname);
    });
}

function register_user() {
    $("#register-user").click(function() {
        $.ajax({
            url: "/registration/register_user/",
            type: "POST",
            dataType: "text",
            data: {
                username : $("#id_username").val(),
                email : $("#id_email").val(),
                password : $("#id_password").val(),
                password2 : $("#id_password2").val(),
            },
            success: function(data) {
                parsed_data = $.parseJSON(data);
                if (data) {
                    alert("User was created");
                    window.location = parsed_data.link;
                }
                else {
                    alert("Error");
                }

            }
        });
    });
}

THE ANSWER:

whole thing didn’t work because of one character in this line of code:

`var uname = 'Sample_'+ranNum;` 

For some reason _ character was the problem, and AJAX didn’t want take it.
in other words:

var uname = 'Sample'+ranNum; 

This line would do the trick :=)

Answer 1

Okay, replace your create_sample_user() method with this:

$(document).ready(function() {
    var button = $("#create-sample-user");
    button.click(function() {
        var ranNum = 1 + Math.floor(Math.random() * 100);
        var uname = 'Sample_'+ranNum;
        $("#id_username").val(uname);
        $("#id_email").val(uname+'@'+uname+'.com');
        $("#id_password").val(uname);
        $("#id_password2").val(uname);
    });
}​);​

Also, try removing the function register_user() function wrapper.

This should do it. It should pop up the success alert box as well (I changed your AJAX URL to use the AJAX echo for jsFiddle):
http://jsfiddle.net/MQ6Cq/4/

UPDATES (since you posted your code – I will update this with bugs as I find them):

• You have two $(document).ready() calls now – delete the first one (THIS WAS EDITED)
• You have have to remove the lines function register_user() { and the closing brace from around the register user click handler

I made a tiny update to my earlier fiddle, just in case it helps with testing, and changed the request type to “GET”. Open your browser’s console (F12), right-click and turn on logging for XMLHttpRequests. Then run it and you will see that the AJAX is successfully transmitting the data. I don’t know what is wrong with your other stuff but I don’t have a server that I can test it on and I’m not getting enough feedback to know what’s going on after you try each suggestion (or even if you’re trying them). I just hope this helps you solve your problem.

Good Luck! 🙂