clear form values after submission ajax

Question

I am using the following script for validate my contact form     submission scripts       contactForm   submit  function              statements to validate the form            var filter       a-zA-Z0-9    -        a-zA-Z0-9 -         a-zA-Z0-9  2 4               var email   document getElementById  e-mail            if   filter test email value                     email-missing   show              else      email-missing   hide             if  document cform name value                          name-missing   show              else      name-missing   hide               if  document cform phone value                          phone-missing   show                       else if isNaN document cform phone value                phone-missing   show                      else      phone-missing   hide                if  document cform message value                          message-missing   show              else      message-missing   hide                if   document cform name value             filter test email value       document cform message value           isNaN document cform phone value                return false                      if   document cform name value         amp  amp   filter test email value    amp  amp   document cform message value                         hide the form                   contactForm   hide                   show the loading bar                 loader   append     bar                     bar   css  display  block                document cform name value               document cform e-mail value               document cform phone value               document cform message value                        send the ajax request               post  mail php   name     name   val                                  email     e-mail   val                                  phone     phone   val                                  message     message   val                    return the data             function data                    hide the graphic                   bar   css  display  none                       loader   append data                                   waits 2000  then closes the form and fades out               setTimeout      backgroundPopup   fadeOut  slow        contactForm   slideUp  slow     2000                  stay on the page             return false                       This is my form   lt form action  mail php  class  contactForm  id  cform  name  cform  method  post  gt     lt input id  name  type  text  value    name  name    gt     lt br   gt     lt span class  name-missing  gt Please enter your name lt  span gt     lt input id  e-mail  type  text  value    name  email    gt     lt br   gt     lt span class  email-missing  gt Please enter a valid e-mail lt  span gt     lt input id  phone  type  text  value    name  phone    gt     lt br   gt     lt span class  phone-missing  gt Please enter a valid phone number lt  span gt     lt textarea id  message  rows    cols    name  message  gt  lt  textarea gt     lt br   gt     lt span class  message-missing  gt Please enter message lt  span gt     lt input class  submit  type  submit  name  submit  value  Submit Form    gt   lt  form gt    I need to clear the form field values after submitting successfully  How can i do this

User · Answer

Vanilla  I know this post is quite old  Since OP is using jquery ajax this code will be needed  But for the ones looking for vanilla                 Send the value     xhttp send params          Clear the input after submission     document getElementById  cform   reset

User · Answer

Simply      cform   0  reset

User · Answer

Using ajax reset   method you can clear the form after submit example from your script above  const form   document getElementById cform  reset

User · Answer

it works  call this function after ajax success and send your form id as it s paramete  something like this   This function clear all input fields value including button  submit  reset  hidden fields  function resetForm formid             formid      input   each function          this  val     attr  checked  false  attr  selected  false              This function clears all input fields value except button  submit  reset  hidden fields         function resetForm formid           input      formid   not   button   submit   reset   hidden    val        removeAttr  checked    removeAttr  selected          example    lt script gt      function            function processForm  e                 ajax                  url   insert php                  dataType   text                  type   post                  contentType   application x-www-form-urlencoded                  data    this  serialize                   success  function  data  textStatus  jQxhr                        alertt   fadeIn 2000                       alertt   html  data                        alertt   fadeOut 3000                  resetForm  userInf                               error  function  jqXhr  textStatus  errorThrown                    console log  errorThrown                                       e preventDefault                   userInf   submit  processForm       jQuery     function resetForm formid        input      formid   not   button   submit   reset   hidden    val        removeAttr  checked    removeAttr  selected          lt  script gt

User · Answer

Set id in form when you submitting form         lt form action    id  cform  gt           lt input type  submit  name    gt        lt  form gt      set in jquery      document getElementById  cform   reset

User · Answer

use this      form contactForm input type  text   texatrea  select   val        or if you have a reference to the form with this      input type  text   texatrea  select   this  val           input      lt input gt     lt select gt s    lt textarea gt s

User · Answer

contactForm   submit function        var that   this            more form stuff           post  mail php      params     function data                 more success stuff             that reset

User · Answer

post  mail php   name     name   val                              email     e-mail   val                              phone     phone   val                              message     message   val                return the data         function data              if data   lt when do you want to clear the form gt                     lt form Id gt    find   input   each function                      switch this type                          case  password                         case  select-multiple                         case  select-one                         case  text                         case  textarea                               this  val                                break                        case  checkbox                         case  radio                             this checked   false                                                                    http   www electrictoolbox com jquery-clear-form

User · Answer

cform   0  reset      or in plain javascript   document getElementById  cform   reset

User · Answer

formid  reset      or  document getElementById  formid   reset

User · Answer

You can do this inside your   post calls success callback like this    post  mail php   name     name   val                                  email     e-mail   val                                  phone     phone   val                                  message     message   val                    return the data             function data                    hide the graphic                   bar   css  display  none                       loader   append data                    clear fields                  input type  text   textarea   val

[javascript] clear form values after submission ajax

Vanilla!

Examples related to javascript

Examples related to jquery

Examples related to ajax