javascript - How to serialize forms and post using jQuery Ajax - Stack Overflow

admin管理员组

文章数量:1023885

I'm trying to remove records from my DB...... this is how my form looks like.........

@using (Html.BeginForm("RemoveDoctor", "Doctor", FormMethod.Post, new { @id = "form" }))
{
    @Html.AntiForgeryToken()
    @Html.HiddenFor(model => model.Id)
    @Html.HiddenFor(model => model.Name)
    <div class="form-actions no-color">
        <input type="submit" value="Delete" class="btn btn-default" id="submit" /> |

    </div>
}

I'm trying to get these records from the view and pass to my controller Action method............................. i'm trying to serialize this form and send it to that action method as following...................

var jsonObj = $('#form').serialize();

it serialize the form put my Ajax POST function wont run with that result...... it just gives me an error!!!!................. I just need to pass that serialize value to my Action method............... This is how my Script looks like.....................

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

     var jsonObj = $('#form').serialize();
     alert(jsonObj);

     $.ajax({
           type: "POST",
           url: '../Doctor/RemoveDoctor',
           data: JSON.stringify({ "doctor": jsonObj }),
           success: function (data) {
                 alert(data.Message);
           },
           error: function () {
                  alert("Error!!!");
           }
      });
      return false;

});

This is how my action method looks like....................

  public ActionResult RemoveDoctor(DoctorModel doctor)
  {
      bool confirmationResult = doctorManager.RemoveDoctor(doctor.Id);
      string displayMessage = string.Empty;
      if (confirmationResult == true)
           displayMessage = "You have successfully removed your record!!";
      else
           displayMessage = "Error!! Some Thing Went Wrong, Please Try Again!!";

      return Json(new { Message = displayMessage });

  }

I'm trying to send this 'displayMessage' to my jQuery code........ please some give me an idea how to solve this....... thanks!!!!!

I'm trying to remove records from my DB...... this is how my form looks like.........

@using (Html.BeginForm("RemoveDoctor", "Doctor", FormMethod.Post, new { @id = "form" }))
{
    @Html.AntiForgeryToken()
    @Html.HiddenFor(model => model.Id)
    @Html.HiddenFor(model => model.Name)
    <div class="form-actions no-color">
        <input type="submit" value="Delete" class="btn btn-default" id="submit" /> |

    </div>
}

I'm trying to get these records from the view and pass to my controller Action method............................. i'm trying to serialize this form and send it to that action method as following...................

var jsonObj = $('#form').serialize();

it serialize the form put my Ajax POST function wont run with that result...... it just gives me an error!!!!................. I just need to pass that serialize value to my Action method............... This is how my Script looks like.....................

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

     var jsonObj = $('#form').serialize();
     alert(jsonObj);

     $.ajax({
           type: "POST",
           url: '../Doctor/RemoveDoctor',
           data: JSON.stringify({ "doctor": jsonObj }),
           success: function (data) {
                 alert(data.Message);
           },
           error: function () {
                  alert("Error!!!");
           }
      });
      return false;

});

This is how my action method looks like....................

  public ActionResult RemoveDoctor(DoctorModel doctor)
  {
      bool confirmationResult = doctorManager.RemoveDoctor(doctor.Id);
      string displayMessage = string.Empty;
      if (confirmationResult == true)
           displayMessage = "You have successfully removed your record!!";
      else
           displayMessage = "Error!! Some Thing Went Wrong, Please Try Again!!";

      return Json(new { Message = displayMessage });

  }

I'm trying to send this 'displayMessage' to my jQuery code........ please some give me an idea how to solve this....... thanks!!!!!

• javascript
• jquery
• ajax
• jquery-mobile
• serialization

Share Improve this question Follow asked Feb 25, 2015 at 7:19 DayanDayan 75155 gold badges1616 silver badges2727 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

Try this

 $.ajax({
           type: "POST",
           url: '../Doctor/RemoveDoctor',
           data: $('#form').serialize(),
           success: function (data) {
                 alert(data.Message);
           },
           error: function () {
                  alert("Error!!!");
           }
      });

It will serialize your form.

Use only $('#form').serialize() for serialization.

Edit

If you don't want to refresh page then you should use type="button" instead type="submit"

And

You should do this also

[HttpPost]
public ActionResult RemoveDoctor(DoctorModel doctor)
  {
      //...................
      return Json(new { Message = displayMessage } , JsonRequestBehavior.AllowGet);

  }

And change ajax error function to this (For getting error )

error: function(jqXHR, textStatus, errorThrown)
{
  alert("Error: "+errorThrown+" , Please try again");   
}

I'm trying to remove records from my DB...... this is how my form looks like.........

@using (Html.BeginForm("RemoveDoctor", "Doctor", FormMethod.Post, new { @id = "form" }))
{
    @Html.AntiForgeryToken()
    @Html.HiddenFor(model => model.Id)
    @Html.HiddenFor(model => model.Name)
    <div class="form-actions no-color">
        <input type="submit" value="Delete" class="btn btn-default" id="submit" /> |

    </div>
}

I'm trying to get these records from the view and pass to my controller Action method............................. i'm trying to serialize this form and send it to that action method as following...................

var jsonObj = $('#form').serialize();

it serialize the form put my Ajax POST function wont run with that result...... it just gives me an error!!!!................. I just need to pass that serialize value to my Action method............... This is how my Script looks like.....................

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

     var jsonObj = $('#form').serialize();
     alert(jsonObj);

     $.ajax({
           type: "POST",
           url: '../Doctor/RemoveDoctor',
           data: JSON.stringify({ "doctor": jsonObj }),
           success: function (data) {
                 alert(data.Message);
           },
           error: function () {
                  alert("Error!!!");
           }
      });
      return false;

});

This is how my action method looks like....................

  public ActionResult RemoveDoctor(DoctorModel doctor)
  {
      bool confirmationResult = doctorManager.RemoveDoctor(doctor.Id);
      string displayMessage = string.Empty;
      if (confirmationResult == true)
           displayMessage = "You have successfully removed your record!!";
      else
           displayMessage = "Error!! Some Thing Went Wrong, Please Try Again!!";

      return Json(new { Message = displayMessage });

  }

I'm trying to send this 'displayMessage' to my jQuery code........ please some give me an idea how to solve this....... thanks!!!!!

I'm trying to remove records from my DB...... this is how my form looks like.........

@using (Html.BeginForm("RemoveDoctor", "Doctor", FormMethod.Post, new { @id = "form" }))
{
    @Html.AntiForgeryToken()
    @Html.HiddenFor(model => model.Id)
    @Html.HiddenFor(model => model.Name)
    <div class="form-actions no-color">
        <input type="submit" value="Delete" class="btn btn-default" id="submit" /> |

    </div>
}

I'm trying to get these records from the view and pass to my controller Action method............................. i'm trying to serialize this form and send it to that action method as following...................

var jsonObj = $('#form').serialize();

it serialize the form put my Ajax POST function wont run with that result...... it just gives me an error!!!!................. I just need to pass that serialize value to my Action method............... This is how my Script looks like.....................

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

     var jsonObj = $('#form').serialize();
     alert(jsonObj);

     $.ajax({
           type: "POST",
           url: '../Doctor/RemoveDoctor',
           data: JSON.stringify({ "doctor": jsonObj }),
           success: function (data) {
                 alert(data.Message);
           },
           error: function () {
                  alert("Error!!!");
           }
      });
      return false;

});

This is how my action method looks like....................

  public ActionResult RemoveDoctor(DoctorModel doctor)
  {
      bool confirmationResult = doctorManager.RemoveDoctor(doctor.Id);
      string displayMessage = string.Empty;
      if (confirmationResult == true)
           displayMessage = "You have successfully removed your record!!";
      else
           displayMessage = "Error!! Some Thing Went Wrong, Please Try Again!!";

      return Json(new { Message = displayMessage });

  }

I'm trying to send this 'displayMessage' to my jQuery code........ please some give me an idea how to solve this....... thanks!!!!!

• javascript
• jquery
• ajax
• jquery-mobile
• serialization

Share Improve this question Follow asked Feb 25, 2015 at 7:19 DayanDayan 75155 gold badges1616 silver badges2727 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

Try this

 $.ajax({
           type: "POST",
           url: '../Doctor/RemoveDoctor',
           data: $('#form').serialize(),
           success: function (data) {
                 alert(data.Message);
           },
           error: function () {
                  alert("Error!!!");
           }
      });

It will serialize your form.

Use only $('#form').serialize() for serialization.

Edit

If you don't want to refresh page then you should use type="button" instead type="submit"

And

You should do this also

[HttpPost]
public ActionResult RemoveDoctor(DoctorModel doctor)
  {
      //...................
      return Json(new { Message = displayMessage } , JsonRequestBehavior.AllowGet);

  }

And change ajax error function to this (For getting error )

error: function(jqXHR, textStatus, errorThrown)
{
  alert("Error: "+errorThrown+" , Please try again");   
}

本文标签： javascriptHow to serialize forms and post using jQuery AjaxStack Overflow