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=""> |
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 🙂