Clear the form once form submitted

Question

Possible Duplicate:
Resetting a multi-stage form with jQuery

Once the form submitted, response from another page is printed to #GameStorySys. But values entered to the form still stays there. Is it possible for the form values to disappear (but the form should still stay) once the form submitted?

$("[name='GameStoryForm']").click(function() { 
        $.ajax({
            type: "POST",
                data: $("#GameStoryForm").serialize(),
                url: "content/commentary/index.cs.asp?Process=EditLiveCommentaryStory&CommentaryID=<%=Request.QueryString("CommentaryID")%>", 
                success: function(output) { 
                $('#GameStorySys').html(output);
            },
                error: function(output) {
                $('#GameStorySys').html(output);
                }
        }); 
});

Nick Craver · Accepted Answer · 2010-04-17T17:23:18.957

3

You can clear it manually, for example:

$("[name='GameStoryForm']").click(function() { 
  $.ajax({
    type: "POST",
    data: $("#GameStoryForm").serialize(),
    url: "content/commentary/index.cs.asp?Process=EditLiveCommentaryStory&CommentaryID=<%=Request.QueryString("CommentaryID")%>", 
    success: function(output) { 
      $('#GameStorySys').html(output);
      $("#GameStoryForm").get(0).reset();
      //or manually:
      // $("#GameStoryForm :input").not(':button, :submit, :reset, :hidden')
      //                           .val('').removeAttr('checked selected');
    },
    error: function(output) {
      $('#GameStorySys').html(output);
    }
  }); 
});

edited Apr 17 '10 at 17:23

answered Apr 17 '10 at 17:14

Nick Craver

623,446
136
1,297
1,155

Very nice with the additional removeAttr call after val. – David Apr 17 '10 at 17:18
$("#GameStoryForm").get(0).reset(); should do it. I did not understand how exactly manual version would work. Once the form is submitted would user need to click reset button? – zurna Apr 17 '10 at 17:55
@zurna - by "manual" I just mean just programmatically clearing the inputs instead of using the form's `.reset()` functionality. It's just a bit more explicit so you can see exactly what's going on...or leave out and not clear any elements you don't want to reset. – Nick Craver Apr 17 '10 at 18:03

score 0 · Answer 2 · answered Apr 17 '10 at 19:00

0

I would do it with javascript:

<script>
document.getElementById(yourFormId).onsubmit = new Function(){this.reset();}
</script>

answered Apr 17 '10 at 19:00

arik

28,170
36
100
156

score 0 · Answer 3 · answered Sep 29 '10 at 08:27

If you perform the reset in response function for AJAX query, it won't be made before the request returns. If you reset the form in the onsubmit() event handler (as suggested here) then it either won't be resetted at all (since you send the AJAX request in click() handler, not submit() handler).

What you need to do is perform the reset after issuing the AJAX request - that is, after calling $.ajax() - but not in its callback function called when request returns:

$("[name='GameStoryForm']").click(function() { 
  $.ajax({
    type: "POST",
    data: $("#GameStoryForm").serialize(),
    url: "content/commentary/index.cs.asp?Process=EditLiveCommentaryStory&CommentaryID=<%=Request.QueryString("CommentaryID")%>", 
    success: function(output) { 
      $('#GameStorySys').html(output);
    },
    error: function(output) {
      $('#GameStorySys').html(output);
    }
  });

  $("#GameStoryForm").get(0).reset();
});

Clear the form once form submitted

3 Answers3

Linked