Bootstrap modal submitting my form

Question

I am developing an application in asp.net MVC 5, I have a form on my screen which have some required fields and on my form there is an add new button which is a simple button, on clicking add new button a bootstrap modal opens but when bootstrap modal open it submits my form on server, I don't want to submit form on modal opening. Please advise.

@using (Ajax.BeginForm("NewUser", null, new AjaxOptions { OnSuccess = "UserRoles.onSuccess", OnFailure = "UserRoles.onFailure", HttpMethod = "POST", OnBegin = "return setValues()" }, new { @class = "" }))
{
    <button id="btnAddEditUserRoles" class="btn btnPrimaryStyle pull-left">
        @Resources.AddNew
    </button>

    <div class="row mrgnTop15">
        <div class="form-group btn-group col-sm-6 ">
            <button type="submit" class="btnPrimaryStyle btn  col-sm-3 col-xs-12 pull-left">@Resources.Save</button>
        </div>
        <div class="form-group btn-group col-sm-6">
            <button type="button" class="btn btnDefaultStyle  col-sm-3 col-xs-12">کینسل</button>
        </div>
    </div>
}

on button click

$btnAddEditUserRoles.on("click", function () {
     UserRoles.openAddEditModal(null);
});

var openAddEditModal = function (UserId) {
     getData();
};

function getData(){
    $.ajax({
            url: url,
            type: "GET",
            contentType: "application/json; charset=utf-8",
            cache: false,
            async: false,
            success: function (data, status) {
                if (status && data) {
                    var modalMarkup = data;
                    var modalTitle = userId && userId != null ? UserRoles.messages.Edit : UserRoles.messages.AddNew;
                    $modalAddEdit = BootstrapModal.createAndShow("modalAddEditUserRoles", modalTitle, modalMarkup);
                    //jQuery("#gridUR").jqGrid('editGridRow', "new", { height: 280, reloadAfterSubmit: false });
                }
            },
            error: function () {
                toastr.error(ServiceCenters.messages.ErrorOccurred);
            }
     });
}

Bootstrap Modal create and show button

var createAndShow = function (modalElementId, modalTitle, modalBodyMarkup) {
        debugger;

        var modalMarkup = "";
        modalMarkup = modalMarkup + "<div id=\"%ModalId%\" class=\"modal fade\">";
        modalMarkup = modalMarkup + "<div class=\"modal-dialog\">\"";
        modalMarkup = modalMarkup + "<div class=\"modal-content\">";
        modalMarkup = modalMarkup + "<div class=\"modal-header\">";
        modalMarkup = modalMarkup + "<button type=\"button\" class=\"close pull-left\" data-dismiss=\"modal\" aria-label=\"Close\">";
        modalMarkup = modalMarkup + "<span aria-hidden=\"true\">&times;</span></button>";
        modalMarkup = modalMarkup + "<h4 class=\"modal-title pull-right\">%ModalTitle%</h4>";
        modalMarkup = modalMarkup + "</div>";
        modalMarkup = modalMarkup + "<div class=\"modal-body\">%ModalBodyMarkup%</div>";
        //modalMarkup = modalMarkup + "<div class=\"modal-footer\">";
        //modalMarkup = modalMarkup + "<button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Close</button>";
        //modalMarkup = modalMarkup + "<button type=\"button\" class=\"btn btn-primary\">Save changes</button>";
        //modalMarkup = modalMarkup + "</div>";
        modalMarkup = modalMarkup + "</div></div></div>";

        var replacements = {
            "%ModalId%": modalElementId ? modalElementId : "modal" + Common.getRandomString(5),
            "%ModalTitle%": modalTitle ? modalTitle : "",
            "%ModalBodyMarkup%": modalBodyMarkup ? modalBodyMarkup : ""
        };
        modalMarkup = modalMarkup.replace(/%\w+%/g, function (all) {
            return replacements[all];
        });

        $("body").append(modalMarkup);

        var $modal = $("#" + modalElementId);

        $modal.find(".modal-content").css({ 'top': "", 'left': "" });

        //if (modalBodyMarkup.length > 0) {
        //    $modal.find(".modal-body").html(modalBodyMarkup);
        //}

        $modal.modal({
            show: true,
            keyboard: false,
            backdrop: "static"
        });


        //To make the modal draggable in future
        //$modal.find(".modal-content").draggable({
        //    cursor: "move"
        //});

        BootstrapModal.bindModalEvents($modal);

        return $modal;
    };

Answer 1

Try adding the type attribute to your button, otherwise the web form treats it as submit by default.

<button type="button" id="btnAddEditUserRoles" class="btn btnPrimaryStyle pull-left">

Alternatively, you could prevent the PostBack in your javascript, like so.

$btnAddEditUserRoles.on("click", function (e) {
    e.preventDefault();
    UserRoles.openAddEditModal(null);
});