Question

I need to create a jQuery App with 30 buttons, from 1 to 30, whereby each one calls the exact same action script via Ajax where the parameter that is passed to the action script is simply the number of the button pressed (1 to 30).

For example, let’s say the action script is process.php, if button 3 is pressed, then I need to pull data from process.php?btn=3, and if button 27 is pressed, then I need to pull data from process.php?btn=27.

Which type of button should I use for this: <input> buttons, <a> buttons, <button> buttons, or something else? And why do you suggest that?

Also, how would Ajax get the corresponding value (1-30) of the button pressed with the method you suggest?

Thanks!

Answer 1

I would suggest to use <a/> that way if JavaScript is disabled you can maintain the application’s functionality.

<a href="process.php?btn=3" class="actionButton">Button 3</a>

And the script would simply use the href to post to your page.

$("a.actionButton").click(function(e){
  e.preventDefault();
  $.post(this.href, {}, function(data){
    //do something with the data.
  });
});

Update

Since JavaScript is required than my recommendation would depend on your application design. If you want the big buttons to look like buttons simply use <input type="button" value="3"/> As by default they will have hover effect, depressed effect built out of the box.

If your buttons do not look like normal buttons maybe just blocks or some other style a <div/> could also be an option. The one downside to using an <a/> would be you always have to suppress the default behavior of the click()