Submit form without reloading page [duplicate]

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.

<form action="" method="get" onsubmit="return updateTable();">   <input name="search" type="text">   <input type="submit" value="Search" > </form> 

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 = "<table class='photoViewer' id='photoViewer'>";   for (r = 0; r < rows; r++) {     content +="<tr>";     for (c = 0; c < columns; c++) {       count++;       if(count == numOfPics) break; // check if number of cells is equal number of pictures to stop       content +="<td><a href='"+photo+"' id='photo1'><img class='photo' src='"+photo+"' alt='Photo'></a><p>City View</p></td>";     }     content +="</tr>";   }   content += "</table>";   photoViewer.innerHTML = content; } 

Answer 1

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", "<<whereverTheFormIsGoing>>", true);     http.setRequestHeader("Content-type","application/x-www-form-urlencoded");     var params = "search=" + <<get search value>>; // probably use document.getElementById(...).value     http.send(params);     http.onload = function() {         alert(http.responseText);     } } 

Answer 2

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. });