JavaScript - ясная форма после отправки значений

Question

Я воспользовался следующим кодом JavaScript, чтобы удалить форму на моей странице.

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

Этот код действительно очищает мою форму, но делает это до того, как информация будет отправлена ​​на сервер. Я пробовал вызывать событие onSubmit в форме и как событие onClick на кнопке «Отправить». Как отправить информацию на сервер, прежде чем очищать форму? В настоящее время я не использую Ajax. Все, что у меня есть, это форма Spring, которая выглядит так.

<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> 

Answer 1

Если вы очистите форму перед отправкой, вы не получите никаких данных. Это то, чего следует ожидать. Однако вы можете обойти это, отправив форму без обновления сайта с помощью асинхронного запроса. После отправки данных формы вы можете сбросить форму. быстрый способ будет делать это с 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"); 
    } 
}); 

Отправка запроса AJAX с чистым JavaScript, является немного более сложным.

Answer 2

Вы можете попробовать вручную отправить форму в Javascript, изменить тип входа от представить кнопку, и тогда вы могли бы иметь что-то вроде:

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

Источник: Clearing my form inputs after submission