How to make a form submit return the specified result using AJAX & JSON?

Question

I'm working on a basic year, make, model dependent drop down menu, but started working backwards. I'm currently working on making my success callback dependent on the model drop down selection. For instance, if I choose 2006, lexus, is250, I only want my success callback to display that vehicle.

Most of my code can be found http://codepen.io/cfavela/pen/bozie/ (make sure to collapse the CSS page to make it easier to read)

My results page (modelsTest.html) contains the following:

{ "Car": "2012 Chevrolet Avalanche", "Price": "$10,999", "Features": "Soft seats!" "Img": "/css/img/2012_Avalanche.jpeg" }

What I've tried to do is add another car using an array and $.each, but the problem with this result is that it returns every vehicle if I click on search. How can I make the success callback dependent on the model selected?

Answer 1

As I commented above, according to this SO How to read the post request parameters using javascript , you can not get post data at client side level, you would need a server side to do that.

So you could try using GET and form your query ($('#vehicle').val()) as part of query string, then base on the query string, do some javascript logic at modelsTest.html and return the json you want. (but I don't think this will work, because I don't think you can return pure json in a real html file, so guessing your modelsTest.html just contain json. but I could be wrong hence I leave this as a possible solution)

or do the filtering in the success: function() before append to the msg .