Jump to content


dynamic update of matching data based on radio button clicks?

  • Please log in to reply
1 reply to this topic

#1 satre

  • Members
  • PipPip
  • Member
  • 29 posts

Posted 08 January 2013 - 11:19 PM

Hi All,

I have a search page that I've created that looks for artists in my database based on the type of work they do. There are 3 columns: "style, medium, materials" that are created and ordered based on their popularity in my database. I put the count of the number of artists matching these attributes to the right of the radio buttons.

I'm wondering if it is possible to update the numbers dynamically based on the choices made by the visitor. For example, If I click "representational" under the style column, of which there are currently 91 artists, is there a way to update the remaining radio buttons based on that choice? That is, change all the numbers to the right of the buttons to reflect how many artists (doing representational work) match the remaining radiobuttons. Some artists do both representational and conceptual work, so after clicking the representational button, the style column would have to keep that button clicked and update the numbers after "abstract" and "conceptual" as well as all the others under the "medium" and "materials" columns too. Then, as I click something under the "medium" column (painting for example), I would keep the buttons clicked and update all the other buttons displaying the number of artists remaining who do both "representational" and "painting" work, and so on...

I'm sure it would involve a simple query to mysql to get the numbers, which is no problem, but how do I detect that a button has been clicked and then send the query to mysql and then refresh the page with all the new results?

Here's the address for the testing page:


I like the radio button design because it lets you see all the possibilities at once. I would like to be able to see how my possiblilites are narrowed by my choices tho'.

I'm OK with php and mysql, but I really suck with javascript and other languages, which is probably what I'm going to have to look into I think....?

#2 haku

  • Staff Alumni
  • Advanced Member
  • 6,179 posts

Posted 09 January 2013 - 02:37 AM

This requires javascript, and maybe AJAX (subset of javascript).

For both methods:
You'll need to implement on 'onclick' listener on the first set of radio buttons. An onclick listener 'listens' for the readio buttons to be clicked. Once they are clicked, the value of the clicked element is used to show the second set of radio buttons.

Javascript method:
With the javascript only method, you'll load all possible secondary sets of radio buttons on page load, but hide them all with CSS. When the first set of radio buttons is clicked, the clicked value is used to determine which secondary set of radio buttons should be shown, and the CSS is generated to show this set of radio buttons. This method is fine if you only have a few possible sets of secondary radio buttons, however the possibilities for the secondary set of radio buttons may be huge, in which case you'll use...

AJAX method:
AJAX is a method of making a request to the server in the background using javascript. When the first set of radio buttons is clicked, you'll send the clicked value back to a script on your server. This script will then generate the data you need, likely through a database call, and either format as radio buttons and and send it back to your javascript, or will send raw data back to the javascript, at which point you'll format the data into radio buttons using javascript. Then, the radio buttons are inserted into the page.

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users