Question

I need to check whether the data is already exists in the database before submitting the form using ajax. The most common scenario is the checking the availability of the username and email.

It’s not working but I tested the ajax function without using the from control and it works fine. The project is created in MVC 3 VB.

Javascript:

$('#addSalesPeople').click(function () {
   $.post("ajax_functions/checkDuplicate.cshtml",
   {
      extension: document.getElementById('Extension').value,
      initials: document.getElementById('Initials').value
   },
      function (data, status) {
      alert("Data: " + data + "\nStatus: " + status);
   });
});

HTML:

@Using Html.BeginForm("Create", "SalesPeople", FormMethod.Post)
@Html.ValidationSummary(True)
@<fieldset>  
    ............................
    ..............................  

    @Html.TextBoxFor(Function(model) model.Extension, New With {.onkeyup = "javascript: charCounter(this,4);", .onblur = "javascript: zeroPad(this, 4)"})

    @Html.TextBoxFor(Function(model) model.Initials)

    <input id="addSalesPeople" class="btn span2" type="submit" value="Add" />

</fieldset>

-Thanks

Answer 1

You need to observe the submit event of the form.

Instead of

$('#addSalesPeople').click(function () {

use

$('#theFormId').submit(function () {

see: http://api.jquery.com/submit/

You can also disable the form submit and send it later manually:

$( '#theFormId' ).submit( function ( event ) {

    event.preventDefault();

    /* your AJAX code */

    $( '#theFormId' ).submit();
} );