从<a> tag too an Html Form

时间:2018-08-09 00:38:43

标签: php jquery html forms web

I want to make a booking page for my website. There are divs which the user can click on that will open up a form that asks for their information required to book a date for the lesson, and a time slot. The problem is i do not know how to pass the time that was selected when the user clicks on the booking card( tag inside of a div)

Here is the Code:

HTML:

    <div class="book_card" id="Tues1" style="visibility: <?=$TuesV1?>">
        <a class="booklnk" href="#" id='<?=$Tues1?>'>
        <p1><?=$Tues1?></p1>
        <p2><?=$TuesA1?></p2>
      </a>
      </div>
      <div class="book_card" id="Tues2" style="visibility:<?=$TuesV2?>">
        <a class="booklnk" href="#" id='<?=$Tues2?>'>
        <p1><?=$Tues2?></p1>
        <p2><?=$TuesA2?></p2>
      </a>
      </div>

PHP: 
    $ARR_BOOK = [];
    $ARR_DAYS = ['Tues', 'Fri', 'Sat'];
     while($row = mysqli_fetch_array($result)){
      $ARR_BOOK[] = $row;
    }

    foreach ($ARR_DAYS as $DAY) {
      ${'count'.$DAY} = 0;
      ${$DAY.'V1'} = "visible";
      ${$DAY.'A1'} = "Join The Waiting List!";
      ${$DAY.'1'} = "No Spaces Available";
    }

    foreach ($ARR_BOOK as $DATA) {
      if(in_array($DATA[0], $ARR_DAYS)){
    ${'count'.$DATA[0]} += 1;
    ${$DATA[0].${'count'.$DATA[0]}} = $DATA[1];
    ${$DATA[0].'V'.${'count'.$DATA[0]}} = "visible";
    ${$DATA[0].'A'.${'count'.$DATA[0]}} = "Available";
      }
     }

1 个答案:

答案 0 :(得分:0)

这里以一个示例为例,使用一些简单的jQuery和巧妙的链接构造以表格形式填充数据:

$('.booklnk').click(function(e){ 
  //prevent default link click
  e.preventDefault();
  //get the data from the link that was clicked
  var time = $(this).data('time');
  //modify the form so when the user submits it the field is sent
  //tip, you can change the input from type="text" to type="hidden"
  //so the user cannot see it, but for example purpose it's easier to show it.
  $('#my_fld').val(time);

  return false; //helps prevent double click link access
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="test_form">
     <input type="text" name="my_fld" id="my_fld" value="" />
</form>

<div class="book_card" id="Tues1" >
     <a class="booklnk" href="#" data-time="2018-08-08 21:9:27" >Click Me</a>
    <!-- make you life easier by putting the data in the data attribute of the link -->
    <!-- as with any HTML this can be set serverside when building the page such as  <a class="booklnk" href="#" data-time=<?php echo $timeslot; ?>" .. -->

</div>

注意-这不是完整的答案,因为我仍然很困惑

  • 用户可以单击某些div来打开一个表单

我没有看到任何表格

  • 用户点击预订卡(div内的标签)

哪个标记位于哪个div

  • 问题是我不知道如何打发时间

时间在哪里(具体来说)