submit the form using ajax

Question

I m developing an application  a kind of social network for my university   I need to add a comment  insert a row in a specific database   To do this  I have a HTML form in my html page with various fields  At time of submit I don t use the action of form but i use a custom javascript function to elaborate some data before submitting form   function sendMyComment          var oForm   document forms  addComment        var input video id   document createElement  input        var input video time   document createElement  input         input video id setAttribute  type    hidden        input video id setAttribute  name    video id        input video id setAttribute  id    video id        input video id setAttribute  value   document getElementById  video id   innerHTML        input video time setAttribute  type    hidden        input video time setAttribute  name    video time        input video time setAttribute  id    video time        input video time setAttribute  value   document getElementById  time   innerHTML        oForm appendChild input video id       oForm appendChild input video time        document forms  addComment   submit        The last line submits the form to the correct page  It works fine  But I d like to use ajax for submitting the form and I have no idea how to do this because I have no idea how to catch the form input values  anyone can help me

User · Answer

Nobody has actually given a pure javascript answer  as requested by OP   so here it is   function postAsync url2get  sendstr           var req      if  window XMLHttpRequest            req   new XMLHttpRequest              else if  window ActiveXObject            req   new ActiveXObject  Microsoft XMLHTTP                  if  req    undefined               req overrideMimeType  application json       if request result is JSON         try               req open  POST   url2get  false      3rd param is whether  async                        catch err                alert  couldnt complete request  Is JS enabled for that domain   n  n    err message               return false                        req send sendstr      param string only used for POST          if  req readyState    4       only if req is  loaded              if  req status    200      only if  OK                    return req responseText                 else      return  XHR error      req status      req statusText                                alert  req for getAsync is undefined       var var str    var1     var1      amp var2     var2  var ret   postAsync url  var str           hint  encodeURIComponent    if  ret match   XHR error          console log ret       return          In your case   var var str    video time     document getElementById  video time   value           amp video id     document getElementById  video id   value

User · Answer

I would like to add a new pure javascript way to do this  which in my opinion is much cleaner  by using the fetch   API  This a modern way to implements network requests  In your case  since you already have a form element we can simply use it to build our request   const formInputs   oForm getElementsByTagName  input    let formData   new FormData    for  let input of formInputs        formData append input name  input value      fetch oForm action                method  oForm method          body  formData             then response   gt  response json         then data   gt  console log data        catch error   gt  console log error message        finally      gt  console log  Done       As you can see it is very clean and much less verbose to use than XMLHttpRequest

User · Answer

What about    ajax     type   POST     url     form   attr  action      data     form   serialize         or your custom data either as object  foo   bar        or foo bar amp       success  function response

User · Answer

It s much easier to just use jQuery  since this is just a task for university and you do not need to save code   So  your code will look like   function sendMyComment             addComment   append   lt input type  hidden  name  video id  id  video id  value          video id   text         gt  lt input type  hidden  name  video time  id  video time  value          time   text        gt           ajax           type   POST           url      addComment   attr  action            data     form   serialize             success  function response

User · Answer

You can add an onclick function to your submit button  but you won t be able to submit your function by pressing enter  For my part  I use this    lt form action    method  post  onsubmit  your ajax function    return false   gt      Your Name  lt br  gt       lt input type  text  name  name  id  name    gt       lt br  gt       lt input type  submit  id  submit  value  Submit    gt   lt  form gt    Hope it helps

User · Answer

Here is a universal solution that iterates through every field in form and creates the request string automatically  It is using new fetch API  Automatically reads form attributes  method and action and grabs all fields inside the form  Support single-dimension array fields  like emails    Could serve as universal solution to manage easily many  perhaps dynamic  forms with single source of truth - html   document querySelector   ajax-form   addEventListener  submit   function e        e preventDefault        let formData   new FormData this       let parsedData           for let name of formData          if  typeof parsedData name 0        undefined             let tempdata   formData getAll name 0            if  tempdata length  gt  1              parsedData name 0     tempdata            else             parsedData name 0     tempdata 0                                let options           switch  this method toLowerCase            case  post           options body   JSON stringify parsedData         case  get           options method   this method          options headers     Content-Type    application json          break             fetch this action  options  then r   gt  r json    then data   gt          console log data                 lt form method  POST  action  some url  gt       lt input name  emails    gt       lt input name  emails    gt       lt input name  emails    gt       lt input name  name  gt       lt input name  phone  gt   lt  form gt

User · Answer

You can catch form input values using FormData and send them by fetch  fetch form action  method  post   body  new FormData form        x000D   x000D  function send e form    x000D    fetch form action  method  post   body  new FormData form     x000D   x000D    console log  We send post asynchronously  AJAX     x000D    e preventDefault    x000D    x000D   lt form method  POST  action  myapi send  onsubmit  send event this   gt  x000D       lt input hidden name  crsfToken  value  a1e24s1  gt  x000D       lt input name  email  value  a b com  gt  x000D       lt input name  phone  value  123-456-789  gt  x000D       lt input type  submit  gt      x000D   lt  form gt  x000D   x000D  Look on chrome console gt network before  submit  x000D   x000D   x000D

User · Answer

I would suggest to use jquery for this type of requirement   Give this a try   lt div id  commentList  gt  lt  div gt   lt div id  addCommentContainer  gt       lt p gt Add a Comment lt  p gt   lt br  gt   lt br  gt       lt form id  addCommentForm  method  post  action    gt           lt div gt              Your Name  lt br  gt               lt input type  text  name  name  id  name    gt                 lt br  gt   lt br  gt              Comment Body  lt br  gt               lt textarea name  body  id  body  cols  20  rows  5  gt  lt  textarea gt                lt input type  submit  id  submit  value  Submit    gt           lt  div gt       lt  form gt   lt  div gt      document  ready function           The following code is executed once the DOM is loaded            This flag will prevent multiple comment submits         var working   false          submit   click function          ajax            type   POST            url   mysubmitpage php            data      addCommentForm   serialize              success  function response                alert  Submitted comment                      commentList   append  Name         name   val       lt br  gt comment         body   val                         error  function                        commentList   append     name   val       lt br  gt         body   val                 alert  There was an error submitting comment

[javascript] submit the form using ajax

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to ajax

Examples related to forms