Page reloading inspite of using preventDefault() function

Question

I am using jquery ajax to post a form to my node.js server. I am trying to prevent the page from refreshing ( since trying to develop a SPA) using preventDefault function, but surprisingly it is redirecting. And moreover, the data is being passed to the node express server very smoothly. But somehow it is skipping a couple of line it seems. When I'm trying this in a basic POC, everything is working fine and it is preventing page refresh.

 $(document).ready(function(){
$('#submit').click(function(event){
//$("form#foodForm").submit(function(event) {
window.alert( event.isDefaultPrevented() );
event.preventDefault();
window.alert( event.isDefaultPrevented() );
  console.log("form submitted");
   // Prevents the page from refreshing
  var $this = $(this); // `this` refers to the current form element
  $.post(
      '/submittedData', // Gets the URL to sent the post to
      $this.serialize(), // Serializes form data in standard format
      function(data) {
      console.log(data); /** code to handle response **/ },
      "json" // The format the response should be in
  );
});

});

app.js code:

    app.post('/submittedData',function(req,res){
  console.log('body: ' + JSON.stringify(req.body));
});

HTML piece:

<form id="foodForm" action="/submittedData" method="post">

   <ul> Main course
   <li> <input type="checkbox" name="items[]" value="roti">Roti </li>
    <li><input type="checkbox" name="items[]" value="biryani">Biryani</li>
    <li><input type="checkbox" name="items[]" value="rice">Rice</li>
    </ul>
    <ul> On the side
    <li><input type="checkbox" name="items[]" value="chicken">Chicken</li>
    <li><input type="checkbox" name="items[]" value="mutton">Mutton</li>
    </ul>


<button id="submit">Submit</button>
  <!-- <input type="submit" value="submit" id="submit" > -->

</form>

Is it possible to show html code as well? Maybe the submit id is not yet in the dom when you invoke click event. And if that is the case use .on() over document probably and bind click event to submit id. — Anirudh Mangalvedhekar, Oct 22 '16 at 16:55
Thanks. How about $("#foodForm").submit(function(evt){evt.preventDefault();}); — Anirudh Mangalvedhekar, Oct 22 '16 at 17:00
Also i see in html button is missing attribute type="button". You cna keep the jQuery code as is and just add attribute as mentioned before to your button element. Hope that helps. — Anirudh Mangalvedhekar, Oct 22 '16 at 17:03
Hi, I followed your second comment, just added the type="button" attribute and the strange thing that happened is that, nothing is happening when i am clicking submit, neither posting, nor reloading.. It's like it is dead.. — Arindam Saha, Oct 22 '16 at 17:14
I believe that is because this here is referring the submit button and not the form. So maybe use form id rather than this to serialize. $("#foodForm").serialize() — Anirudh Mangalvedhekar, Oct 22 '16 at 17:16
Hi, I tried " $("#foodForm").submit(function(evt){ " but same thing, nothing is happening in the page. Then I tried with $("#foodForm").serialize() in the post data part, same thing!! :( — Arindam Saha, Oct 22 '16 at 17:23
Does buttons (type="button") handled differently in jquery ? — Arindam Saha, Oct 22 '16 at 17:25
Type="button" is proper wat of handling. I am assuming you moved preventDefault at the end. — Anirudh Mangalvedhekar, Oct 22 '16 at 17:29
http://stackoverflow.com/a/21058996/2967711 Look at this answer for more details. — Anirudh Mangalvedhekar, Oct 22 '16 at 17:31

score 0 · Answer 1 · answered Oct 22 '16 at 16:50

0

add

  return false;

in the end of your function in js code..this will stop the normal page relaoding and form submission. Try it and tell me

answered Oct 22 '16 at 16:50

Zaki Mustafa

147
1
11

Hello, Tried it but not working. Only difference it is making is it is not redirecting to localhost:3000/submittedData, but it is staying at localhost:3000 and trying to refresh the page or something. But main thing is that I am not being able to post request from that same page. :( – Arindam Saha Oct 22 '16 at 17:05

score 0 · Answer 2 · answered Oct 22 '16 at 19:48

0

The problem is solved now. And the answer is well.. crazy. And I couldn't find out the root cause though. I was writing the js code in a separate file and referencing it (properly), like we usually do. But although the post was happening the page was reloading.

I copied and pasted the js code in the html page itself inside script tags and boom!! it works..

answered Oct 22 '16 at 19:48

Arindam Saha

11
3

Might be simply browser cache, tried disabling that? – Sven van de Scheur Oct 22 '16 at 19:55

score 0 · Answer 3 · answered Nov 07 '16 at 01:04

0

You should use form.on("submit") event , in your case even if you successfully canceled the click button event if the user hit the enter button while typing in one of the input fields your Ajax code will not work

answered Nov 07 '16 at 01:04

Fareed Alnamrouti

30,771
4
85
76

Page reloading inspite of using preventDefault() function

3 Answers3