jQuery Form Variables

I have been messing around with jQuery for a couple of days now and I think I’m getting the hang of it. Before using jQuery, I was using Mootools for processing forms to divs. It worked as intended but what I couldn’t do was create new javascript within the loaded pages. As interfaces get more complicated, the code started to grow and was getting more difficult to follow. On top of that, I wanted to do more with Mootools than just load pages in divs. I tried to read documents and articles from their website but was hard to follow. I bought a book but to me it was still a bit confusing. I even posted a couple on the forums but didn’t get much help. So I started to look for another framework and found jQuery.

jQuery has many examples and demos on their website and has a large community of developers creating plugins. One of the things I needed to figure out was how to pass form variables using jQuery. I found a sample code on their website but I just couldn’t get it to work – http://docs.jquery.com/Ajax/jQuery.post. I couldn’t pass the form variable over. Their sample code was

$.post(“page.php”, {var1: “var1", var2: “var2"}, function(data) { alert(data);});

So I started to play around with it more and was able to get it to work. Here’s the new code now based on the example.

$.post(“page.php”, {‘var1′: $(‘#var1′).val(), ‘var2′: $(‘#var2′).val()},function(data){alert(data);});

After reading a few comments about this function, a couple suggested to use serialize() but I have yet to figure that out. At least my variables are passing as they should. The same syntax for the variables can be applied to $.get.

If you are going to copy to code above, make sure you are using apostrophes. For some reason, it’s displaying the “tick” symbol which is the one sharing the key with the tilde ~ on your keyboard. It looks like an apostrophe but more slanted. So be aware of that.