I am working on a webpage that shows the information about cars using GET variable from URL. Example url:
http://ift.tt/1qtb89x.
Sample output:
Company Car Price
Maruti Alto 200000
Hyundai i10 400000
Hyundai i20 600000
Honda Civic 600000
Maruti Zen 150000
Tata Safari 1000000
My page has some form checkbox to filter company, car etc.
form:
<form id="form" method="post" action="list.php?cat=cars">
<input type="checkbox" value="m" name="car"/>Maruti
<input type="checkbox" value="Hy" name="car"/>Hyundai
<input type="checkbox" value="H" name="car"/>Honda
<input type="checkbox" value="T" name="car"/>Tata
</form>
All i could find till now is a script that displays the output as "car=m" if i just check Maruti checkbox & m,H,T if i check Maruti, Honda and Tata checkboxes and so on as an alert box.
Script:
$(document).ready(function()
{
$('input[type="checkbox"]').on('change', function(e) {
var data = {};
var dataStrings = [];
$('input[type="checkbox"]').each(function() {
if (this.checked) {
if (data[this.name] === undefined) data[this.name] = [];
data[this.name].push(this.value);
}
});
$.each(data, function(key, value)
{
dataStrings.push(key + "=" + value.join(','));
});
var result = dataStrings.join('&');
alert(result);
<!-- $.post('/ajax-post-url/', data); -->
if (history.pushState) {
history.pushState(null, null, loc.pathname + '?' + data);
}
});
});
Now i want to change the output on the same page when one or more checkbox clicked. Fresher to jquery and AJAX. Thanks...
Aucun commentaire:
Enregistrer un commentaire