I am trying to create login page but I stuck on sending data to Cherrypy as a JSON. Trying to override submit button because AJAX does not send any data when I am pressing the button.
Old Code Deleted
@EDIT I have changed the code and now I am not sending any data to server (I assume that cuz there is nothing in console after pressing the button)
$("#myForm").click(function(){
var dataString = {};
dataString.login = $("#login").val();
dataString.password = $("#password").val();
$.ajax({
type: 'POST',
url: 'http://localhost:8080/login',
data: JSON.stringify(dataString),
contentType: 'application/json',
dataType: 'json',
success: function(response) {
console.log(response);
},
error: function(response) {
console.log(response);
}
});
});
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="example.js"></script>
</head>
<body>
<div class="login-page">
<div class="form">
<form id="myForm" class="login-form">
<input type="text" name="login" id="login" placeholder="login"/>
<input type="password" name="password" id="password" placeholder="password"/>
<button form="myForm" type="submit">Login</button>
<p class="message">Not registered? <a href="#">Create an account</a></p>
</form>
</div>
</div>
</body>
</html>
What do I do wrong here?
You want to do a post request (you have to handle post on server side as well):
type: 'POST',
Also put this inside your submit function:
var dataString = {};
dataString.login = $("#login").val();
dataString.password = $("#password").val();
So the code becomes :
<form id="myForm" class="login-form">
<input type="text" id="login" placeholder="login"/>
<input type="password" id="password" placeholder="password"/>
<button class="button_submit">login</button>
<p class="message">Not registered? <a href="#">Create an account</a></p>
</form>
$("#myForm").submit(function(){
var dataString = {};
dataString.login = $("#login").val();
dataString.password = $("#password").val();
$.ajax({
type: 'POST',
url: 'http://localhost:8080/login',
data: JSON.stringify(dataString),
contentType: 'application/json',
dataType: 'json',
success: function(response) {
console.log(response);
},
error: function(response) {
console.log(response);
}
});
});
Shift the event.preventDefault() to top. In your case the button was executing it's normal behaviour that is submitting, which need to be prevented to execute to ajax.
$('#button_submit').click(function(event) {
event.preventDefault();
$.ajax({
//rest of the code
});
});
You are using wrong referring to the button, see the documentation
Change:
<button class="button_submit">login</button>
to
<button id="button_submit">login</button>
Add name attribute to the input fields instead of id ( or use both if you prefer) and switch GET to POST to keep data hidden:
<input type="text" id="login" name="login" placeholder="login"/>
<input type="password" id="password" name="password" placeholder="password"/>
then fix the jQuery to :
$('#button_submit').on("click",function(e) {
e.preventDefault();
....
In this case it would be better to send a POST request as it is a bit more "hidden" request then just throwing the parameters with GET (POST sends data in the "background"). Also note, that if you want to correctly handle form submit and you're using jQuery, use submit event handler.
$("#myForm").submit(function(){
// do stuff
});