ProductInfo van de index in een popup weergeven.

Door Jos Duis op 15-03-2017 05:03

940 views

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.



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:


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

Ward van der Put

15-03-2017 10:46

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:


<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

15-03-2017 12:17

Je hebt gelijk dat is een makkelijkere weg haha.
Dank je wel!

Reageren

Inloggen om te reageren