How to clear input field after submitting to database

Question

I have a form with different input fields: textarea, checkbox, radio button, text input and select input. I am using jquery to submit this to database without refreshing the page which works perfectly. But the problem is that jquery does not clear the contents from the fields after submitting. Checkbox and radio button are still checked. Research I made on this site says that this issue will be fixed by using jQuery's each function. I did it, but it did not work. Please what did I do wrong in my code. My jquery code is shown below.

Jquery

$("#sub").click( function() {
    var content =   tinyMCE.activeEditor.getContent();
    $('textarea[name=texteditor]').val(content);
    $.post( $("#myform").attr("action"), $("#myform").serialize(), function(info){ $("#result").html(info); } );
    clearInput();
    });

    $("#myform").submit( function() {
    return false;
});

function clearInput() {
    $("#input").each( function() {
     $(this).val('');
 });
 }

Possible duplicate of [How to reset (clear) form through JavaScript?](https://stackoverflow.com/questions/3786694/how-to-reset-clear-form-through-javascript) — Lawrence Cherone, Aug 26 '17 at 17:51
Possible duplicate of [jquery how to empty input field](https://stackoverflow.com/questions/9236332/jquery-how-to-empty-input-field) — Shiladitya, Aug 26 '17 at 18:11

score 0 · Accepted Answer · 2017-08-26T18:32:50.610

0

You can reset your form with:

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

OR

$('#myform').each(function(){
    this.reset();
});

$('button').click(function(){
$('#myform').each(function(){
    this.reset();
})});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform">
  <input type="text" />
  <input type="text" />
</form>
<button type="button">Clear</button>

edited Aug 26 '17 at 18:32

answered Aug 26 '17 at 17:51

@Oponjous , Will You explain me how? – Aug 26 '17 at 18:33
I use this: function clearInput() { $("#myform")[0].reset(); } and it doesn't work – Oponjous Aug 26 '17 at 20:55
Sorry @programmer21, One of your solutions actually worked. This second ond, $('#myform').each(function(){ this.reset(); }); I appreciate. – Oponjous Aug 26 '17 at 22:25
but which one is not worked and why? can you please explain? – Aug 27 '17 at 05:59
Again sorry @programmer21, all your codes are working. The mistake was actually from me, i copied and pasted without changing the form tag id from #myform to #myform2 which is the correct id.- Thanks – Oponjous Aug 27 '17 at 18:19

score 0 · Answer 2 · answered Aug 26 '17 at 17:54

0

There's probably a better way, but I have in the past just used $('.foo').val('')

It'll clear just that individual input, so you could use forEach with it iterating over all your form inputs.

answered Aug 26 '17 at 17:54

stevenlacerda

1,187
2
9
21

$('.form-name input').each((input) => { $(input).val('') }) sorry doing this from the car, so you may need to wiggle with it a bit. – stevenlacerda Aug 26 '17 at 22:53

score 0 · Answer 3 · answered Aug 26 '17 at 18:01

0

in your code you are trying to clear the text field, its not form reset. your code $(this).val(''); can only work for text box.

For Radio or checkbox, you need to set this.checked = false; or in JQuery $(this).prop('checked', false);

complete form reset can eb achieved by

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

answered Aug 26 '17 at 18:01

jeetendra Mandal

150
8

Mandal could you please use my code above to show example because the way I apply your solution does not work – Oponjous Aug 26 '17 at 20:46

Shiladitya · Answer 4 · 2017-08-27T10:18:48.140

0

Your code is wrong, you can iterate through id

function clearInput() {
   $("#input").each( function() {
      $(this).val('');
   });
}

Here you go with a soluiton

function clearInput() {
  $("#myform input").each(function() {
    $(this).val('');
  });
}

Here is an example solution https://jsfiddle.net/tpLexsz1/1/

$('button').click(function(){
    $("#myform input").each(function() {
    $(this).val('');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform">
  <input type="text" />
  <input type="text" />
</form>

<button>
Clear
</button>

Hope this will help you.

edited Aug 27 '17 at 10:18

answered Aug 26 '17 at 18:13

Shiladitya

12,003
15
25
38

This does not clear any content, not even the text input. This is actually the problem, it should at least clear the text input. – Oponjous Aug 26 '17 at 20:35
@Oponjous . Is your form is dynamically generated by `JavaScript`? If yes then we need to delegate event. – Shiladitya Aug 27 '17 at 04:44
@Oponjous. Check my solution once again & see what's difference from your code. – Shiladitya Aug 27 '17 at 10:20
My form is dynamically generated by JavaScript. I have checked my code again, this code: function clearInput() { $("#myform input").each(function() { $(this).val(''); }); } does not work. It doesn't clear the inputs – Oponjous Aug 27 '17 at 18:34
@Oponjous . Check this fiddle https://jsfiddle.net/tpLexsz1/2/ . It's working fine. Can you please add `console.log("Inside clearInput method");` to your **clearInput** method? I need to see whether **clearInput** method is being called or not. – Shiladitya Aug 28 '17 at 03:06
Also share your `HTML` structure after being dynamically generated. – Shiladitya Aug 28 '17 at 03:07

How to clear input field after submitting to database

4 Answers4