Implementing the jQuery Form Plugin (Multiple Submit Buttons)

Implementing the jQuery Form Plugin (Multiple Submit Buttons)

Hello,

I'm totally new to javascript and jQuery. After going through a couple of tutorials, I was able to come up with a code for my purpose. The problem is that it has a variable number of submit buttons and clicking on any of the submit buttons posts only the first form.

After some research, I found out that it can easily be avoided using the jQuery Form plugin (or serialize or something), but I wasn't successful at implementing it.

This is the original code:
  1. $(function() {
  2.   $(".button").click(function() {
  3.     var journal = $("input#journal").val();
  4.     var title = $("input#title").val();
  5.     var authors = $("input#authors").val();
  6.     var year = $("input#year").val();
  7.     var location = $("input#location").val();
  8.     var keywords = $("input#keywords").val();
  9.     
  10.     var dataString = 'journal=' + journal + '&title=' + title + '&year=' + year + '&authors=' + authors + '&location=' + location + '&keywords=' + keywords;
  11.          
  12.     $.ajax({
  13.       type: "POST",
  14.       url: "update.php",
  15.       data: dataString,
  16.       success: function() {
  17.           alert(dataString);
  18.       }
  19.     });
  20.     return false;
  21.   });
  22. });

And this is the HTML:
  1.     foreach(glob($dir) as $file) {       
  2.         $pattern = '/(.+)\/(.+)\.(pdf|PDF)/';
  3.           if(preg_match($pattern, $file, $filename)) {
  4.               $i = $i+1;
  5.         echo "$i $filename[2].$filename[3]" . '
  6.     <form name="add" id="add" method = "post" action="">
  7.         <fieldset>
  8.             <input type="text" name="journal" id="journal" value="" class="text-input" />
  9.             <input type="text" name="title" id="title" value="" class="text-input" />
  10.             <input type="text" name="authors" id="authors" value="" class="text-input" />
  11.             <input type="number" name="year" id="year" value="" class="text-input" />
  12.             <input type="hidden" name="location" id="location" value="'.$file.'" class="text-input" />
  13.             <input type="text" name="keywords" id="keywords" value="" class="text-input" />
  14.             <br />
  15.             <input type="submit" name="submit" class="button" id="submit_btn" value="Update Database" />
  16.         </fieldset>
  17.     </form>';
  18.     }
Please help me implement jQuery Forms.

Thanks,
- Pranav