div gebruiken in form

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Ben lubben

ben lubben

16/04/2013 08:34:22
Quote Anchor link
hallo mensen

ik ben bezig met een reserverings systeem aan het maken voor een restaurant. dit hoort bij een school opdracht dus moet wel.

nu loop ik tegen een probleem aan.
bepaalde gegevens haal ik uit de sessie zoals userid enz. verder word er gegevens gevraagd bij het reserveren . nadat de gebruiker op de knop klikt "tafel kiezen" komen er op een platte grond divjes over een platte grond op de plek waar geen reservering staat op die tijd, datum en plek.

nu zit ik met het probleem dat ik er niet uitkom dat ik een divje selecteerbaar maak zoals een radio button of een checkbox.
het mooiste is een radio button effect maar ik krijg helemaal niks voor mekaar daarmee.
hier is me code.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
        <input type="submit" value="tafel selecteren">
        </p>
        </form>
            
            <div id="reservetablepicture">
            <?php
            if (isset($_GET['day'])) {
            $resdate = $_GET['year'] . $_GET['month'] . $_GET['day'];
            $restime = $_GET['time'];
            $respers = $_GET['persons'];
            include "inc/dbconnect.php";
            
            
            $qtable1 = mysql_query("SELECT * FROM reserverules WHERE resdate = '$resdate' AND restime = '$restime' AND tableid = '1'");
            $tf1_rows = mysql_num_rows($qtable1);
            if ($tf1_rows < 1 ) {
            echo "<div id='table1' class=' '>1</div>";
            }

            $qtable2 = mysql_query("SELECT * FROM reserverules WHERE resdate = '$resdate' AND restime = '$restime' AND tableid = '2'");
            $tf2_rows = mysql_num_rows($qtable2);
            if ($tf2_rows < 1 ) {
            echo "<div id='table2' class=' '>2</div>";
            }

            $qtable3 = mysql_query("SELECT * FROM reserverules WHERE resdate = '$resdate' AND restime = '$restime' AND tableid = '3'");
            $tf3_rows = mysql_num_rows($qtable3);
            if ($tf3_rows < 1 ) {
            echo "<div id='table3' class=' '>3</div>";
            }

            $qtable4 = mysql_query("SELECT * FROM reserverules WHERE resdate = '$resdate' AND restime = '$restime' AND tableid = '4'");
            $tf4_rows = mysql_num_rows($qtable4);
            if ($tf4_rows < 1 ) {
            echo "<div id='table4' class=' '>4</div>";
            }

            $qtable5 = mysql_query("SELECT * FROM reserverules WHERE resdate = '$resdate' AND restime = '$restime' AND tableid = '5'");
            $tf5_rows = mysql_num_rows($qtable5);
            if ($tf5_rows < 1 ) {
            echo "<div id='table5' class=' '>5</div>";
            }

            $qtable6 = mysql_query("SELECT * FROM reserverules WHERE resdate = '$resdate' AND restime = '$restime' AND tableid = '6'");
            $tf6_rows = mysql_num_rows($qtable6);
            if ($tf6_rows < 1 ) {
            echo "<div id='table6' class=' '>6</div>";
            }

            $qtable7 = mysql_query("SELECT * FROM reserverules WHERE resdate = '$resdate' AND restime = '$restime' AND tableid = '7'");
            $tf7_rows = mysql_num_rows($qtable7);
            if ($tf7_rows < 1 ) {
            echo "<div id='table7' class=' '>7</div>";
            }

            $qtable8 = mysql_query("SELECT * FROM reserverules WHERE resdate = '$resdate' AND restime = '$restime' AND tableid = '8'");
            $tf8_rows = mysql_num_rows($qtable8);
            if ($tf8_rows < 1 ) {
            echo "<div id='table8' class=' '>8</div>";
            }

            $qtable9 = mysql_query("SELECT * FROM reserverules WHERE resdate = '$resdate' AND restime = '$restime' AND tableid = '9'");
            $tf9_rows = mysql_num_rows($qtable9);
            if ($tf9_rows < 1 ) {
            echo "<div id='table9' class=' '>9</div>";
            }

            $qtable10 = mysql_query("SELECT * FROM reserverules WHERE resdate = '$resdate' AND restime = '$restime' AND tableid = '10'");
            $tf10_rows = mysql_num_rows($qtable10);
            if ($tf10_rows < 1 ) {
            echo "<div id='table10' class=' '>10</div>";
            }

            $qtable11 = mysql_query("SELECT * FROM reserverules WHERE resdate = '$resdate' AND restime = '$restime' AND tableid = '11'");
            $tf11_rows = mysql_num_rows($qtable11);
            if ($tf11_rows < 1 ) {
            echo "<div id='table11' class=' '>11</div>";
            }

            $qtable12 = mysql_query("SELECT * FROM reserverules WHERE resdate = '$resdate' AND restime = '$restime' AND tableid = '12'");
            $tf12_rows = mysql_num_rows($qtable12);
            if ($tf12_rows < 1 ) {
            echo "<div id='table12' class=' '>12</div>";
            }

            $qtable13 = mysql_query("SELECT * FROM reserverules WHERE resdate = '$resdate' AND restime = '$restime' AND tableid = '13'");
            $tf13_rows = mysql_num_rows($qtable13);
            if ($tf13_rows < 1 ) {
            echo "<div id='table13' class=' '>13</div>";
            }

            $qtable14 = mysql_query("SELECT * FROM reserverules WHERE resdate = '$resdate' AND restime = '$restime' AND tableid = '14'");
            $tf14_rows = mysql_num_rows($qtable14);
            if ($tf14_rows < 1 ) {
            echo "<div id='table14' class=' '>14</div>";
            }

            $qtable15 = mysql_query("SELECT * FROM reserverules WHERE resdate = '$resdate' AND restime = '$restime' AND tableid = '15'");
            $tf15_rows = mysql_num_rows($qtable15);
            if ($tf15_rows < 1 ) {
            echo "<div id='table15' class=' '>15</div>";
            }

            $qtable16 = mysql_query("SELECT * FROM reserverules WHERE resdate = '$resdate' AND restime = '$restime' AND tableid = '16'");
            $tf16_rows = mysql_num_rows($qtable16);
            if ($tf16_rows < 1 ) {
            echo "<div id='table16' class=' '>16</div>";
            }
            }

            ?>

            
            
            
            
           </div>


hier is de css van de divjes waar het om gaat
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
#table1 {
top: 7px;
left: 8px;
background-color:green;
width: 58px;
height: 40px;
position:absolute;    opacity:0.6;
    filter:alpha(opacity=60);
}
#table1:hover {
background-color: blue;
}
#table2 {
top: 7px;
left:83px;
background-color:green;
width: 58px;
height: 40px;
position:absolute;    opacity:0.6;
    filter:alpha(opacity=60);
}
#table3 {
top: 7px;
left:158px;
background-color:green;
width: 58px;
height: 40px;
position:absolute;    opacity:0.6;
    filter:alpha(opacity=60);
}
#table4 {
top: 7px;
left:232px;
background-color:green;
width: 58px;
height: 40px;
position:absolute;    opacity:0.6;
    filter:alpha(opacity=60);
}
#table5 {
top: 7px;
left:307px;
background-color:green;
width: 58px;
height: 40px;
position:absolute;    opacity:0.6;
    filter:alpha(opacity=60);
}
#table6 {
top: 58px;
left:5px;
background-color:green;
width: 44px;
height: 50px;
position:absolute;    opacity:0.6;
    filter:alpha(opacity=60);
}
#table7 {
top: 116px;
left:5px;
background-color:green;
width: 58px;
height: 50px;
position:absolute;    opacity:0.6;
    filter:alpha(opacity=60);
}
#table8 {
top: 80px;
left:119px;
background-color:green;
width: 59px;
height: 59px;
position:absolute;    opacity:0.6;
    filter:alpha(opacity=60);
}
#table9 {
top: 80px;
left:215px;
background-color:green;
width: 59px;
height: 59px;
position:absolute;    opacity:0.6;
    filter:alpha(opacity=60);
}
#table10 {
top: 59px;
right:146px;
background-color:green;
width: 29px;
height: 53px;
position:absolute;    opacity:0.6;
    filter:alpha(opacity=60);
}
#table11 {
top: 59px;
right:116px;
background-color:green;
width: 29px;
height: 53px;
position:absolute;    opacity:0.6;
    filter:alpha(opacity=60);
}
#table12 {
top: 59px;
right:86px;
background-color:green;
width: 29px;
height: 53px;
position:absolute;    opacity:0.6;
    filter:alpha(opacity=60);
}
#table13 {
top: 156px;
left:162px;
background-color:green;
width: 66px;
height: 66px;
position:absolute;    opacity:0.6;
    filter:alpha(opacity=60);
}
#table14 {
top: 157px;
left:317px;
background-color:green;
width: 66px;
height: 66px;
position:absolute;    opacity:0.6;
    filter:alpha(opacity=60);
}

#table15 {
top: 18px;
right:4px;
background-color:green;
width: 44px;
height: 50px;
position:absolute;    opacity:0.6;
    filter:alpha(opacity=60);
}
#table16 {
top: 88px;
right:4px;
background-color:green;
width: 58px;
height: 50px;
position:absolute;    opacity:0.6;
    filter:alpha(opacity=60);
}


ik weet dat de php/mysql niet optimaal is maar dat kan ik later wel verbeteren.

weet iemand hoe ik dus zo'n div aan klikbaar kan maken voor een form?

mvg,

ben
 
PHP hulp

PHP hulp

22/09/2021 11:59:07
 
Willem vp

Willem vp

16/04/2013 09:18:02
Quote Anchor link
Om te beginnen moet je de hele div in je form opnemen.

Vervolgens moet je je afvragen of iemand maar 1 tafel mag reserveren of dat meerdere tafels ook mogelijk zijn.

Het bijhouden van een reservering kan in een hidden input. Met een onclick-event in je div en een stukje javascript kun je de reservering in die input opslaan.

Wanneer een gebruiker slechts 1 tafel mag reserveren, kun je in die input het nummer van de aangeklikte tafel opslaan:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
<input type="hidden" name="reservedtable" id="reservedtable" value="none"/>
<div id="table9" onclick="document.getElementById('reservedtable').value = '9';"></div>


Wanneer een gebruiker meerdere tafels kan reserveren, zou je voor elke tafel een hidden input kunnen maken die bijhoudt of die tafel wel of niet is gereserveerd. In je jevascript moet je dan de waarde omwisselen tussen 1 en 0 (of ja en nee).

In theorie zou die laatste oplossing ook moeten kunnen in 1 hidden input en een array, maar dat vergt wat ingewikkelder javascripting.

En doe inderdaad iets aan je php/mysql-code, want dit is heel erg inefficiënt. Hoe langer je daarmee wacht, hoe meer werk het wordt om dat netjes te maken.
Gewijzigd op 16/04/2013 09:19:25 door Willem vp
 
Ben lubben

ben lubben

16/04/2013 09:39:02
Quote Anchor link
Hallo willem vp,

Ik zit nu in de auto en zal vanmiddag even wat testen ermee.

Dat php/mysql kreeg ik gisteren niet goed voor elkaar met fetchen. Ben daar geen prof in.

Bedankt.

Mvg.
Ben
Gewijzigd op 16/04/2013 12:45:45 door ben lubben
 
Teun Hesseling

Teun Hesseling

16/04/2013 09:50:03
Quote Anchor link
Je zou dat op kunnen lossen door 1 qeury te maken en vervolgens met een
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
<?php while($row = mysql_fetch_assoc)
?>
er dooorheen lopen. En dan de id van je mysql gebruiken als tafel nummer.
Dan krijg je zoiets:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<?php echo '<div id="table'.$row['id'].'" class=" ">'.$row['id'].'</div>'; ?>
Gewijzigd op 16/04/2013 09:51:41 door Teun Hesseling
 
Ben lubben

ben lubben

16/04/2013 12:55:51
Quote Anchor link
hallo,

bedankt teun. ik heb hem nu een stuk korter.
het ziet er nu zo uit
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
            $querytable = mysql_query("SELECT tableid FROM reserverules WHERE resdate = '$resdate' AND restime = '$restime' ");
            while($row = mysql_fetch_assoc($querytable))
            
            
            echo "<div id='table" . $row['tableid'] . "'>" .$row['tableid']. "</div>";


nu heb ik nog het probleem met het aanklikken van de div. ik ben er al vaker tegenaan gelopen en krijg het nooit voor mekaar om een onklick te gebruiken in een echo.

verder heb ik nu het probleem met de query dat hij de tafels toont die gereserveerd zijn ipv de tafels die nog niet gereserveerd zijn.

alvast bedankt voor de moeite.

mvg,

ben
 
Willem vp

Willem vp

16/04/2013 13:07:55
Quote Anchor link
Ben lubben op 16/04/2013 12:55:51:
nu heb ik nog het probleem met het aanklikken van de div. ik ben er al vaker tegenaan gelopen en krijg het nooit voor mekaar om een onklick te gebruiken in een echo.

Kun je eens laten zien wat je geprobeerd hebt dan? Ik gok dat het een probleem is met de quotes.

Je zou het eens met een heredoc kunnen proberen; zelf vind ik dat vaak handiger dan een simpele string echo'en, omdat je dan geen rekening hoeft te houden met het escapen van quotes:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
<?php
   $tableid
= $row['tableid'];
   echo <<<EOT
<div id="table$tableid" onclick="document.getElementById('reservedtable').value = '$tableid';">
   $tableid
</div>
EOT
;
?>
Gewijzigd op 16/04/2013 13:08:35 door Willem vp
 
Ben lubben

ben lubben

16/04/2013 16:18:52
Quote Anchor link
Willem vp op 16/04/2013 13:07:55:
Je zou het eens met een heredoc kunnen proberen; zelf vind ik dat vaak handiger dan een simpele string echo'en, omdat je dan geen rekening hoeft te houden met het escapen van quotes:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
<?php
   $tableid
= $row['tableid'];
   echo <<<EOT
<div id="table$tableid" onclick="document.getElementById('reservedtable').value = '$tableid';">
   $tableid
</div>
EOT
;
?>


dit gaat ook niet werken. zover ik er verstand van heb is omdat $row['tableid'] meerdere variables heeft. dit kan je volgens mij niet zomaar naar 1 variable worden geplaatst. dan pakt hij maar 1 mee wat hij ook bij mij deed. hiermee werkt het klikken erop wel.

de regel die ik nu gebruik is:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
echo "<div id='table" . $row['tableid'] . "' onclick = 'document.getElementById('reservedtable').value =' " . $row['tableid'] . " '>" .$row['tableid']. "</div>";

hij geeft geen error maar hij werkt ook niet.

mvg,

ben
 
Willem vp

Willem vp

17/04/2013 00:35:10
Quote Anchor link
Quote:
dit gaat ook niet werken. zover ik er verstand van heb is omdat $row['tableid'] meerdere variables heeft. dit kan je volgens mij niet zomaar naar 1 variable worden geplaatst.

Het klopt niet helemaal wat je zegt. Je komt namelijk zo aan $row:

while($row = mysql_fetch_assoc($querytable))

Hier haal je dus steeds 1 rij op uit de database. Per keer dat je het blok while-code uitvoert heeft $row['tableid'] dus 1 waarde (die wel steeds zou moeten wijzigen).

Als ik naar je eerdere code kijk, vermoed ik dat je geen {} hebt gebruikt om het blok code dat bij je while hoort af te bakenen. PHP neemt dan alleen het eerste statement na de while (de $tableid=$row['tableid']), voert dat 16 keer uit en voert daarna nog eens de echo uit; je krijgt dan alleen de laatst opgehaalde tafel te zien.
De code zou dus moeten worden:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
<?php
$querytable
= mysql_query("SELECT blablabla");
while($row = mysql_fetch_assoc($querytable))
{

   $tableid = $row['tableid'];
   echo <<<EOT
<div id="table$tableid" onclick="document.getElementById('reservedtable').value = '$tableid';">
   $tableid
</div>
EOT
;
}

?>

De echo die jij daarna postte is in principe gelijkwaardig aan de echo hierboven, alleen moet je een beetje klieren met de quotes om het werkend te krijgen. Als ik kijk naar het onclick-gedeelte:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
onclick = 'document.getElementById('reservedtable').value =' " . $row['tableid'] . " '>"

dan zet je de onclick-code tussen enkele quotes, maar binnen de code gebruik je ook enkele quotes en PHP weet dan niet wat bij wat hoort. Je moet dus gaan escapen. Dat kan op twee manieren:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
onclick = 'document.getElementById(\'reservedtable\').value =' " . $row['tableid'] . " '>"
onclick = \"document.getElementById('reservedtable').value =' " . $row['tableid'] . " \">"

Let op de backslashes die ik heb toegevoegd. Die geven aan dat de betreffende quote geen afsluiter van een string is, maar juist tot de string behoort. Overigens kun je beter de tweede manier gebruiken, omdat bij de eerste manier je hetzelfde probleem gaat krijgen in de gegenereerde HTML. Dat is precies de reden dat ik zo gek ben op de heredoc-notatie; je hoeft niet meer te prutsen met je quotes.
 
Ben lubben

ben lubben

17/04/2013 11:12:21
Quote Anchor link
Willem vp op 17/04/2013 00:35:10:
Als ik naar je eerdere code kijk, vermoed ik dat je geen {} hebt gebruikt om het blok code dat bij je while hoort af te bakenen. PHP neemt dan alleen het eerste statement na de while (de $tableid=$row['tableid']), voert dat 16 keer uit en voert daarna nog eens de echo uit; je krijgt dan alleen de laatst opgehaalde tafel te zien.
De code zou dus moeten worden:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
<?php
$querytable
= mysql_query("SELECT blablabla");
while($row = mysql_fetch_assoc($querytable))
{

   $tableid = $row['tableid'];
   echo <<<EOT
<div id="table$tableid" onclick="document.getElementById('reservedtable').value = '$tableid';">
   $tableid
</div>
EOT
;
}

?>

De echo die jij daarna postte is in principe gelijkwaardig aan de echo hierboven, alleen moet je een beetje klieren met de quotes om het werkend te krijgen. Als ik kijk naar het onclick-gedeelte:


ik heb deze code gecopierd en het werkte.
ik moet dus blijkbaar echt nog veel leren. iedereen super bedankt.

ik moet nu nog even me query aanpassen zodat ik alleen de lege tafels krijg en niet alleen de gereserveerden en moet ik nog uitzoeken dat de geselecteerde tafel een ander kleurtje krijgt, dit probeer ik zelf uit te zoeken (denk met jquery ofzo).

iedereen bedankt voor het helpen.

mvg,

ben
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.