Best way to encode a button with one click of one click to replace one checkbox and submit button form?

Question

I have a page with a simple checkmark form with a submit button so that users mark this item as "want to play."

Given its simplicity, I would like to replace it with one DIV and the graphics of a toggle button or switch or something else so that users can click on it to mark, but don't have to worry about a silly single checkbox and send, which is pretty ugly.

A short and quick solution that I can think of is that the div is a link, e.g.

markme.php?id=XYZ&user=123

which issues a flag to the database for this user, and then redirects back to the page they were viewing.

Would it be reasonable? Is there a better way?

/ me - an enthusiastic newbie

Answer 1

Do this <button>, which has an event onclickassociated with it that executes an AJAX request to send a request to someone with a page handler that will update the database or similar, and upon successful completion, change its CSS style to make it look clicked.

Use jQuery to bind events AJAX request , and CSS class change , and this style should work, make the button pressed.

<button type="button" id="btnPlay">Play</button>

Then:

 $("#btnPlay").click(function(){

    var button = $(this) ;

    if (!button.hasClass('pressed')) {
        //button is unpressed
        $.post("ajax.php", { userId: "5512", action: "play" },
            function(data){
               button.addClass('pressed');
               button.html("Playing!") ;
            }
        );
    }
    else {
        //button is pressed, toggle it back
        $.post("ajax.php", { userId: "5512", action: "stopPlaying" },
            function(data){
               button.removeClass('pressed');
               button.html("Play") ;
            }
        );
    }


});