Majidiode Majidiode - 6 days ago 5
HTML Question

Making a check in form with javascript

I'm trying to make a simple check-in site for my soccer team.
My site is http://www.labombafootball.com
Basically I made a list of players on my team with a simple 'IN/OUT' button for players to check-in if they are available.

Here's the horrible code I wrote so far, feel free to laugh.



.height2 {
height: 50px;
text-align: center;
}
.height {
height: 100px;
}
.fc {
display: block;
margin-left: auto;
margin-right: auto;
}
body {
font-family: monospace;
font-size: 4em;
font-weight: bold;
}
button {
background-color: red;
}
button:focus {
background-color: lime;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<title>La Bomba FC</title>
</head>

<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 height"><img class="fc" src="images/la-bomba-fc-sm.jpg"></div>
</div>
<div class="row">
<div class="col-xs-8 height2">#2 STEVE B</div>
<button>
<div class="col-xs-4">IN/OUT</div>
</button>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#1 INDER JHOOTY</div>
<button>
<div class="col-xs-4">IN/OUT</div>
</button>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#21 CHRIS NAKATSU</div>
<button>
<div class="col-xs-4">IN/OUT</div>
</button>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#88 NICK MARSHALL</div>
<button>
<div class="col-xs-4">IN/OUT</div>
</button>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#99 TONY YUN</div>
<button>
<div class="col-xs-4">IN/OUT</div>
</button>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#6 DANIELE BORRELLI</div>
<button>
<div class="col-xs-4">IN/OUT</div>
</button>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#11 NITESH SHETTY</div>
<button>
<div class="col-xs-4">IN/OUT</div>
</button>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#45 UDAYA MADANAYAKE</div>
<button>
<div class="col-xs-4">IN/OUT</div>
</button>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#9 ADRIAN PARTYKA</div>
<button>
<div class="col-xs-4">IN/OUT</div>
</button>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#5 PATRICK REGAN</div>
<button>
<div class="col-xs-4">IN/OUT</div>
</button>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#13 RAMEZ ALAM</div>
<button>
<div class="col-xs-4">IN/OUT</div>
</button>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#8 FAIZAN ALAM</div>
<button>
<div class="col-xs-4">IN/OUT</div>
</button>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#33 DAVID CLEBAN</div>
<button>
<div class="col-xs-4">IN/OUT</div>
</button>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#14 VICTOR JIMENEZ</div>
<button>
<div class="col-xs-4">IN/OUT</div>
</button>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#7 HARRY SANDHU</div>
<button>
<div class="col-xs-4">IN/OUT</div>
</button>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#77 JOHN PINEDA</div>
<button>
<div class="col-xs-4">IN/OUT</div>
</button>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#44 DEVON CARNEY</div>
<button>
<div class="col-xs-4">IN/OUT</div>
</button>
</div>
<hr>
<div class="row">
<div class="col-xs-8 height2">#? JUSTIN CONSTANTINEAU</div>
<button>
<div class="col-xs-4">IN/OUT</div>
</button>
</div>
</div>
</body>
</html>





Can anyone tell me how I can save the value after the button is clicked?

Answer

If we update your html slightly to include the playerId in the button, we have something to identify the person on the server. Given you're using bootstrap already, i thought it best to use some bootstrap colours. Similarly, putting block elements (div) inside your buttons is generally not a good thing, so have shifted the html around a tad.

This code uses jQuery's ajax function to POST data to your server. If this is your first play with jQuery, i can recommend getting your head around some best practices and things like IIFE's

JSFIDDLE

HTML

<div class="row">
    <div class="col-xs-8 height2">#2 STEVE B</div>
    <div class="col-xs-4">
        <button class="btn btn-success btn-xl btn-player-checkin" data-player-id="2">Check In</button>
    </div>
</div>

JS

(function($, window, document) {
    $(function() {
        // bind to the click event of the checkin button
        $('.btn-player-checkin').on('click', function(){
            // if the button has the success class - assume the user is checked in
            var isCheckedIn = $(this).hasClass('btn-success');
            // get the player id from the data attribute
            var playerId = $(this).data('player-id');


            // call the send function
            // sendDataToServer(!isCheckedIn, playerId, $(this)); // send the status we want the player to save (ie. opposite of current);

            // if you would like to test the success function without the ajax call, comment out above and uncomment below
            if(!isCheckedIn){ // trying to check out
                $(this).text('Check In');
            }else{ // checking in
                $(this).text('Check Out');
            }
            // cycle classes
            $(this).toggleClass('btn-success btn-danger');

        });

        function sendDataToServer(newStatus, playerId, button){
            $.ajax({
                url: 'http://myfakeserver.com/checkin', // replace this with the url of the server end point
                method: 'POST',
                data: {playerId: playerId, status: newStatus} // send this data, on the server you could also record the timestamp of when this occurred
            }).done(function(){ // if we successfully complete the post
                if(newStatus){ // checking in
                    button.text('Check Out');
                }else{ // trying to check out
                    button.text('Check In');
                }
                // cycle classes
                button.toggleClass('btn-success btn-danger');
            }).fail(function(){
                // do something if the post fails
            });
        }
    });
}(window.jQuery, window, document));

PS. this may fall over given one of your players has an id of ? currently

Comments