Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 899
Krish Avatar asked Dec 06 '13 05:12

Krish


People also ask

How do you clear text field after submit in react?

To clear input values after form submit in React: Store the values of the input fields in state variables. Set the onSubmit prop on the form element. When the submit button is clicked, set the state variables to empty strings.

How do you clear text field after submit in angular?

If you are using [(ngModel)] directive to control your form input fields, then you can clear it by setting an empty string ( ' ' ) to the ngModel control property.

How do you clear a text field in JavaScript?

Clearing the input field value with button To clear the above input field by clicking a Clear input field button, first we need to access these elements inside the JavaScript by using document. getElementId() method. const inputField = document. getElementById("name"); const btn = document.


3 Answers

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
}
like image 84
Mr.G Avatar answered Oct 19 '22 17:10

Mr.G


You can set the value of the element to blank

document.getElementById('elementId').value='';
like image 33
Sam Avatar answered Oct 19 '22 17:10

Sam


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()
like image 6
Vin.AI Avatar answered Oct 19 '22 18:10

Vin.AI