Convert JS HREF to Ajax

[patk570]

Hello, I have a form that i would like to convert from JS onClick to AJAX,

Here is my form:

<form action="" method="post" name="filter"><input id="All" onClick="if(document.forms['filter'].elements['All'].checked)window.location.href='?page=1&amp;filter=All&amp;perpage=10'" name="All" type="checkbox" /><label style="background:#008080; font-size:small" for="All">All</label>
<input id="Pending" style="background:#FF6262" onClick="if(document.forms['filter'].elements['Pending'].checked)window.location.href='?page=1&amp;filter=Pending&amp;perpage=10'" name="Pending" type="checkbox" /><label style="background:#FF6262; font-size:small" for="Pending">Pending</label>
<input id="Complete" style="background:#7BCC70" onClick="if(document.forms['filter'].elements['Complete'].checked)window.location.href='?page=1&amp;filter=Complete&amp;perpage=10'" name="Complete" type="checkbox"  /><label style="background:#7BCC70; font-size:small" for="Complete">Complete</label>
<input id="Waiting on parts" style="background:#ffff66" onClick="if(document.forms['filter'].elements['Waiting on parts'].checked)window.location.href='?page=1&amp;filter=Waiting on parts&amp;perpage=10'" name="Waiting on parts" type="checkbox"  /><label style="background:#ffff66; font-size:small" for="Waiting on parts">Waiting on parts</label><br>
<input id="Waiting for customer response" onClick="if(document.forms['filter'].elements['Waiting for customer response'].checked)window.location.href='?page=1&amp;filter=Waiting for customer response&amp;perpage=10'" name="Waiting for customer response" style="background:#e4d2ba" type="checkbox"  /><label style="background:#e4d2ba; font-size:small" for="Waiting for customer response">Waiting for customer response</label>
</form>

I think AJAX loads faster and easier to implement but I am unsure of how to convert it.

Thanks

[Airshow]

Patk, there's not enough information in the question to be able to answer it.

In order to help you, we would need to see at least the HTML on which the filters act. Once that is known, there would be two possible approaches :

1. AJAX: Fetch data from which a new list of items could be built, replacing the current list
2. non-AJAX: Filter the page's existing list of items directly without fetching any new data.

Both approaches are very different from reloading the entire page.

The choice of one approach or the other will be determined by whether or not you can initially compose an enduring, comprehensive list of items when the page is initially served.

If viable, the non-AJAX approach will be very fast.

The AJAX approach may not be any faster than your current technique (reloading the entire page) and would require a corresponding server-side resource to deliver the necessary data.