CODEWITHSUNDEEP
javascripthtmlforms
Krish
Krish

Reputation: 308

How do I clear the previous text field value after submitting the form with out refreshing the entire page?

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>

Upvotes: 22

Views: 227047

Answers (11)

Zombo
Zombo

Reputation: 1

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

Upvotes: 0

Shah Hassan
Shah Hassan

Reputation: 146

It will clear all the fields.

let inputs = document.querySelectorAll("input");
inputs.forEach((input) => (input.value = ""));

Upvotes: 1

Mr.G
Mr.G

Reputation: 3559

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
}

Upvotes: 31

Antonio112009
Antonio112009

Reputation: 446

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>

Upvotes: 0

Thielicious
Thielicious

Reputation: 4452

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

Upvotes: 0

tdh3abood
tdh3abood

Reputation: 1

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');

Upvotes: 0

loyola
loyola

Reputation: 4062

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

Upvotes: 2

Bilal
Bilal

Reputation: 2673

HTML

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

and jquery

$("#some_form").reset();

Upvotes: 0

Satish Sharma
Satish Sharma

Reputation: 9635

you can just do as you get that elements value

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

Upvotes: 2

Vin.AI
Vin.AI

Reputation: 2437

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

Upvotes: 6

Sam
Sam

Reputation: 1331

You can set the value of the element to blank

document.getElementById('elementId').value='';

Upvotes: 28

Related Questions