Submit form without reloading page

Question

I have a function built in JavaScript that I want to be executed after a form submit is hit  It basically changes the look of the page completely  But I need a variable from the search box to still go through to the JavaScript  At the moment it flashes and resets what was there because it reloads the page    So I set up a return false in my function which keeps it from doing that but the variable I want doesn t get submitted through the form  Any ideas on what I should do to get it  It s okay for the page to refresh as long as the updateTable   function works and isn t reset by the page reset    lt form action    method  get  onsubmit  return updateTable     gt     lt input name  search  type  text  gt     lt input type  submit  value  Search   gt   lt  form gt    This is the updateTable function   function updateTable        var photoViewer   document getElementById  photoViewer      var photo   document getElementById  photo1   href    var numOfPics   5    var columns   3     var rows   Math ceil numOfPics columns     var content       var count 0     content     lt table class  photoViewer  id  photoViewer  gt      for  r   0  r  lt  rows  r          content     lt tr gt        for  c   0  c  lt  columns  c            count          if count    numOfPics  break     check if number of cells is equal number of pictures to stop       content     lt td gt  lt a href    photo    id  photo1  gt  lt img class  photo  src    photo    alt  Photo  gt  lt  a gt  lt p gt City View lt  p gt  lt  td gt              content     lt  tr gt          content      lt  table gt      photoViewer innerHTML   content

User · Accepted Answer

You can t do this using forms the normal way   Instead  you want to use AJAX   A sample function that will submit the data and alert the page response   function submitForm         var http   new XMLHttpRequest        http open  POST     lt  lt whereverTheFormIsGoing gt  gt    true       http setRequestHeader  Content-type   application x-www-form-urlencoded        var params    search      lt  lt get search value gt  gt      probably use document getElementById      value     http send params       http onload   function             alert http responseText

User · Answer

I did it a different way to what I was wanting to do   gave me the result I needed  I chose not to submit the form  rather just get the value of the text field and use it in the javascript and then reset the text field  Sorry if I bothered anyone with this question   Basically just did this       var search   document getElementById  search   value      document getElementById  search   value

User · Answer

I guess this is what you need  Try this     lt form action    method  get  gt                   lt input name  search  type  text  gt                   lt input type  button  value  Search  onclick  return updateTable     gt                   lt  form gt    and your javascript code is the same  function updateTable                    var photoViewer   document getElementById  photoViewer            var photo   document getElementById  photo1   href          var numOfPics   5          var columns   3           var rows   Math ceil numOfPics columns           var content             var count 0           content     lt table class  photoViewer  id  photoViewer  gt                for  r   0  r  lt  rows  r                      content     lt tr gt                    for  c   0  c  lt  columns  c                          count                        if count    numOfPics break     here is check if number of cells equal Number of Pictures to stop                         content     lt td gt  lt a href    photo    id  photo1  gt  lt img class  photo  src    photo    alt  Photo  gt  lt  a gt  lt p gt City View lt  p gt  lt  td gt                                      content     lt  tr gt                          content      lt  table gt             photoViewer innerHTML   content

User · Answer

You can use jQuery serialize function along with get post as follows     get  server php         theForm   serialize       post  server php       theform   serialize      jQuery Serialize Documentation  http   api jquery com serialize   Simple AJAX submit using jQuery      this is the id of the submit button     submitButtonId   click function          var url    path to your script php      the script where you handle the form input         ajax              type   POST              url  url             data      idForm   serialize       serializes the form s elements             success  function data                              alert data      show response from the php script                                 return false     avoid to execute the actual submit of the form

[javascript] Submit form without reloading page

Examples related to javascript

Examples related to form-submit