jQuery ajaxForm Tip

I recently added a jQuery ajaxForm (which submits a form’s contents and returns the data in an ajax call instead of a page load) and I had problems getting it running. It kept throwing errors, and they didn’t seem to make sense at first:

01
02
  $(document).ready(function()
03
  {
04
      $("#searchForm").ajaxForm({
05
      url:'/tools/searchAudioFileNames',
06
      dataType:'json',
07
      success:searchFormCallback 
08
  });
09
});
10

1
2
<form id="searchForm" name="searchForm" action=""&gt;
3
  <input type="text" name="searchString" value="Search"/>
4
  <input type="submit" name="method" value="Search"/>
5
</form>

1
2
Uncaught TypeError: Object #<HTMLInputElement> has no method 'toUpperCase'  jquery.form.js:111
3

Comparing to some working code, I just couldn’t find the differences. Well, after digging through the jQuery source, I finally found it (okay, it only took about 2 minutes, but I spent about 10 looking for the solution on Google first). ajaxForm() expects the form to be define with a method, so I just had to throw in the GET.

1
<form id="searchForm" name="searchForm" action="" method="GET">

I love Open Source 🙂