Beginform jquery submit function not working

Question

so I have a partial view for adding a contact like this (contactaddpopup.cshtml):

  @using (Html.BeginForm("Validation", "Contacts", FormMethod.Post, new { id = "myForm"})) 
                                                                                  
 {   
    @(Html.DevExtreme().Popup()
    .ID("newContactPop")
    .Width("auto")
    .Height("auto")
    .Container(".dx-viewport")
    .ShowTitle(true)
    .Title("New contact")
    .Content(@<text>



@using (Html.DevExtreme().ValidationGroup())
{
     @Html.AntiForgeryToken()

         @(Html.DevExtreme().Form<InfoTourDTO.ContactDTO>()




.LabelMode(FormLabelMode.Floating)
.ShowColonAfterLabel(false)
.Items(items => {

    items.AddSimpleFor(m => m.ContactName).Editor(e=>e.TextBox().StylingMode(EditorStylingMode.Outlined));

    items.AddSimpleFor(m => m.Email).Editor(e=>e.TextBox().StylingMode(EditorStylingMode.Outlined));

    items.AddSimpleFor(m => m.Phone).Editor(e=>e.TextBox().StylingMode(EditorStylingMode.Outlined));

    items.AddSimpleFor(m => m.Notes).Editor(e=>e.TextBox().StylingMode(EditorStylingMode.Outlined));
})
)

}

    </text>)
    .DragEnabled(false)
    .CloseOnOutsideClick(true)
    .ShowCloseButton(false)
    .ToolbarItems(barItems => {
        barItems.Add()
            .Toolbar(Toolbar.Bottom)
            .Location(ToolbarItemLocation.Before)
            .Widget(widget => widget.Button()
                .Icon("check").UseSubmitBehavior(true)
                .Text("Yes")
                .OnClick("saveContact")
            );
        barItems.Add()
            .Toolbar(Toolbar.Bottom)
            .Location(ToolbarItemLocation.After)
            .Widget(widget => widget.Button()
                .Text("Cancel")
                .Icon("remove")
                .OnClick(@<text>
                    function hideInfo(data) {
                        const popup = $("#newContactPop").dxPopup("instance");
                        popup.hide();
                    }
                </text>)
            );
    })
)
}

and with this script:

<script>
function saveContact(data) {
var f =  $('#myForm');//just for testing
var a = f.attr('action');//just for testing
debugger;
$('#myForm').submit(function (e) {
    e.preventDefault();

    var form = $(this);
    var contactData = form.serialize();
   
    var actionUrl = form.attr('action');
  

    $.ajax({
        type: "POST",
        url: actionUrl,
        data: contactData, 
        success: function (data) {
            var text = "";
            var type = "";
            if (data == "Failed") {
                text = "Save failed";
                type = "error";
            } else {
                text = "Saved successfully";
                type = "success";
                 $("#newContactPop").dxPopup("instance").hide();
            }
            DevExpress.ui.notify(text, type, 600); 
        }
    });

});
}

and it is rendered in my page like this

  @Html.Partial("contactaddpopup");

my issue is that the submit function is never doing anything with no errors . I've looked at many other similar problems but non helped solve this so I set the debbuger call in the saveContact function to make sure it is hit and the form is captured correctly and everything is fine it just never enter the function attached to the submit any help would be appreciated

Answer 1

I don't understand why is the $.submit inside the saveContact function. If you want to prevent the standard submit behaviout then do it outside the function, when the page loads for example:

<script>
   
     $(function() {   
          $('#myForm).submit(...);   
     });

</script>

If you are using UseSubmitBehavior(true) then there is no need to call saveContact()