Event handler does not work

Question

Hello!

Created a form with a register, it is impossible to use event listener ..

After filling out the form and submit, nothing happens. I would be happy to help ..

function registerHandler(user){ console.log(user.username); console.log(user.userid); console.log(user.firstname); console.log(user.lastname); console.log(user.password); console.log(user.email); var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if(xhr.readyState!=4 && xhr.status!=200){ return window.alert(xhr.responseText); } } xhr.open("POST","http://localhost:8080/CouponOnWeb/webappl/register",true); xhr.setRequestHeader('Content-type','application/json;charset=utf-8'); xhr.send(user); } function registerController(){ document.getElementById("reg_button").onclick = function(){ var user = { username:document.getElementById("reg_user_name").value, firstname:document.getElementById("first_name").value, lastname:document.getElementById("last_name").value, userid:document.getElementById("user_id").value, password:document.getElementById("reg_password").value, email:document.getElementById("reg_email").value } console.log(user.username); console.log(user.userid); console.log(user.firstname); console.log(user.lastname); console.log(user.password); console.log(user.email); registerHandler(user); } }

  <form id = "registrator"> <label for = "reg_user_name">User name:</label> <input id = "reg_user_name" name = "reg_user_name" type = "text" placeholder = "user name"> <br> <label for = "first_name">First name:</label> <input id = "first_name" name = "first_name" type = "text" placeholder = "first name"> <br> <label for = "last_name">Last name:</label> <input id = "last_name" name = "last_name" type = "text" placeholder = "last name"> <br> <label for = "user_id">Id number:</label> <input id = "user_id" name = "user_id" type = "number" placeholder = "id number"> <br> <label for = "reg_password">Password:</label> <input id = "reg_password" name = "reg_password" type = "text" placeholder = "password"> <br> <label for = "reg_email">Email:</label> <input id = "reg_email" name = "reg_email" type = "email" placeholder = "email"> <br> <input id = "reg_button" name = "reg_button" type = "submit" value = "Register" onclick = "registerController()"> </form>

Delivered in response to the mistakes that I saw on the move

Accepted Answer · 2016-06-11T22:28:38

1. label for id = "reg_user_name" -> so it is impossible.
You actually assign an id to a label. And you still have an element with the same id.
If you want to bind a label to an element with some id, you just need to:
<label for = "reg_user_name">User name:</label>

2. You want the handler to hang on the whole form and not the button. Do you really want your request to leave with every click on any form element?

3. You do not send xhr request, because the request sending code was written in the response handler. Put the send code on the brace below

 xhr.onreadystatechange = function(){ if(xhr.readyState!=4 && xhr.status!=200){ return window.alert(xhr.responseText); } } xhr.open("POST","http://localhost:8080/CouponOnWeb/webappl/register",true); xhr.setRequestHeader('Content-type','application/json;charset=utf-8'); xhr.send(user);

In general, using devtools, all these errors are noticed and corrected in a minute. Learn to use tools.

4. You do not send xhr request, because the request sending code was written in the response handler.
As for calls: window.onload = function () {registerController ();

Event handler does not work

1 answer 1

More articles: