Sending form data to nodejs without reloading page using Ajax

Question

This is my code for sending form data to nodejs using Ajax. I want to achieve this without reloading the page. I have tried to run this in IE,Firefox and Chrome. There is no output seen, hence I want to know where am I going wrong. I am new to Ajax, please help me!

<html>
<meta charset="UTF-8">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script>


  $('#newform').on('submit', function (event) {
	 //alert('Hi');
    event.preventDefault();
    var data = {
      username: $('#username').val(),
    };
	
    $.ajax({
      url: 'http://127.0.0.1:8081/upload',
      data: data,
      method: 'POST'
    }).then(function (response) {
      
      $('body').append(response);
    }).catch(function (err) {
      console.error(err);
    });
  });
</script>


</head>
<body>
<form action="/upload" method="post" id="newform">
<input type="text" name="username" id="username"></input>
<input type="button" value="submit" id="s1"></input>
</form>

</body>

</html>

Do you have a node.js server running at all? Show the nodejs code — Vsevolod Goloviznin
– Vsevolod Goloviznin, Commented Sep 8, 2015 at 10:44

DevAlien · Accepted Answer · 2015-09-08 11:27:04Z

2

I see that you are including version 1.5 of jquery (now 1.11..). It is very old. but running your code i see the following error: TypeError: $(...).on is not a function.

If we go to the documentation of jQuery for the .on method ( http://api.jquery.com/on/ ) we can see that it was included in version 1.7, this means that is not present in the version you included.

My suggestion is to update the library to 1.11.3 (latest) http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js

The code looks ok to me. Ah and when you run the script you should check for the errors in the inspector console in chrome, so you can see what is wrong.

answered Sep 8, 2015 at 11:27

DevAlien

2,48617 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Sending form data to nodejs without reloading page using Ajax

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related