ProductInfo van de index in een popup weergeven.

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Jos Duis

Jos Duis

15/03/2017 05:03:53
Quote Anchor link
goedemorgen,

Ben een beginner in de javascript enz. en bezig met een webshop.
Nou wil ik de product info die in de mysql database staat in een popupje weergeven na het klikken op de meer info button. Heb me er in verdiept maar kom er niet helemaal uit.

De formulier naam op de indexpagina is form1 en de betreffende productinfo is in een tabel gezet met php en via css verborgen.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
echo '<tr><td><input type="button" value="Meer info" onclick="window.open(\'popup.html\',\'naam\',\'width=250,height=250\');return false"/></td></tr>';

echo '<tr class="product-description"><td id="product-description">'.$row['description'].'</td></tr>';


In popup.html heb ik het volgende:

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
<!DOCTYPE html>
<html>
<head><title>ProductInformatie</title>
<script>
function initializeMainDiv() {
var formulier1 = document.getElementsByName('form1');
var productDescr = formulier1.getElementsById["product-description"];
productDescrValue = productDescr.value;
document.getElementById("product-info-form").innerHTML = productDescrValue;

}
</script>
</head>
<body onload="initializeMainDiv();">
<div id="product-info-form">

</div></body>
</html>


Wat ik ook probeer ik krijg blanke pagina en via de developertools van chrome :

Uncaught TypeError: Cannot read property 'product-description' of undefined
at initializeMainDiv (popup.html:7)
at onload (popup.html:14)
initializeMainDiv @ popup.html:7
onload @ popup.html:14
~

Nou gebruik ik wisselend ('') en [""] maar zo stond dat op w3schools.com
Maar zoals ik al zei wat ik ook probeer krijg telkens undefined.


Bedankt alvast voor ieders hulp.
 
PHP hulp

PHP hulp

23/05/2024 16:10:17
 
Ward van der Put
Moderator

Ward van der Put

15/03/2017 10:46:52
Quote Anchor link
Volgens mij kun je het beter anders aanpakken. Zet de productbeschrijving niet in een verborgen <td> maar in een aparte <div> voor de volledige pop-up. Zet de CSS-eigenschap display van die <div> op none met CSS en vervolgens met JavaScript op block bij het klikken op de knop. Die opzet is zó eenvoudig dat je daarvoor niet eens een aparte functie nodig hebt.

Schematisch:
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
<html>
  <head>
    <title>Foo Bar</title>

    <style>
      #productInfoPopup {
        display: none;
      }
    </style>

  </head>
  <body>

    <div id="productInfoPopup">
      <h2>Foo Bar</h2>
      <p>Lorem ipsum dolor sit amet ...</p>
    </div>
    
    <button onclick="document.getElementById('productInfoPopup').style.display='block'">Meer info</button>

  </body>
</html>
 
Jos Duis

Jos Duis

15/03/2017 12:17:47
Quote Anchor link
Je hebt gelijk dat is een makkelijkere weg haha.
Dank je wel!
 



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.