AJAX - Override submit function

Question

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)

My .js

$("#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);
    }
  });
});

My .html

<!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>

Login Page (data not encrypted?)

PIC

Password in the link?

My Console (empty?)

PIC

No Login call

What do I do wrong here?

If I understand HTML correctly button should have proceeded all input above as a form request and send data to cherrypy engine. But it does not so I decided to override function on AJAX and then receive data I want but scripts seems not responding. — , Jun 12 '17 at 05:17

Ced · Accepted Answer · 2017-06-12T05:42:56.010

0

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);
    }
  });
});

edited Jun 12 '17 at 05:42

answered Jun 12 '17 at 05:17

Ced

15,847
14
87
146

So myForm here response to login-form in my html file am I right here? – Jun 12 '17 at 05:40
1

@OskarGarczyński see my edit, is it clearer like this ? (I don't understand what you mean in your comment) – Ced Jun 12 '17 at 05:43
I've changed code's as you showed me but I am not receiving any output data after pressing the button in the console. How should I call them? – Jun 12 '17 at 06:00
@OskarGarczyński Do you have a server running ? If so does it handles POST requests ? – Ced Jun 12 '17 at 06:01
yes I am using Cherrypy, I guess it does handle POST requests [this example](https://stackoverflow.com/questions/3743769/how-to-receive-json-in-a-post-request-in-cherrypy) – Jun 12 '17 at 06:08
@OskarGarczyński When the user press the button the data is sent to the server to the specific path '/login' as post request. Now how you handle that data is done on the server of course. You can check the data is sent via the network tab in google dev tools. How to process on the server side is out of scope of this question. But you can check that the code provided indeeds sends it to the server with the dev tools. The reason you are not seeing anything in the console is because your server doesn't answer anything. – Ced Jun 12 '17 at 06:13
anyway ur answers didn't help me anyway :/ [problem is somewhere else](https://stackoverflow.com/questions/44499045/cherrypy-reciving-json-data-404-missing-parameters) – Jun 12 '17 at 12:39
@OskarGarczyński I'd suggest following a simple tutorial. Your edit makes it pretty clear that you don't really know what you are doing but we can't do everything for you. If you have other questions please post another one as a new question – Ced Jun 12 '17 at 12:42

brk · Answer 2 · 2017-06-12T05:24:14.887

0

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
  });

});

edited Jun 12 '17 at 05:24

answered Jun 12 '17 at 05:18

brk

48,835
10
56
78

@RolandStarke thanks for pointing it. I have edited the answer – brk Jun 12 '17 at 05:24
This is not true. – charlietfl Jun 12 '17 at 05:34
@charlietfl i am not sure why this is false? – brk Jun 12 '17 at 05:36
Because it works the same whether it is at top or bottom or in the middle...assuming no exceptions are thrown before `preventDefault()` is reached. It is better practice to put it at top for that reason....but won't change behavior – charlietfl Jun 12 '17 at 05:37
also event won't be undefined as someone said earlier before you edited. – Ced Jun 12 '17 at 05:44

Uncoke · Answer 3 · 2017-06-12T07:03:07.150

0

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();
....

edited Jun 12 '17 at 07:03

answered Jun 12 '17 at 05:19

Uncoke

1,832
4
26
58

thanks a lot, was thinking about changing it to id. `` is that correct now? or I need that ID to use ur ajax code – Jun 12 '17 at 05:41
1

You need to use the same referring to manage the handler: - needs $('#button_submit').click(function() {...} - needs $('#xxx").click(function() {...} – Uncoke Jun 12 '17 at 05:45
There was a type error $('#button_submit').on("click",function(e){...} not .on.(... – Uncoke Jun 12 '17 at 07:04

score 0 · Answer 4 · answered Jun 12 '17 at 05:20

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
});

AJAX - Override submit function

My .js

My .html

Login Page (data not encrypted?)

My Console (empty?)

4 Answers4