Jump to content

Recommended Posts

* 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!!!

Screenshot (24).png

Screenshot (25).png

Edited by DaVinc1
Link to comment
https://forums.phpfreaks.com/topic/317039-can-anyone-please-help-its-urgent/
Share on other sites

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)

  • Thanks 1
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 by DaVinc1
<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>

 

  • Thanks 1

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.

 

<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>

 

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 by DaVinc1

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.

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 by DaVinc1
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

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.

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 by DaVinc1

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>

 

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 by DaVinc1
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 by DaVinc1

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.

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()

  • Thanks 1
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.