I have a Fantasy F1 Website, currently users select their teams using dropdown menus. It works OK but isn't as user friendly as I would like.

I would like to implement a drag and drop type of system, there's jQuery code out there that would go part of the way to allowing me to do this:


But I am not sure about how to integrate that into PHP and MySQL, my jQuery skills are limited!

I'd also need to stop them spending more than a certain amount of money, each driver has a value and the teams can only spend a certain amount of money.

There's also limits for example you can only pick a driver once, but you can have three different drivers.

Finally, how would you decide that the user had picked their team, I don't want a submit button as that kind of defeats the object of the exercise!

Thanks for any advice, I don't expect anyone to write the code for me but some pointers would be greatly appreciated.

  • 1
    \$\begingroup\$ The droppable demo seems to be more what you want: jqueryui.com/demos/droppable \$\endgroup\$ Commented Mar 17, 2012 at 17:04
  • \$\begingroup\$ Or even the sortable: jqueryui.com/demos/sortable You could make the users put on top the 3 teams they want to choose. Then you can easily send these values to php. Then from php to MySQL. \$\endgroup\$ Commented Mar 17, 2012 at 17:05
  • \$\begingroup\$ Thanks, I had seen the sortable but that dropable looks very interesting :-) Not enough rep to vote you up sorry. \$\endgroup\$
    – davidjwest
    Commented Mar 17, 2012 at 21:50

2 Answers 2


It sounds as if you should look at using JavaScript for this part of your interface. You can use JavaScript to validate choices as the user makes selections. For example, when the user chooses a driver, call a function that subtracts the driver's cost from available funds, removes that driver from the list of possible drivers, and updates the count of how many drivers have been chosen so far. You can make the menu more user-friendly by only allowing the user to choose from drivers that they can currently afford (unaffordable drivers could be greyed out, for example). For more complex interactivity such as the drag-and-drop menus you are describing, jQuery would certainly be useful.

You can also use jQuery's .ajax() methods to send data to your PHP scripts. This way more of your game logic could remain in PHP, which might be advantageous if you are trying to prevent cheating (JavaScript can easily be tampered with by the user).

  • \$\begingroup\$ I have already got a javascript validation system with the dropdown menus, but some users are really dumb ;-) \$\endgroup\$
    – davidjwest
    Commented Mar 17, 2012 at 21:51
  • 2
    \$\begingroup\$ Never use client-side validation, maybe, for optimization purposes. \$\endgroup\$
    – jcora
    Commented Aug 14, 2012 at 20:58
  • \$\begingroup\$ Often times it's better to use a combination of client and server validation. Client-side validation has a tendency to be very responsive compared to server-side. \$\endgroup\$
    – Jovan
    Commented Jan 12, 2013 at 0:22

But I am not sure about how to integrate that into PHP and MySQL, my jQuery skills are limited!

In most cases, you'll have to store the driver's IDs (primary key in the database maybe?) on the client side. When the player has filled the list of drivers, you need to take this list of IDs and send it over to your server.

One approach is to store the ID as a data attribute of your container tag:

<div class="driver" data-driver-id="5">

Using jQuery you can easily extract these attributes back.

var selectedDriverIds = $('.driver').data('driver-id');

Use the droppable events to listen for changes (the driver has been dropped over), and send that to the server using jQuery's AJAX functionality.

Finally, you'll need to write a PHP function that accepts what data is sent, performs a bit of validation if needed, and returns the appropriate response to jQuery's AJAX call.

The way you implement your status codes, such as "OK", "Not enough drivers", etc is up to you. You can send a JSON string back with a number that the client knows how to interpret and display the appropriate message. Alternatively, you can use HTTP's own codes.

  type: "POST",
  url: "http://.../drivers.php",
  data: JSON.stringify(selectedDriverIds),
  success: function(result) {
      if (result.message === "OK") {
          // proceed as planned
      } else {
          // handle the errors

It's an involved process and does take knowing JS, jQuery, and a bit of PHP<->AJAX knowledge. There are plenty of resources that will walk you through how to do this.


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .