JavaScript -- clear form after values are submitted

Question

I am using the following JavaScript code to clear a form on my page.

document.getElementById("bulletinForm").reset();

This code does indeed clear my form, but it does it before the information is sent to the server. I've tried calling as the onSubmit event on the form and as the onClick event on the Submit button. How do I send the information to the server before clearing the form? I am not currently using any Ajax with this. All I have is a Spring form that looks like this.

<form:form commandName="bulletin" method="post" action="processBulletin">
    <table>
        <tr>
            <td>Name: <font style="font-weight: bold; color: red;">
            <c:out value='${nameRequired}' /></font><br /></td>
        </tr>
        <tr>
            <td><form:input path="name" id="name" maxlength="100" value="" /></td>
        </tr>
        <tr>
            <td>Subject: <font style="font-weight: bold; color: red;">
            <c:out value='${subjectRequired}' /></font><br /></td>
        </tr>
        <tr>
            <td><form:input path="subject" id="subject" maxlength="1000" value="" /></td>
        </tr>
        <tr>
            <td valign="top">Message: <font style="font-weight: bold; color: red;">
            <c:out value='${messageRequired}' /></font><br /></td>
        </tr>
        <tr>                            
            <td><form:textarea path="note" id="note" cols="80" rows="100" value="" /></td>
        </tr>
        <tr>
            <td><input type="submit" value="Submit bulletin" onClick="clearForm()"/></td>
        </tr>
    </table>
</form:form>

Is your form being submitted asynchronously? Reset the form after the response from your AJAX request. — EvilZebra, Jan 03 '15 at 01:08
`.reset()` will clear the form in some Browsers and not others. You can run through the `formElement.elements` collection assigning `''` to the `.value` to clear each one off. Keep in mind this will clear your button values as well, so you'll need to think about that. Also, use AJAX. — StackSlave, Jan 03 '15 at 01:08
@PHPglue But that will still happen before the submission, so it doesn't solve the problem. — Barmar, Jan 03 '15 at 01:11
Why do you need to clear the form if you're not using AJAX to submit it? Normal form submission reloads the page. — Barmar, Jan 03 '15 at 01:12
show the rest of the code that is relevant to the submit/reset. — charlietfl, Jan 03 '15 at 01:27

Guillermo · Accepted Answer · 2015-07-26T11:09:07.247

3

If you clear the form before submitting you won't get any data. That's also what should be expected. However you can circumvent this by sending the form without refreshing the site with an asynchroneous request. After sending the form data you can reset the form. A fast way would be doing it with the Javascript Framework jQuery:

$.ajax({
  type: 'POST',
  url: "url.html",
  data: $('#myForm').serialize(),
  success: function() {
    // This function is called after
    // sending the request successfully
    $('#myForm').trigger("reset");
  }
});

Sending AJAX request with pure Javascript is a bit more complicated.

edited Jul 26 '15 at 11:09

answered Jan 03 '15 at 01:11

Guillermo

764
6
15

You cold also reset the form in `beforeSend:`, so that it will be cleared while waiting for the response. – Barmar Jan 03 '15 at 01:13
This form is a Spring form. I am sending this to a method in a Spring controller. How would the URL look in that case? Would it end with .html as above? How would I rewrite the Spring form tag? – Jan 03 '15 at 02:44
It should work like in [this question](http://stackoverflow.com/questions/14972823/spring-mvc-jquery-ajax-issue). Take notice of the `RequestMapping` annotation in the controller. – Guillermo Jan 03 '15 at 12:00

score 0 · Answer 2 · edited May 23 '17 at 12:00

0

You could try manually submitting your form in Javascript, change the input type from submit to button and then you could have something like:

function onSubmit() {
  document.getElementById("bulletinForm").submit();
  document.getElementById("bulletinForm").reset();
  return false; //stop page refresh
}

Source: Clearing my form inputs after submission

edited May 23 '17 at 12:00

Community

1
1

answered Jan 03 '15 at 01:14

RattyLaa

323
3
12

Code smell, don't repeat yourself. Use a local variable. KTHX – Sukima Jan 03 '15 at 01:53
You could use a local var yes and I would use one if I were referencing that form more than twice, however personally I would not initialise a new var just for the above case. – RattyLaa Jan 03 '15 at 02:05

JavaScript -- clear form after values are submitted

2 Answers2