Can anyone please help!? It's urgent

DaVinc1 · July 2, 2023

* The reason I am publishing like an as**ole for someone to solve it and not finding out myself is because this is my college project and I have no time. I am really sorry.

I'm new to php, the things I know are html, css and a little of javascript. The problem I have is that I don't know how to make the date clicked <?php echo $ts; ?> to be autofilled in date and time inputs on a modul that appears after clicking on that exact time. Please help I'm sure that my code looks horrible but that's what I collected from youtube and pdfs.

<?php
$duration = 45;
$cleanup = 0;
$start = "10:00";
$end = "15:15";

function timeslots($duration, $cleanup, $start, $end){
    $start = new DateTime($start);
    $end = new DateTime($end);
    $interval = new DateInterval("PT".$duration."M");
    $cleanupInterval = new DateInterval("PT".$cleanup."M");
    $slots = array();

    for($intStart = $start; $intStart<$end; $intStart->add($interval)->add($cleanupInterval)){
        $endPeriod = clone $intStart;
        $endPeriod->add($interval);
        if($endPeriod>$end){
            break;
        }
         $slots[] = $intStart->format("H:i")." h ";
    }

    return $slots;
}
?>

<?php

if (isset($_POST['tIme']) || isset($_POST['tPrezime']) || isset($_POST['tTelefon']) || isset($_POST['tDatum']) || isset($_POST['tVreme'])) {
    $con = mysqli_connect('localhost', 'root', '','tpozdb');

    $tIme = $_POST['tIme'];
    $tPrezime = $_POST['tPrezime'];
    $tTelefon = $_POST['tTelefon'];
    $tDatum = $_POST['tDatum'];
    $tVreme = $_POST['tVreme'];

    $sql = "INSERT INTO `tehnicki` (`Id`, `Ime`, `Prezime`, `Telefon`, `Datum`, `Vreme`) VALUES ('0', '$tIme', '$tPrezime', '$tTelefon', '$tDatum', '$tVreme')";

    $rs = mysqli_query($con, $sql);
}

?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tehnički pregled</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="icon" type="img/png" href="images/logo.png">
    <meta name="author" content="Filip Glišović, glisovic01@gmail.com">
    <!-- Rubik font -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
    <section class="header">
        <div class="navbar">
            <div class="logo">
                <img src="images/logo.png">
                <span>Tehnički pregled</span>
            </div>
            <div class="nav-links" id="navLinks">
                <ul>
                    <li><a aria-current="page" href="index.php">Naslovna</a></li>
                    <li><a href="galerija.php">Galerija</a></li>
                </ul>
            </div>
        </div>
        <div class="headline">
            <h1>Tehnički pregled</h1>
            <p>Odaberite termin i zakažite tehnički pregled svog vozila brzo i jednostavno na našem sajtu.</p>
            <a href="#termin" class="btn">Zakažite termin</a>
        </div>
    </section>
    <div id="myModal" class="modal">
        <div class="login-box">
            <p>Zakazivanje termina</p>
            <form method="POST">
                <div class="user-box">
                <input name="tIme" type="text" required="Please">
                <label>Ime</label>
                </div>
                <div class="user-box">
                <input name="tPrezime" type="text" required>
                <label>Prezime</label>
                </div>
                <div class="user-box">
                <input name="tTelefon" type="text" required>
                <label>Broj telefona</label>
                </div>
                <div class="user-box">
                <input name="tDatum" type="date" onkeydown="return false" required>
                </div>
                <div class="user-box">
                <input name="tVreme" id="tVreme" type="text" required>
                </div>
                <a href="#" onclick="this.closest('form').submit();">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                POŠALJI
                </a>
            </form>
        </div>
    </div>
    <section class="content" id="termin">
        <?php
        $dt = new DateTime;
        if (isset($_GET['year']) && isset($_GET['week'])) {
            $dt->setISODate($_GET['year'], $_GET['week']);
        } else {
            $dt->setISODate($dt->format('o'), $dt->format('W'));
        }
        $year = $dt->format('o');
        $week = $dt->format('W');
        ?>

        <a href="<?php echo $_SERVER['PHP_SELF'].'?week='.($week-1).'&year='.$year; ?>">Prethodna Nedelja</a>
        <a href="<?php echo $_SERVER['PHP_SELF'].'?week='.($week+1).'&year='.$year; ?>">Sledeća Nedelja</a>

        <table>
            <tr>
            <?php
            do {
                if($dt->format('d M Y') == date('d M Y')){
                    echo "<td id='danas'>" . $dt->format('l') . "<br>" . $dt->format('d M Y') . "</td>\n";
                }else{
                    echo "<td>" . $dt->format('l') . "<br>" . $dt->format('d M Y') . "</td>\n";
                }
                
                $dt->modify('+1 day');
            } while ($week == $dt->format('W'));
            ?>
            </tr>
            <?php $timeslots = timeslots($duration, $cleanup, $start, $end);
                foreach($timeslots as $ts){
            ?>
            <tr>
            <td><a href="#" onclick="MyFunction();return false;"><?php echo $ts; ?></a></td>
            <td><a href="#" onclick="MyFunction();return false;"><?php echo $ts; ?></a></td>
            <td><a href="#" onclick="MyFunction();return false;"><?php echo $ts; ?></a></td>
            <td><a href="#" onclick="MyFunction();return false;"><?php echo $ts; ?></a></td>
            <td><a href="#" onclick="MyFunction();return false;"><?php echo $ts; ?></a></td>
            <td><a href="#" onclick="MyFunction();return false;"><?php echo $ts; ?></a></td>
            <td><a href="#" onclick="MyFunction();return false;"><?php echo $ts; ?></a></td>
            </tr>
                <?php } ?>
            
        </table>
        <span>Odaberite željeno vreme.</span>
    </section>
    <section class="footer">
        <div class="social">
            <ul>
                <li><a href="#"><img src="images/facebook.png" alt=""></a></li>
                <li><a href="#"><img src="images/twitter.png" alt=""></a></li>
                <li><a href="#"><img src="images/gmail.png" alt=""></a></li>
            </ul>
        </div>
        <span>Designed by Filip Glišović &copy2023. - All rights reserved.</span>
    </section>
    <script src="app.js"></script>
</body>
</html>

If you have time to make it better I would appreciate it so much!

THANK YOU IN ADVENCE!!!

Edited July 2, 2023 by DaVinc1

Barand · July 2, 2023

I would create a hidden input named "timeslot" in the form. Add a "data-timeslot" attribute to each of your timeslot links with a datetime value for the slot EG...

<td><a href="#" onclick="MyFunction();return false;" data-timeslot="<?=$ts->format('Y-m-d H:i')?>" ><?=$ts->format('H:i \h')?></a></td>

Have MyFunction() put the data value into the form field.

In your timeslots() function I would use a DatePeriod object instead of a for() loop

function timeslots($duration, $cleanup, $start, $end){
    $start = new DateTime($start);
    $end = new DateTime($end);
    $duration += $cleanup;
    $interval = new DateInterval("PT".$duration."M");
    $slots = [];
    $dp = new DatePeriod($start, $interval, $end);
    return $dp;                                                              
}

Don't use PHP_SELF. Just leave out the page reference - default is self)

DaVinc1 · July 2, 2023

Quote

Have MyFunction() put the data value into the form field.

Unfortunately I tried but can't get it to work...

This is the code I tried after adding "timeslot" id to <a> tag:

function MyFunction () {
  modal.style.display = "block";
  var timeslot = $(this).attr('data-timeslot');
  $("#timeslot").val(timeslot);
}

Edited July 2, 2023 by DaVinc1

Barand · July 2, 2023

<body>

    Timeslot : <input id='timeslot' value=''>
    <br><br>
    <a href="#" class='tslot' data-timeslot="2023-07-02 19:00" >19:00</a>
    
</body>

script

<script type='text/javascript'>

    $(function() {                                                              // when page has loaded
    
        $(".tslot").click(function() {                                          // define click event listener
            let timeslot = $(this).data("timeslot")
            $("#timeslot").val(timeslot)
        })
  
    })
    
</script>

gizmola · July 2, 2023

You have painted yourself into a bit of a corner because the Dates computed in the first row are disconnected from the time period slots. When you click on a cell in the table, you not only need to determine what the time period is, but also what day that time period is relevant to. This is essentially what Barand is trying to help with. While I agree that would be a great solution, I don't think he realized that the timeslots don't correspond with the dates, so this is not going to work, until a connection is made between the two.

One way to get around this would be to use javascript to get the date value from the first row, and the corresponding column inside MyFunction. To facilitate this you should give the table an id, so you can select it easily. Then you can do something like:

function MyFunction(col, time) {
   const tbl = document.getElementById("myTable");
   let dateValue = tbl.rows[0].cells[col].innerHTML;
   // Set the Form Date element value using dateValue
   // Set the Form Time element value using time
)

Change the table output to something like this:

<td><a href="#" onclick="MyFunction(0, '<?php echo $ts; ?>');return false;"><?php echo $ts; ?></a></td>
<td><a href="#" onclick="MyFunction(1, '<?php echo $ts; ?>');return false;"><?php echo $ts; ?></a></td>
etc.

DaVinc1 · July 2, 2023

<div id="myModal" class="modal">
        <div class="login-box">
            <p>Zakazivanje termina</p>
            <form method="POST">
                <div class="user-box">
                <input name="tIme" type="text" required="Please">
                <label>Ime</label>
                </div>
                <div class="user-box">
                <input name="tPrezime" type="text" required>
                <label>Prezime</label>
                </div>
                <div class="user-box">
                <input name="tTelefon" type="text" required>
                <label>Broj telefona</label>
                </div>
                <div class="user-box">
                <input name="tDatum" type="date" onkeydown="return false" required>
                </div>
                <div class="user-box">
                <input name="tVreme" type="text" id="timeslot">

                </div>
                <a href="#" onclick="this.closest('form').submit();">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                POŠALJI
                </a>
            </form>
        </div>
    </div>
    <section class="content" id="termin">
        <?php
        $dt = new DateTime;
        if (isset($_GET['year']) && isset($_GET['week'])) {
            $dt->setISODate($_GET['year'], $_GET['week']);
        } else {
            $dt->setISODate($dt->format('o'), $dt->format('W'));
        }
        $year = $dt->format('o');
        $week = $dt->format('W');
        ?>

        <a href="<?php echo $_SERVER['PHP_SELF'].'?week='.($week-1).'&year='.$year; ?>">Prethodna Nedelja</a>
        <a href="<?php echo $_SERVER['PHP_SELF'].'?week='.($week+1).'&year='.$year; ?>">Sledeća Nedelja</a>

        <table>
            <tr>
            <?php
            do {
                if($dt->format('d M Y') == date('d M Y')){
                    echo "<td id='danas'>" . $dt->format('l') . "<br>" . $dt->format('d M Y') . "</td>\n";
                }else{
                    echo "<td>" . $dt->format('l') . "<br>" . $dt->format('d M Y') . "</td>\n";
                }
                
                $dt->modify('+1 day');
            } while ($week == $dt->format('W'));
            ?>
            </tr>
            <?php $timeslots = timeslots($duration, $cleanup, $start, $end);
                foreach($timeslots as $ts){
            ?>
            <tr>
            <td><a href="#" class="tslot" onclick="MyFunction();return false;" data-timeslot="<?=$ts->format('Y-m-d H:i')?>" ><?=$ts->format('H:i \h')?></a></td>
            <td><a href="#" class="tslot" onclick="MyFunction();return false;" data-timeslot="<?=$ts->format('Y-m-d H:i')?>" ><?=$ts->format('H:i \h')?></a></td>
            <td><a href="#" class="tslot" onclick="MyFunction();return false;" data-timeslot="<?=$ts->format('Y-m-d H:i')?>" ><?=$ts->format('H:i \h')?></a></td>
            <td><a href="#" class="tslot" onclick="MyFunction();return false;" data-timeslot="<?=$ts->format('Y-m-d H:i')?>" ><?=$ts->format('H:i \h')?></a></td>
            <td><a href="#" class="tslot" onclick="MyFunction();return false;" data-timeslot="<?=$ts->format('Y-m-d H:i')?>" ><?=$ts->format('H:i \h')?></a></td>
            <td><a href="#" class="tslot" onclick="MyFunction();return false;" data-timeslot="<?=$ts->format('Y-m-d H:i')?>" ><?=$ts->format('H:i \h')?></a></td>
            <td><a href="#" class="tslot" onclick="MyFunction();return false;" data-timeslot="<?=$ts->format('Y-m-d H:i')?>" ><?=$ts->format('H:i \h')?></a></td>
            </tr>
                <?php } ?>
            
        </table>
        <span>Odaberite željeno vreme.</span>
    </section>

Did I understand it right?

    <script type='text/javascript'>
        $(function() {    
            $(".tslot").click(function() {
                let timeslot = $(this).data("timeslot")
                $("#timeslot").val(timeslot)
            })
  
        })
    </script>

DaVinc1 · July 2, 2023

29 minutes ago, gizmola said:

You have painted yourself into a bit of a corner because the Dates computed in the first row are disconnected from the time period slots. When you click on a cell in the table, you not only need to determine what the time period is, but also what day that time period is relevant to. This is essentially what Barand is trying to help with.

That's because I am not familiar with php and started learning it while doing this project. Maybe it's my xampp mysql table that's bad...

Edited July 2, 2023 by DaVinc1

gizmola · July 2, 2023

Please read my updated post. It has nothing to do with the database. It is the way you created the html table of dates and times. The dates in the first table row are in no way connected to the times, and I don't think Barand saw that. If you had one unified computation that would be a better solution, but I basically provided you a hacky way of getting to where you want to be, albeit in a less elegant way. Using data-* elements are a better practice for connecting static data to html elements, which would be simpler, but you would also have to rewrite things that already work for you, and I would suggest you just get it working with what you have.

DaVinc1 · July 2, 2023

14 minutes ago, gizmola said:

Please read my updated post. It has nothing to do with the database. It is the way you created the html table of dates and times. The dates in the first table row are in no way connected to the times, and I don't think Barand saw that. If you had one unified computation that would be a better solution, but I basically provided you a hacky way of getting to where you want to be, albeit in a less elegant way. Using data-* elements are a better practice for connecting static data to html elements, which would be simpler, but you would also have to rewrite things that already work for you, and I would suggest you just get it working with what you have.

Should this be it?

<div id="myModal" class="modal">
        <div class="login-box">
            <p>Zakazivanje termina</p>
            <form method="POST">
                <div class="user-box">
                <input name="tIme" type="text" required="Please">
                <label>Ime</label>
                </div>
                <div class="user-box">
                <input name="tPrezime" type="text" required>
                <label>Prezime</label>
                </div>
                <div class="user-box">
                <input name="tTelefon" type="text" required>
                <label>Broj telefona</label>
                </div>
                <div class="user-box">
                <input name="tDatum" type="date" onkeydown="return false" required>
                </div>
                <div class="user-box">
                <input name="tVreme" id="tVreme" type="text" required>

                </div>
                <a href="#" onclick="this.closest('form').submit();">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                POŠALJI
                </a>
            </form>
        </div>
    </div>
    <section class="content" id="termin">
        <?php
        $dt = new DateTime;
        if (isset($_GET['year']) && isset($_GET['week'])) {
            $dt->setISODate($_GET['year'], $_GET['week']);
        } else {
            $dt->setISODate($dt->format('o'), $dt->format('W'));
        }
        $year = $dt->format('o');
        $week = $dt->format('W');
        ?>

        <a href="<?php echo $_SERVER['PHP_SELF'].'?week='.($week-1).'&year='.$year; ?>">Prethodna Nedelja</a>
        <a href="<?php echo $_SERVER['PHP_SELF'].'?week='.($week+1).'&year='.$year; ?>">Sledeća Nedelja</a>

        <table>
            <tr>
            <?php
            do {
                if($dt->format('d M Y') == date('d M Y')){
                    echo "<td id='danas'>" . $dt->format('l') . "<br>" . $dt->format('d M Y') . "</td>\n";
                }else{
                    echo "<td>" . $dt->format('l') . "<br>" . $dt->format('d M Y') . "</td>\n";
                }
                
                $dt->modify('+1 day');
            } while ($week == $dt->format('W'));
            ?>
            </tr>
            <?php $timeslots = timeslots($duration, $cleanup, $start, $end);
                foreach($timeslots as $ts){
            ?>
            <tr>
            <td><a href="#" onclick="MyFunction(0, '<?php echo $ts; ?>');return false;"><?php echo $ts; ?></a></td>
            <td><a href="#" onclick="MyFunction(0, '<?php echo $ts; ?>');return false;"><?php echo $ts; ?></a></td>
            <td><a href="#" onclick="MyFunction(0, '<?php echo $ts; ?>');return false;"><?php echo $ts; ?></a></td>
            <td><a href="#" onclick="MyFunction(0, '<?php echo $ts; ?>');return false;"><?php echo $ts; ?></a></td>
            <td><a href="#" onclick="MyFunction(0, '<?php echo $ts; ?>');return false;"><?php echo $ts; ?></a></td>
            <td><a href="#" onclick="MyFunction(0, '<?php echo $ts; ?>');return false;"><?php echo $ts; ?></a></td>
            <td><a href="#" onclick="MyFunction(0, '<?php echo $ts; ?>');return false;"><?php echo $ts; ?></a></td>
            </tr>
                <?php } ?>
            
        </table>
        <span>Odaberite željeno vreme.</span>
    </section>

<script type='text/javascript'>
        function MyFunction(col, time) {
            const tbl = document.getElementById("myTable");
            let dateValue = tbl.rows[0].cells[col].innerHTML;
        }
</script>

Because somehow the entire section disappeared:
https://imgtr.ee/image/ItzPh

Edited July 2, 2023 by DaVinc1

gizmola · July 2, 2023

No you missed the fact that the column needs to be incremented for each cell.

MyFunction(0,
MyFunction(1,
MyFunction(2,
...
MyFunction(6,

gizmola · July 2, 2023

Also, you have not given your table an id. In my example, it would need to be

<table id="myTable">

DaVinc1 · July 2, 2023

2 minutes ago, gizmola said:
No you missed the fact that the column needs to be incremented for each cell.
MyFunction(0,
MyFunction(1,
MyFunction(2,
...
MyFunction(6,

1 minute ago, gizmola said:
Also, you have not given your table an id. In my example, it would need to be
<table id="myTable">

Fixed it but still, the whole table is missing

gizmola · July 2, 2023

As for it disappearing, there's clearly some bug in your code. I don't know exactly what your code looks like, but you need to debug the html using devtools, to see what has gone wrong. You should revert the changes suggested by Barand, back to your original code if you plan to use the ideas I have proposed. They are based on your original code.

gizmola · July 2, 2023

To be clear that refers to changes to the timeslots function. Put that back to the way it was in your original post.

DaVinc1 · July 2, 2023

Okey firstly thank you from the bottom of my heart, you are helping me so much I would be stuck on this problem forever if it weren't for you. I owe you so much.

I fixed the disappearing issue, but I guess I'm back to the first problem:
https://imgtr.ee/image/h7e9u

Edited July 2, 2023 by DaVinc1

gizmola · July 2, 2023

You also did not see that I did not provide you the complete code for setting the 2 form element values.

Prior to adding that code you first should console.log the values inside MyFunction so that you can test that the onclick is doing what you want it to do.

<script type='text/javascript'>
        function MyFunction(col, time) {
            const tbl = document.getElementById("myTable");
            let dateValue = tbl.rows[0].cells[col].innerHTML;
            console.log('dateValue:  ' + dateValue);
        }
</script>

gizmola · July 2, 2023

Pictures of code don't help either of us. If you need to, you can paste your code into the forum here, or you can use a pastebin like the one on my site here: https://forum.gizmola.com/pastebin/

DaVinc1 · July 2, 2023

Perfectly it's grabbing the date, the only thing left is the time:
https://imgtr.ee/image/h7ThC

Code: https://forum.gizmola.com/pastebin/?c17f03b38d4aa6d0#EEDo58B3QwHG2fenP5sZwVNAcZk9G5nHKkm7TwpsfhdP

Edited July 2, 2023 by DaVinc1

DaVinc1 · July 2, 2023

This is my app.js:

var now = new Date();
var y = now.getFullYear();
var m = now.getMonth() + 1;
var d = now.getDate();

m = m < 10 ? "0" + m : m;
d = d < 10 ? "0" + d : d;

document.querySelector("input[type=date]").value = y + "-" + m + "-" + d;

///

var modal = document.getElementById("myModal");

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

Maybe it's creating some problem...

Edited July 2, 2023 by DaVinc1

gizmola · July 2, 2023

The time is being passed as the 2nd parameter as a string. In my function it was named time. If you console.log('Time:' + time); you should see the value.

DaVinc1 · July 2, 2023

11 minutes ago, gizmola said:

The time is being passed as the 2nd parameter as a string. In my function it was named time. If you console.log('Time: time); you should see the value.

My god it's working I thought I'll never see this day coming 😅

How do I connect it with input now so it get's auto filled?
If it's even possible of course.

Edited July 2, 2023 by DaVinc1

gizmola · July 2, 2023

You should see a pattern by this point, in terms of how you select a dom element in html.

So long as the element has an id, you can use:

let someVar = document.getElementById('someId');

So that is one way. You did not give your form elements id attributes. It would be simpler if you did in this case.

However, there are other ways to select an element into a javascript variable. Since you did use name attributes, you can use that. However, the same name can be used for multiple elements, so you would need to do this instead.


    function MyFunction(col, time) {
      const tbl = document.getElementById("myTable");
      let dateValue = tbl.rows[0].cells[col].innerHTML;
      console.log('dateValue:  ' + dateValue);
      let dateEl = document.getElementsByName("tDatum");
      let timeEl = document.getElementsByName("tVreme");
      dateEl[0].value = dateValue;
      timeEl[0].value = time;
    }

You reference the 0th element in the arrays returned by getElementsByName, which is fine in this case, because we know that there is only one form element with that name in your html document.

gizmola · July 2, 2023

This is going to be a little more complicated with your date string, because you will need to turn the date string back into a valid javascript date, so that you set your form date element value. See if you can figure out how to do that. I'll give you a hint, on how to strip out the <br> tag from the date string, leaving you only with the text.

    function MyFunction(col, time) {
      const tbl = document.getElementById("myTable");
      let dateValue = tbl.rows[0].cells[col].innerHTML;
      console.log('dateValue:  ' + dateValue);
      dateValue = dateValue.replace('<br>', ' ');
      let dateEl = document.getElementsByName("tDatum");
      let timeEl = document.getElementsByName("tVreme");
      dateEl[0].value = dateValue;
      timeEl[0].value = time;
    }

Another hint: google for javascript Date.parse()

DaVinc1 · July 2, 2023

Is there a way maybe to make all dates before today unclickable?

Edited July 2, 2023 by DaVinc1

gizmola · July 2, 2023

HTML5 date inputs have a min/max attributes you can set. See the mozillla page.

Sign In

Can anyone please help!? It's urgent

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information