Untitled

<!DOCTYPE html>
<html>
<head>
    <title>
        Prvi tab
    </title>
    <style>
        .crveno {
            color: red;
        }
        #tabela{
            position: relative;
            left: 20px;
        }
        td{
            width: 150px;
        }
        #formular{
            position: relative;
            left: 360px;
            bottom: 80px;
        }
        .ro{
            background-color: lightgray;
            opacity: 0.7;
        }
        input{
            border-radius: 3px;
            border: 1px solid gray;
            height: 18px;
        }
    </style>


</head>
<body>

    <?php
        $db_servername = "localhost";
        $db_user = "root";
        $db_pass = "tiskepap";
        $db_name = "fakultet";

        $conn = mysqli_connect($db_servername, $db_user, $db_pass, $db_name);
        if (!$conn){
            die("Neuspela konekcija" . mysqli_connect_error());
        }

        $sql = "SELECT * FROM `aktivnosti`";
        $result = mysqli_query($conn, $sql);
        if ($result){

            echo "<table id='tabela'>";
            echo "<ul style='list-style-type:square'>";
            while ($row = mysqli_fetch_assoc($result)){
                if ($row['broj_prijavljenih'] < $row['broj_potrebnih']){
                    echo "<tr><td class='crveno'><li>" .$row['naziv']. "</li></td><td><button class='dugme' data-atr='".$row['naziv']."' data-datum='".$row['datum']."'>pregledaj aktivnost</button></td></tr>";
                }
                else{
                    echo "<tr><td><li>" . $row['naziv'] . "</li></td></tr>";
                }
            }
            echo "</ul>";
            echo "</table";
        }
        else{
            die("Neuspela konekcija" . mysqli_connect_error());
        }
     ?>
     <div></div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"
    type="text/javascript"></script>
    <script>
        $(document).ready(function(){
            $("#formular").hide();
            $(".dugme").click(function(){
                var akt = ($(this).attr("data-atr"));
                var dat = ($(this).attr("data-datum"));
                $("#polje_akt").val(akt);
                $("#polje_dat").val(dat);
                $("#formular").show(2000);
            });
        });
    </script>

    <form id="formular" >
        <div>
            <label><b>Indeks</b><br></label>
            <input type="textarea">
        </div>
        <div>
            <label><b>Aktivnost</b><br></label>
            <input type="textarea" id="polje_akt" class="ro" readonly>
        </div>
        <div>
            <label><b>Datum</b><br></label>
            <input type="textarea" id="polje_dat" class="ro" readonly>
        </div>
        <br>
        <div>
            <button value="prijavi me" onclick="return prijava_ink()">prijavi me</button>
        </div>
    </form>

    <div id="test"></div>

    <script type="text/javascript">
        function prijava_ink(){
            var akt = document.getElementById("polje_akt").value;
            var dat = document.getElementById("polje_dat").value;
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function(){
                if (!(this.readyState == 4 && this.status == 200)){
                    window.alert("Neuspela prijava\n");
                    return;
                }
                xhttp.open("GET", "prijava.php?akt=" +akt+ "&dat=" +dat, true);
                xhttp.send();
            }
        }
    </script>

</body>
</html>