Using Ajax, textbox does not clear on submit in MVC

Question

I need your help. I am using AjaxBeginform to submit a question in a small text field. I can submit the question, and it posts fine to the db, however the question never clears. I am using Ajax because I don't want the entire page to post. I have tried using this.rest(); but that works in IE but it won't work in Firefox and Chrome. I have tried $('#question').reset(); But that still isn't working. I am sure it's something I am doing incorrectly.

Here is my code below. Thank you for your help.

This is my Scripts at the top of the page:

    <script type="text/javascript" src="~/Scripts/jquery-migrate-    1.2.1.min.js"></script>

Here is the AjaxBeginForm along with the textbox

     @using (Ajax.BeginForm("SendQuestion", new { PresId = Model.PresentationID, catalogId = ViewBag.CatalogId }, new AjaxOptions
        {
            HttpMethod = "Post",
            UpdateTargetId = "questionTxt",
            OnBegin = "OnBegin",
            OnSuccess = "OnSuccess",
            OnFailure = "OnFailure"

        }))
            {

                <fieldset id="question">
                    <p>
                        <textarea id="questionTxt" style="font-size:12px" cols="20" rows="6" name="questionTxt" onclick="javascript:removeTextAreaWhiteSpace(this);"></textarea>
                    </p>


                    <button id="question-btn" type="submit">Submit</button>
                </fieldset>

            }

Here is my function for OnSuccess

  function OnSuccess() {
    alert("Your question has been submitted.");
    $('#question').val('');
}

Here is my controller

    public bool SendQuestion(string questionTxt, long PresId, long catalogId)
    {
        try
        {
            var db = new ODTEntities();
            var pres = db.Presentations.FirstOrDefault(i => i.PresentationID == PresId);
            var subject = db.Catalogs.FirstOrDefault(i => i.CatalogID == catalogId).CatalogCode + " - " + pres.Title + " - " + pres.Presenter.PresenterName;
            Utils.AddQuestionToDB(db, PresId, catalogId, Utils.GetAttendeeId(), questionTxt);
            string body = "This question : " + Environment.NewLine + questionTxt + Environment.NewLine + " was sent by " +
                          User.Identity.Name;
            var catalog = db.Catalogs.FirstOrDefault(i => i.CatalogID == catalogId);
            if (!string.IsNullOrEmpty(catalog.QuestionsEmail))
                Helper.SendMail(body, subject, catalog.QuestionsEmail, "");
            else
                Helper.SendMail(body, subject);
        }
        catch (Exception)
        {
            return false;
        }
        return true;
    }

Now like I stated earlier, I have tried this one, and it will clear in IE but not int Firefox or Chrome. So when I submit the form the pop up comes back with Your question has been submitted, while the popup is visible, the question changes to true and then one you click ok on the popup window, the textbox is cleared in IE:

      function OnSuccess() {
    alert("Your question has been submitted.");
    $('#question').val('');
    this.reset();
}

If someone can tell me what I am doing incorrectly, that would be greatly appreciated. Thank you.

Answer 1

Give your form an id and then try resetting it:

@using (Ajax.BeginForm("SendQuestion", new { PresId = Model.PresentationID, catalogId = ViewBag.CatalogId }, new AjaxOptions
    {
        HttpMethod = "Post",
        UpdateTargetId = "questionTxt",
        OnBegin = "OnBegin",
        OnSuccess = "OnSuccess",
        OnFailure = "OnFailure"

    },new {id="formid"}))
    }

$('#formid').reset();  // BY JQUERY
document.getElementById("formid").reset(); // BY PURE JAVASCRIPT

Or if you have only one form on page, Then this will also work as this works for first form only:

$('form:first').reset();