调用preventDefault（）时的AJAX表单重新加载页面

Question

I have a Node/Express/Mongo app and I am trying to make an AJAX call, the data is now saving fine but the page is reloading even when I user preventDefault() in the AJAX call. Why is this happening?

var categoryButton = function(){
event.preventDefault();
$("#add_category_form").submit(function (event){
    event.preventDefault();

    $.ajax({                     //this gets the ID, you have to add a data-id="user._id" to the input you want to send the request from.
        url: $("add_category_form").attr("action"),
        type: "POST",
        dataType: json,
        done: function (result) {
            alert("successful");
            //console.log(result.categories);
        },
        fail: function (fail){
            console.log(fail);
        }
    });
});
};

Here is the HTML

<section id="event_categories_section"   style="display:none;" class="col-md-6">
                    <form  id="add_category_form" onsubmit="categoryButton" method="POST" action="/user/categories/<%=user._id%>">
                        <label for="input_category_name">Add a category for your Events</label>
                        <div class="input-group">
                            <div class="input-group-btn">
                                <input  type="submit" id="add_category_button" value="Add Category!" class="btn btn-primary dropdown-toggle"></input>
                            </div>
                            <input class="form-control" id="input_category_name" name="user[category]" placeholder="Category Name" required type="text" minlength="2" data-id="<%= user._id %>">
                        </div>
                    </form>
                    <hr>
                    <div class="col-md-6">
                        <h3>List of Categories</h3>
                        <section class="well" id="list_category_section">
                            <% user.categories.forEach(function(category){ %>
                            <p><%= category %></p>
                            <% }); %>
                        </section>

                    </div>
                </section>

Answer 1

Update your code and check

 <section id="event_categories_section"   style="display:none;" class="col-md-6">
                    <form  id="add_category_form"  method="POST" action="/user/categories/<%=user._id%>">
                        <label for="input_category_name">Add a category for your Events</label>
                        <div class="input-group">
                            <div class="input-group-btn">
                                <input  type="submit" id="add_category_button" value="Add Category!" class="btn btn-primary dropdown-toggle"></input>
                            </div>
                            <input class="form-control" id="input_category_name" name="user[category]" placeholder="Category Name" required type="text" minlength="2" data-id="<%= user._id %>">
                        </div>
                    </form>
                    <hr>
                    <div class="col-md-6">
                        <h3>List of Categories</h3>
                        <section class="well" id="list_category_section">
                            <% user.categories.forEach(function(category){ %>
                            <p><%= category %></p>
                            <% }); %>
                        </section>

                    </div>
                </section>

Ajax section :-

$(function() {
$("#add_category_form").submit(function (event){
    event.preventDefault();

    $.ajax({                     //this gets the ID, you have to add a data-id="user._id" to the input you want to send the request from.
        url: $("add_category_form").attr("action"),
        type: "POST",
        dataType: json,
        done: function (result) {
            alert("successful");
            //console.log(result.categories);
        },
        fail: function (fail){
            console.log(fail);
        }
    });
});
});

Answer 2

Use return false at the end of your .submit() function

return false from within a jQuery event handler is effectively the same as calling both event.preventDefault and event.stopPropagation on the passed jQuery.Event object.

event.preventDefault() will prevent the default event from occurring.

event.stopPropagation() will prevent the event from bubbling up.

Answer 3

remove the onsubmit attribute from the form and call the categoryButton() function when document is ready, then your submit event will bind with your form and everything will work properly. I just modified little bit your code please try it and share your feedback.

   $(function() {
    categoryButton();
    })
var categoryButton = function(){
$("#add_category_form").submit(function (event){
    event.preventDefault();

    $.ajax({                     //this gets the ID, you have to add a data-id="user._id" to the input you want to send the request from.
        url: $("add_category_form").attr("action"),
        type: "POST",
        dataType: json,
        done: function (result) {
            alert("successful");
            //console.log(result.categories);
        },
        fail: function (fail){
            console.log(fail);
        }
    });
});
};