title: Submit form without reloading page
body: <p>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. </p>
  
  <p>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 <code>updateTable()</code> function works and isn't reset by the page reset.</p>
  
  <pre><code>&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;
  </code></pre>
  
  <p>This is the <code>updateTable</code> function:</p>
  
  <pre><code>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;
  }
  </code></pre>