Clearing my form inputs after submission

Question

I ve tried it a few different ways based on searches I ve done on the subject and for some reason I can t get it to work  I just want my text inputs and textarea to clear after I hit the submit button   Here s the code    lt div id  sidebar-info  gt       lt form name  contact-form  action  formprocess php  method  post  target  ninja-frame  gt           lt h1 gt By Phone lt  h1 gt           lt p id  by-phone  gt XXX-XXX-XXXX lt  p gt           lt h1 gt By Email lt  h1 gt           lt p id  form-row  gt Name lt  p gt           lt input name  name  id  name  type  text  class  user-input  value    gt           lt p id  form-row  gt Email lt  p gt           lt input name  email  id  email  type  text  class  user-input  value    gt           lt p id  form-row  gt Message lt  p gt           lt textarea name  message  id  message  class  user-input  rows  10  maxlength  1500  gt  lt  textarea gt           lt p gt  Please fill out every field lt  p gt           lt input type  submit  value  Submit  id  submit  onclick  submitForm    gt            lt script gt              function submitForm                 document contact-form submit                document contact-form reset                           lt  script gt       lt  form gt   lt  div gt

User · Answer

since you are using jquery library  i would advise you utilize the reset   method    Firstly  add an id attribute to the form tag   lt form id  myForm  gt    Then on completion  clear your input fields as       myForm   0  reset

User · Answer

You can try this   function submitForm          form name  contact-form     submit         input type  text    textarea   val          This script needs jquery to be added on the page

User · Answer

I used the following with jQuery     submitForm   val       where submitForm is the id for the input element in the html  I ran it AFTER my function to extract the value from the input field  That extractValue function below   function extractValue         var value       submitForm   val   trim        console log value       Also don t forget to include preventDefault    method to stop the submit type form from refreshing your page

User · Answer

The easiest way would be to set the value of the form element  If you re using jQuery  which I would highly recommend  you can do this easily with       element-id   val       For all input elements in the form this may work  i ve never tried it       form-id   children  input   val       Note that  children will only find input elements one level down  If you need to find grandchildren or such  find   should work   There may be a better way however this should work for you

User · Answer

Your form is being submitted already as your button is type submit   Which in most browsers would result in a form submission and loading of the server response rather than executing javascript on the page   Change the type of the submit button to a button   Also  as this button is given the id submit  it will cause a conflict with Javascript s submit function   Change the id of this button   Try something like   lt input type  button  value  Submit  id  btnsubmit  onclick  submitForm    gt    Another issue in this instance is that the name of the form contains a - dash   However  Javascript translates - as a minus   You will need to either use array based notation or use document getElementById     document getElementsByName    The getElementById   function returns the element instance directly as Id is unique  but it requires an Id to be set    The getElementsByName   returns an array of values that have the same name   In this instance as we have not set an id  we can use the getElementsByName with index 0   Try the following  function submitForm           Get the first form with the name       Usually the form name is not repeated       but duplicate names are possible in HTML       Therefore to work around the issue  enforce the correct index    var frm   document getElementsByName  contact-form   0      frm submit       Submit the form    frm reset        Reset all form data    return false     Prevent page refresh

User · Answer

var btnClear   document querySelector  button    var inputs   document querySelectorAll  input      btnClear addEventListener  click        gt        inputs forEach input   gt   input value

User · Answer

Try this   function submitForm             your code         form  input   attr  value

User · Answer

Just include this line at the end of function and the Problem is solved easily   document getElementById  btnsubmit   value

User · Answer

You can use HTMLFormElement prototype reset according to MDN document getElementById  quot myForm quot   reset

User · Answer

Try this       contact-form input type  text     val          contact-form textarea   val

[javascript] Clearing my form inputs after submission

Examples related to javascript

Examples related to jquery

Examples related to html