Submit form without reloading page [duplicate]

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

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

I guess this is what you need. Try this .

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

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 = "<table class='photoViewer' id='photoViewer'>";            for (r = 0; r < rows; r++) {                content +="<tr>";                for (c = 0; c < columns; c++) {                    count++;                    if(count == numOfPics)break; // here is check if number of cells 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; }