JQuery function does not see text field value

Question

please don't judge my JS skills, this is where I start. =))

So, I have a function that registers the user, but I want to make the "create_sample_user" button to fill in the text fields with some data. This way, people can quickly check the website without entering names, email, etc.

But the problem is that the Register button works fine when I type in the username and all other fields on my own. But it doesn’t work (I assume that it just doesn’t see the value of the text fields) when I fill them with the 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"); } } }); }); } 

ANSWER:

the whole thing does not work due to a single character in this line of code:

 `var uname = 'Sample_'+ranNum;` 

For some reason, the _ symbol was a problem, and AJAX did not want to take it. in other words:

 var uname = 'Sample'+ranNum; 

This line will do the trick: =)

Answer 1

Ok, replace your create_sample_user() method as follows:

 $(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 shell of the function register_user() .

That should do it. It should also open a success warning window (I changed the AJAX URL to use the AJAX echo for jsFiddle): http://jsfiddle.net/MQ6Cq/4/

UPDATES (since you sent your code - I will update it with errors when I find them):

• Now you have two calls to $(document).ready() - delete the first one (THIS IS GOING)
• You need to remove the function register_user() { lines, and the closing bracket around the registry user click handler

I made a small update to my previous violin, just in case it helps with testing, and changed the request type to "GET". Open your browser console (F12), right-click and enable logging for XMLHttpRequests. Then run it and you will see that AJAX successfully transfers the data. I don’t know what is wrong with your other material, but I don’t have a server on which I can check it, and I don’t get enough reviews to find out what happens after you try each sentence (or, repeat them). I just hope this helps you solve your problem.

Good luck! :)

Answer 2

Your code should work. Here's jsfiddle (simplified version)

If you look at the console, you will see that the data is well formatted.

The only thing I see in your code is that create_sample_user () is not called, so the click event is not applied to the button. But I think you just did not indicate in the question

 create_sample_user(); $('#register-user').click(register_user); function create_sample_user() { var button = $("#create-sample-user"); button.click(function() { var ranNum = 1 + Math.floor(Math.random() * 100); var uname = $("#id_username").val('Sample_'+ranNum); $("#id_email").val(uname.val()+'@'+uname.val()+'.com'); $("#id_password").val(uname.val()); $("#id_password2").val(uname.val()); }); } function register_user() { data = { username : $("#id_username").val(), email : $("#id_email").val(), password : $("#id_password").val(), password2 : $("#id_password2").val(), } console.log(data); } 

Answer 3

 $("#create-sample-user").click(create_sample_user); $('#register-user').click(register_user); function create_sample_user() { var ranNum = 1 + Math.floor(Math.random() * 100); var uname = $("#id_username").val('Sample_' + ranNum); $("#id_email").val(uname.val() + '@' + uname.val() + '.com'); $("#id_password").val(uname.val()); $("#id_password2").val(uname.val()); } function register_user() { data = { username: $("#id_username").val(), email: $("#id_email").val(), password: $("#id_password").val(), password2: $("#id_password2").val(), } console.log(data); }