Want to auto refresh my form without page reload

Question

I have a Ask Question form by which client can ask any question to us. While client submit the form we will give him a thanks message for 5 seconds then hide the message and show again the Ask Question form in that div.

But while the from comes after successful message, form input values is still there. I want a fresh from without any input value like the form before submitting.

Here is my ajax code

$.ajax({

            url:"{{ url('/ask_question_form') }}",
            type: 'GET',
            data: {_token :token, name : name, email : email, contact : contact, question : question},
            success:function(msg){

                // console.log(msg);

                $('.question-modal .textwidget').hide();

                trHTML = "";
                trHTML += "<div id='user-question' style='margin-top:50%; color:#0071BC'>";

                trHTML += "Thanks for your question. We will save your question for further query and give a feedback as soon as possible.";

                trHTML += "</div>";

                $('.question-modal').append(trHTML);

                setTimeout(function() {
                    $('.question-modal #user-question').remove();
                    $('.question-modal .textwidget').show();
                }, 5000);


            }
        });

Where textwidget is the class name of that form

Possible duplicate of [Clear form fields with jQuery](https://stackoverflow.com/questions/6364289/clear-form-fields-with-jquery) — Manoz, Jun 13 '18 at 05:44
@ArafatRahman , `I want a fresh from without any input value like the form before submitting.` what does it mean then? — Manoz, Jun 13 '18 at 05:47

score 1 · Accepted Answer · answered Jun 13 '18 at 05:35

1

The best solution is-

$("#form")[0].reset();

use this code when your success message comes.

answered Jun 13 '18 at 05:35

Priyal Pithadiya

889
1
5
12

Ya...now it's done..... Give an `id` into your `form`.. `$("#form_id")[0].reset();` – Arafat Rahman Jun 13 '18 at 06:18
Ohh that's great :) – Priyal Pithadiya Jun 13 '18 at 06:18

score 1 · Answer 2 · answered Jun 13 '18 at 05:40

1

After completing 5 seconds and when you hide the "success message" at that time you can reset your form

$("#formId").get(0).reset();

Here "formId " id of your form.

answered Jun 13 '18 at 05:40

Chintan Kukadiya

784
5
16

Are you using jquery in your project ? – Chintan Kukadiya Jun 13 '18 at 06:00
and you are using $(".formclass").get(0).reset(); or $(".formclass").[0].reset(); ? – Chintan Kukadiya Jun 13 '18 at 06:01
or you can do document.getElementsByClassName("formclass").[0].reset() – Chintan Kukadiya Jun 13 '18 at 06:06
Yes I use jquery in my project..But I tried with `jQuery(".formclass").get(0).reset();` too...still same error – Arafat Rahman Jun 13 '18 at 06:08
brother if I use `document.getElementsByClassName("formclass").[0].reset()`.. the form is not submitted then – Arafat Rahman Jun 13 '18 at 06:13
....Thanks brother it's done..great effort from you. But another person give that answer before you. So I accept her answer. And give an up vote to your comment. Yours one is correct too. – Arafat Rahman Jun 13 '18 at 06:21

Matus Dubrava · Answer 3 · 2018-06-13T05:42:25.380

0

Erase values of all fields once you successfully submit the form.

document.querySelector('get-your-field1').value = '';
document.querySelector('get-your-field2').value = '';
document.querySelector('get-your-field3').value = '';
document.querySelector('get-your-textarea').value = '';

Or you can use form reset.

const form = document.querySelector('form');
const btn = document.querySelector('button');

btn.addEventListener('click', event => {
  event.preventDefault();
  form.reset();
});

<form>
  <input />
  <input />
  <button type="submit">submit</button>
</form>

edited Jun 13 '18 at 05:42

answered Jun 13 '18 at 05:35

Matus Dubrava

13,637
2
38
54

...Is there any function in javascript that refresh the whole form fields? – Arafat Rahman Jun 13 '18 at 05:38
@ArafatRahman, `$(form)[0].reset()` is the function you want. – Manoz Jun 13 '18 at 05:42

score 0 · Answer 4 · answered Jun 13 '18 at 05:46

Here is an example to do a form reset function:

function reset(){
    setTimeout(function(){    
      var form = document.getElementById('myForm');
      form.reset();
    }, 1000);
}
var btn = document.getElementById('btn');
btn.onclick = function(){
  reset();
}

<form id="myForm">

  <input value="" />
  <br />
  <input value="" />
  <br />
  <input value="" />
  <br />
  <input value="" />
  <br />

  <button id="btn" type="button">reset</button>
</form>

score -1 · Answer 5 · answered Jun 13 '18 at 05:45

Please note, that it seems that you are using some token along with the form.

This means, that if you reset the values, this token will still be there, and maybe the server will not accept the next form submission, due the duplicate use of that token.

You will need to set a new token, when the server respond.

Want to auto refresh my form without page reload

5 Answers5