22

I am doing a web application using javascript and html that has a form containing a text field, button. When I enter a number in that text field and submit by clicking on that button, text areas are generated dynamically. Once my form is submitted some text areas are created but if I am not satisfied with existing text areas then again I enter some value with out refreshing page. But the text field value entered previously prevails showing the new text areas below the existing text areas on the page.

So, how do I clear the value with out refreshing the page.

<div>
    <html>
     <input type="text" name = "numquest" id ="numquest" value="" size="5" style="" disabled>
     <input type="button" value="submit" onclick="getFields();">
</div>
    </html>
    
    <javascript>
      var num_q=document.getElementById('numquest').value;
     //code for dynamic creation
    </javascript>
Improve this question
3
  • I'm having trouble understanding your question. You create a textarea on the fly, and if the button is clicked again, it's wiped out (removed), and a new one comes up?
    – Sterling Archer
    Commented Dec 6, 2013 at 5:43
  • How about something like $('#numquest').val('');
    – TimSPQR
    Commented Dec 6, 2013 at 5:45
  • 1
    Thank all for your responses. I will try that out.
    – Krish
    Commented Dec 6, 2013 at 5:56

11 Answers 11

Reset to default
31

try this:

Using jQuery:

You can reset the entire form with:

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

Or just the specific field with:

$('#form-id').children('input').val('')

Using JavaScript Without jQuery

<input type="button" value="Submit" id="btnsubmit" onclick="submitForm()">

function submitForm() {
   // Get the first form with the name
   // Hopefully there is only one, but there are more, select the correct index
   var frm = document.getElementsByName('contact-form')[0];
   frm.submit(); // Submit
   frm.reset();  // Reset
   return false; // Prevent page refresh
}
Improve this answer
1
  • The top solution works in my case, but afterwords, a tooltip appears, which says "please fill out this field" for the first field in my form. All fields are required in my form. Any way to prevent that from happening? The page is not refreshing.
    – HappyHands31
    Commented Dec 13, 2020 at 1:12
28

You can set the value of the element to blank

document.getElementById('elementId').value='';
Improve this answer
6

Assign empty value:

document.getElementById('numquest').value=null;

or, if want to clear all form fields. Just call form reset method as:

document.forms['form_name'].reset()
Improve this answer
2

you can just do as you get that elements value

document.getElementById('numquest').value='';
Improve this answer
2 
<form>
<input type="text" placeholder="user-name" /><br>
<input type=submit value="submit" id="submit" /> <br>
</form>

<script>
$(window).load(function() {
$('form').children('input:not(#submit)').val('')
}

</script>

You can use this script where every you want.

Improve this answer
1

It will clear all the fields.

let inputs = document.querySelectorAll("input");
inputs.forEach((input) => (input.value = ""));
Improve this answer
1
  • This will also set all radio/checkbox/button values to blanks, something worth keeping in mind.
    – Rod911
    Commented Aug 17, 2021 at 10:56
0

HTML

<form id="some_form">
<!-- some form elements -->
</form>

and jquery

$("#some_form").reset();
Improve this answer
0

I believe it's better to use 

$('#form-id').find('input').val('');

instead of

$('#form-id').children('input').val('');

incase you have checkboxes in your form use this to rest it:

$('#form-id').find('input:checkbox').removeAttr('checked');
Improve this answer
0

.val() or .value is IMHO the best solution because it's useful with Ajax. And .reset() only works after page reload and APIs using Ajax never refresh pages unless it's triggered by a different script.

Improve this answer
0

I had that issue and I solved by doing this:

.done(function() {
                    $(this).find("input").val("");
                    $("#feedback").trigger("reset");
                });

I added this code after my script as I used jQuery. Try same)

<script type="text/JavaScript">

        $(document).ready(function() {
            $("#feedback").submit(function(event) {
                event.preventDefault();
                $.ajax({
                    url: "feedback_lib.php",
                    type: "post",
                    data: $("#feedback").serialize()
                }).done(function() {
                    $(this).find("input").val("");
                    $("#feedback").trigger("reset");
                });
            });
        });
    </script>
    <form id="feedback" action="" name="feedback" method="post">
        <input id="name" name="name" placeholder="name" />
        <br />
        <input id="surname" name="surname" placeholder="surname" />
        <br />
        <input id="enquiry" name="enquiry" placeholder="enquiry" />
        <br />
        <input id="organisation" name="organisation" placeholder="organisation" />
        <br />
        <input id="email" name="email" placeholder="email" />
        <br />
        <textarea id="message" name="message" rows="7" cols="40" placeholder="сообщение"></textarea>
        <br />
        <button id="send" name="send">send</button>
    </form>
Improve this answer
0

You can assign to the onsubmit property:

document.querySelector('form').onsubmit = e => {
   e.target.submit();
   e.target.reset();
   return false;
};

https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onsubmit

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.