Capturing Form Data and submitting to an Ajax call

Capturing Form Data and submitting to an Ajax call

I am just getting started here and have this working fine for me.  It retrieves 4 items from a flicker feed.  (Look familiar?)

  2. <!DOCTYPE = html>
  3. <html lang="en">
  4. <head>
  5. <meta charset="UTF-8" />
  6. <title>My Test Page</title>
  7. <script type = "text/javascript" src = "jquery.js"></script> 
  8.  <div id=rating></div>
  9. </head>

  11. <body>
  12. <h1>Flicker feed</h1>
  13. <div id="images"></div>
  14. <script>
  15. // Start after document has loaded)
  16. $(function(){
  17.     RunAjax()
  18. });

  20. // This is what you run
  21. function RunAjax() 
  22. {
  23.    var tag = "cat"
  24.     $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags="+ tag + "&tagmode=any&format=json&jsoncallback=?",
  25.     function(data)
  26.     {$.each(data.items, function(i,item)
  27.   {$("<img/>").attr("src", item.media.m).appendTo("#images");
  28.   if ( i == 3 ) return false;
  29.   });
  30.   });
  31.         };
  32. </script>
  33. </body>
  34. </html>
What I would like to do is to have my variable, "tag" be the result of a form submission on the page.
My form can be as simple as the following:
  2. <form id="flickerform">
  3. <fieldset>
  4. <legend>Flicker Search Feed</legend>
  6. <label>Parameter:</label>
  7. <input type="text" id="tags" name="tags" />
  9. <button type="submit">Search</button>
  11. </fieldset>
  12. </form>

So when one clicks on the Submit button, I want it to take take the value of my tags form field and pass it to my RunAjax function and return the data corresponding to that tag value.
I am not clear on how to make that request within the form action and method.  Any help would be greatly appreciated.