mercredi 18 mai 2016

display checkbox results on same page

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