Ajax code form wont work on submit

Question

[okay, i am sorry if i posted a duplicate question but i am just new to ajax so i somehow misused the words while searching. ] - Jquery Form Submit Keeps Refreshing

I cant find the what is wrong with my code. This is my form code:

  <form id="UploadExcel" enctype="multipart/form-data" >
                            <input name="file" type="file" />
                            <input id="submit" type="submit" value="Submit" />
                        </form>

then this is my ajax form

$('#UploadExcel').submit(function(){
        $.ajax({
            url:'UploadServlet',
            type:'POST',
            dataType:'json',
            data: $('#UploadExcel').serialize(),
           success: function(data){
               if(data.isValid){
                   $("#ShowSheets").modal("show");
               }else{
                   alert('Please Put a Valid Excel Sheet');
               }
           }
        });
        return false;
    });

everything is just reloading which i think is not supposed to happen since i am using ajax. There is no error or anything in the console, so i dont think I have any problem with my servlet...

Possible duplicate of [Stop form refreshing page on submit](http://stackoverflow.com/questions/19454310/stop-form-refreshing-page-on-submit) — nicael, Jun 11 '16 at 17:46

score 2 · Accepted Answer · answered Jun 11 '16 at 17:43

2

use preventDefault()

$('#UploadExcel').submit(function(e){
  e.preventDefault();
        $.ajax({
            url:'UploadServlet',
            type:'POST',
            dataType:'json',
            data: $('#UploadExcel').serialize(),
           success: function(data){
               if(data.isValid){
                   $("#ShowSheets").modal("show");
               }else{
                   alert('Please Put a Valid Excel Sheet');
               }
           }
        });
        return false;
    });

answered Jun 11 '16 at 17:43

Ravisha Hesh

1,504
13
19

the page still realods – SCS Jun 11 '16 at 17:47
tried shutting down my laptop but still wont work :( – SCS Jun 11 '16 at 18:26
You mean it still refreshes the page? – Ravisha Hesh Jun 11 '16 at 18:31
yeap, i even tried running the program in other browser but it still reloads the page – SCS Jun 11 '16 at 18:32
solve it with $(document).on('submit', 'form#central', function(e){}); from the link above but still thanks a lot – SCS Jun 11 '16 at 18:42
first, add an alert to the click function on your js. if it doesn't pop when you submit your form. that means function doesn't fire when you submit. so try after put it inside $(document).ready(); – Ravisha Hesh Jun 11 '16 at 18:43

score 1 · Answer 2 · answered Jun 11 '16 at 17:43

You need to cancel the default action (form submit) first:

$('#UploadExcel').submit(function(e){
        // Prevent default action
        e.preventDefault()
        $.ajax({
            url:'UploadServlet',
            type:'POST',
            dataType:'json',
            data: $('#UploadExcel').serialize(),
           success: function(data){
               if(data.isValid){
                   $("#ShowSheets").modal("show");
               }else{
                   alert('Please Put a Valid Excel Sheet');
               }
           }
        });
        return false;
    });

Ajax code form wont work on submit

2 Answers2