How to change this code in to $.ajax so that I can display message after saving to the database?

Question

Hello Friends,

I am using this ccode right now..

 <%using (Html.BeginForm("SaveNewServiceTypeCategory","ServiceTypeCategory")){ %>
      <table>
        <tr>
          <td>Service type category:</td>
          <td style="padding-left:5px;">
            <input type="text" id="txtNewServiceTypeCategory" name="txtNewServiceTypeCategory" style="width:400px;" maxlength="30" />
          </td>
        </tr>
        <tr>
          <td valign="top">Service type description:</td>
          <td style="padding-left:5px;">
            <textarea id="txtNewServiceTypeCategoryDesc" name="txtNewServiceTypeCategoryDesc" style="width:400px;" rows="3"></textarea>
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <input type="submit" value="Save"/>
          </td>
        </tr>
      </table>
      <%} %>

But I need to display the Popup message when data added to the Database..

I wrote somethign like this

 $(function () {
          $('#form1').submit(function () {
              $.ajax({
                  url: ,  how to give the URl here?
                  type: this.method,
                  data: $(this).serialize(),
                  success: function () {
                      alert("Saved Successfully!");
                  }
              });
              return false;
          });

After saving need to display saved Successfully message to the User?

thanks });

Answer 1

You could start by giving your form an unique id:

<% using (Html.BeginForm(
    "SaveNewServiceTypeCategory", 
    "ServiceTypeCategory", 
    FormMethod.Post, 
    new { id = "form1" })) { %>

And then use this id to register for the submit event:

$(function () {
    $('#form1').submit(function () {
        $.ajax({
            url: this.action,
            type: this.method,
            data: $(this).serialize(),
            success: function (result) {
                alert('Saved Successfully!');
            }
        });
        return false;
    });
});

There's also the jquery form plugin which allows you to AJAXify an existing form very easily:

$(function () {
    $('#form1').ajaxForm(function() {
        alert('Saved Successfully!');
    });
});