Submit form without reloading page
form-submit, javascript
Solution
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);
}
}
Problem
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; } ```