Jump to content

rich_web_development

Members
  • Posts

    35
  • Joined

  • Last visited

Profile Information

  • Location
    England

rich_web_development's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. <script> var buttons = document.getElementsByClassName("add-panel"); for(var i = 0; i < buttons.length; i++) { buttons[i].addEventListener("click", addPanel, false); } var panels = []; function addPanel(e) { // Get a reference to the button that was clicked var button = e.currentTarget; var value = button.getAttribute("data-value"); if(panels.indexOf(value) == -1) { // Add the button's value to the array panels.push(value); // Display the contents of the array on the page by generating <li> elements. var demo = document.getElementById("demo"); demo.innerHTML = ""; var li; for(var i = 0; i < panels.length; i++) { li = document.createElement("li"); li.innerHTML = panels[i]; demo.appendChild(li); } } } </script> Thanks. Got it. "This method returns -1 if the value to search for never occurs." It works You're amazing
  2. is this any good? <script> var buttons = document.getElementsByClassName("add-panel"); for(var i = 0; i < buttons.length; i++) { buttons[i].addEventListener("click", addPanel, false); } var panels = []; function addPanel(e) { // Get a reference to the button that was clicked var button = e.currentTarget; //----------------------------------------------- //Code to stop items being applied twice to array //----------------------------------------------- for(var i = 0; i < panels.length; i++){ if(panels[i] != button.getAttribute("data-value")){ console.log(panels[i]); }else{ return; } } //----------------------------------------------- //Code to stop items being applied twice to array //----------------------------------------------- // Add the button's value to the array panels.push(button.getAttribute("data-value")); // Display the contents of the array on the page by generating <li> elements. var demo = document.getElementById("demo"); demo.innerHTML = ""; var li; for(var i = 0; i < panels.length; i++) { li = document.createElement("li"); li.innerHTML = panels[i]; demo.appendChild(li); } } </script>
  3. Ok. I'll try and understand what you've given me first then I'm sure I'll be able to work the rest out. Thanks for the quick reply
  4. WOW! Thanks. I was trying all sorts of stuff for the past two days and just couldn't get my head around it. Thank you very, very, very much! Just tried it and it works I don't suppose, if it's not to much of a cheek, you can tell me how I can adjust it so that it can only add the specific product once? If I click on a button for a product twice it adds the product twice. I plan to have a quantity input underneath that I will try and implement. Again, thanks
  5. I thought you'd just be able to do something like: <!DOCTYPE html> <html> <body> <button onclick="myFunction1"> Click to add 4 Panel Smooth</button> <button onclick="myFunction2"> Click to add 4 Panel Grained</button> <p id="demo"></p> </body> </html> <script> var products = []; var products, text, fLen, i; fLen = products.length; text = "<ul>"; for (i = 0; i < fLen; i++) { text += "<li>" + products[i] + "</li>"; } text += "</ul>"; document.getElementById("demo").innerHTML = text; var btn = document.querySelector("button"); var btnClicked = btn.onclick; function myFunction1(){ if(btnClicked == true){ products.push("4 Panel Smooth"); } } function myFunction2(){ if(btnClicked == true){ products.push("4 Panel Grained"); } } </script> <!DOCTYPE html> <html> <head> <title>What I want it to do</title> </head> <body> <h1>What I want to achieve</h1> <button type="button" id="button1" onclick="myFunction()">Add 4 Panel Smooth</button><br><br> <button type="button" id="button2" onclick="myFunction1()">Add 4 Panel Grained</button><br><br> <button type="button" id="button3" onclick="myFunction2()">Add 4 Panel Grained 2 Glazed</button><br><br> <p id="demo"></p> <script> var products = []; function myFunction1(){ //if button 1 clicked add "4 Panel Smooth" to products array } function myFunction2(){ //if button 2 clicked add "4 Panel Grained" to products array } function myfunction3(){ //if button 3 clicked add "4 Panel Grained Glazed" to products array } var products, text, fLen, i; fLen = products.length; text = "<ul>"; for (i = 0; i < fLen; i++) { text += "<li>" + products[i] + "</li>"; } text += "</ul>"; document.getElementById("demo").innerHTML = text; //Itterate through any items that get applied to products array </script> </body> </html> I want to be able to add products to an array, when a button is clicked for that specific product, then display the products that have been clicked on by iterating through the products. Say, just for example, I have three products and when the button is clicked on product 1 and 3 then they will be displayed by being iterated over(same kind of thing you do with PHP and MySQL, select products from database, display them by iterating over them). I have been trying all types of things to try and understand how to do it but I just don't understand JavaScript well enough. I come across a problem of the array needing to be updated from multiple functions. I thought you would just be able to have one single array then click a button to call a function that would add the product to the array but the variables in the function can't be accessed outside the function. So if, I press the button linked to a specific product that calls a function to push an item to the products array, because push would be in a variable inside a function I can't get it to access the array, the array has to be outside the function so that other functions can add products to the array. I would very much appreciate if someone could help me sort this out.
  6. Hi, Sorry, in advance, if this is a simple question. I want to be able to use CSS combinators to select two child elements of a parent element. I know it can be done various other ways. Could someone please let me know if I can use combinators to achieve this effect. So for example: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> /* I want to achieve this effect WITH COMBINATORS! but header h1 and p selected in one go instead of having to do it twice */ header > h1{ color:red; } header > p{ color:red; } main > h1{ color:green; } main > p{ color: green; } /* texts stays black/* /*header h1 > p{ color: red; }*/ /* text stays black */ /*header + h1 p{ color:red; }*/ /* Text stays black/* /*header + h1 + p{ color:red; }*/ /*Only the p is red header > h1 + p{ color:red; }*/ /*header > h1 p{ color:red; }*/ /*Doesn't work header > h1 > p{ color:red; }*/ /*Doesn't work header h1 p{ color:red; }*/ </style> </head> <body> <header> <h1>Some text</h1> <p>Some more text</p> </header> <main> <h1>Some text</h1> <p>Some more text</p> </main> </body> </html>
  7. I didn't mean that you showed me only static. I rushed my last post and I'm still learning about all this web dev stuff. Apologies for my post being unclear. Thanks for all your help and advice.
  8. Thanks for that. I just commented out the w3custom-list > p b + span {display: inline-block; width: 68%;} bit and now the static text and the info line up side by side. I have another problem now. Now that I have the photos and info coming from a database so I have no need for the static information for example: <div class="w3-third w3-container w3-margin-bottom"> <img src="parkhome8.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity"> <div class="w3-container w3-white w3custom-list"> <p><b>Name</b> <span>Holiday home</span></p> <p><b>Bedrooms</b> <span>3</span></p> <p><b>Width</b> <span>20</span></p> </div> So I've deleted the above and changed it to the following: <?php // edited from here $stmt = $conn->prepare("SELECT name, bedrooms, length, width, mainpic, serialno FROM holidayhomes"); $stmt->execute(); $stmt->bind_result($name, $bedrooms, $length, $width, $mainpic, $serialno); $result = $stmt->get_result(); $rows = $result->num_rows; for ($j = 0 ; $j < $rows ; ++$j) { $result->data_seek($j); $row = $result->fetch_array(MYSQLI_NUM); echo <<<_END <!-- First Photo Grid--> <div class="w3-row-padding"> <div class="w3-third w3-container w3-margin-bottom"> <img src="/uploads/$row[4]" alt="holiday home" style="width:100%;max-height:174px;" class="w3-hover-opacity"> <div class="w3-container w3-white w3custom-list"> <p><b>Name</b> <span>$row[0]</span></p> <p><b>Bedrooms</b> <span>$row[1]</span></p> <p><b>Width</b> <span>$row[2]</span></p> <p><b>Length</b> <span>$row[3]</span></p> <p><b>SerialNo</b> <span>$row[5]</span></p> </div> </div> _END; } $result->close(); $conn->close(); ?> So now that I've deleted the static part all of the grey background collapses underneath and everything is moved up underneath the photo and info of what is displayed from my database. So when the page was displayed with static content the photos and info were above a pagination which all of this was on a grey background with a footer underneath all of the above. Now I'm pulling the photos and the info from a database everything that was below and behind the photos and info have collapsed up underneath the photos and info. Actually, I think I have it. I just put some margin-top on the pagination. Although when the browser is smaller it leaves a big gap so will have to change the margin-top on the pagination when the browser is smaller.
  9. That is amazing. Thank you very much. When the browser is small the static text and info line up side by side which is exactly what I wanted to achieve. When the browser is full screen the info appears underneath the static text. Is there a way for the info to be displayed side by side with the static text when the browser is in full screen? Is there something wrong with the w3schools website? When I visit a page it jumps to the bottom of the page and starts playing some video with music. Just went to a page and it started playing some ad for Thomson Cruises.
  10. Hi, I'm trying to edit the W3.CSS portfolio template. The part I want to edit looks as follows: <!-- First Photo Grid--> <div class="w3-row-padding"> <div class="w3-third w3-container w3-margin-bottom"> <img src="parkhome8.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity"> <div class="w3-container w3-white"> <p><b>Lorem Ipsum</b></p> <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p> </div> </div> <div class="w3-third w3-container w3-margin-bottom"> <img src="parkhome8.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity"> <div class="w3-container w3-white"> <p><b>Lorem Ipsum</b></p> <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p> </div> </div> <div class="w3-third w3-container"> <img src="parkhome8.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity"> <div class="w3-container w3-white"> <p><b>Lorem Ipsum</b></p> <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p> </div> </div> </div> I want to edit it so that instead of just some text I want to achieve something like as below the following: Name: Holiday home Bedrooms: 3 Width: 20 So that 'Name: Bedrooms: Width:' will be static text and the info next to it will be pulled from a database. The problem is getting the info to line up nice and neat and getting it to act responsive when the size of the screen/browser is different/changed. I've tried it with a list but I just cannot work out how to get the static part 'Name: Bedrooms: Width' and then the info part 'Holiday home, 3, 20' to line up nice an neat (like it is above) and get it responsive. If someone could suggest the best way to get this to work I would be very grateful.
  11. Thank you very much. I think I have it now. Well, it works anyway. Although where should I place the '$result->close(); $conn->close();' within the below code? I have changed the code as follows: <?php require_once 'login.php'; $conn = new mysqli($hn, $un, $pw, $db); if ($conn->connect_error) die($conn->connect_error); if (isset($_POST['delete'])&& isset($_POST['serialno'])) { $serialno = mysql_entities_fix_string($conn, 'serialno'); $query = "DELETE FROM holidayhomes WHERE serialno='$serialno'"; $result = $conn->query($query); if (!$result) echo "DELETE failed: $query<br>" . $conn->error . "<br><br>"; } if (isset ($_POST['name']) && isset ($_POST['bedrooms']) && isset ($_POST['length']) && isset ($_POST['width']) && isset ($_POST['serialno'])) { $name = mysql_entities_fix_string ($conn, 'name'); $bedrooms = mysql_entities_fix_string ($conn, 'bedrooms'); $length = mysql_entities_fix_string ($conn, 'length'); $width = mysql_entities_fix_string ($conn, 'width'); $serialno = mysql_entities_fix_string ($conn, 'serialno'); // $query = "INSERT INTO holidayhomes (name, bedrooms, length, width, serialno) VALUES ('$name','$bedrooms', '$length', '$width', '$serialno')"; $stmt = $conn->prepare("INSERT INTO holidayhomes (name, bedrooms, length, width, serialno)VALUES(?,?,?,?,?)"); $stmt->bind_param("sssss", $name, $bedrooms, $length, $width, $serialno); $stmt->execute(); $result = $stmt->get_result(); //$result = $conn->query($query); //if (!$result) echo "INSERT failed: $query<br>" . $conn->error . "<br><br>"; } if(isset($_POST["submit"])){ $target_dir = "uploads/"; $target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]); $uploadOk = 1; $imageFileType = pathinfo($target_file, PATHINFO_EXTENSION); } if(isset($_POST["submit"])){ $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]); if($check !== false){ // echo "FIle is an image - " . $check["mime"] . "." ; $uploadOk = 1; } else { // echo "File is not an image."; $uploadOk = 0; } } // if ($uploadOk == 0){ // // echo "Sorry, your file was not uploaded."; // } else { if (isset($_POST["submit"])){ (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)); } // echo "The file " . basename( $_FILES["fileToUpload"]["name"]) . " has been uploaded."; // else { // echo "Hello!"; // } // } if(isset($_POST["submit"])){ $mainpic = basename( $_FILES["fileToUpload"]["name"]); $serialno = $_POST['serialno']; $query = "UPDATE holidayhomes SET mainpic='$mainpic' WHERE serialno='$serialno'"; $result = $conn->query($query); } // $query = "SELECT * FROM holidayhomes"; // $result = $conn->query($query); // if (!$result) die ("Database access failed: " . $conn->error); // $rows = $result->num_rows; // for ($j = 0 ; $j < $rows ; ++$j) // { // $result->data_seek($j); // $row = $result->fetch_array(MYSQLI_NUM); // } // $result->close(); // $conn->close(); // function get_post($conn, $var) // { // return $conn->real_escape_string($_POST[$var]); // } function mysql_entities_fix_string($conn, $var){ return htmlentities(mysql_fix_string($conn, $var)); } function mysql_fix_string($conn, $var){ if (get_magic_quotes_gpc()) $var = stripslashes($var); return $conn->real_escape_string($_POST[$var]); } ?> <!DOCTYPE html> <head> </head> <html> <body> <form action="PTestPreStmnt05.php" method="POST"><pre> Name <input type="text" name="name"> Bedrooms <input type="text" name="bedrooms"> Length <input type="text" name="length"> Width <input type="text" name="width"> Serial Number <input type="text" name="serialno"> <input type="submit" value="ADD RECORD"> </pre> </form> <br><br><br> <?php // $query = "SELECT * FROM holidayhomes"; // $result = $conn->query($query); // if (!$result) die ("Database access failed: " . $conn->error); $stmt = $conn->prepare("SELECT name, bedrooms, length, width, mainpic, serialno FROM holidayhomes"); $stmt->execute(); $stmt->bind_result($name, $bedrooms, $length, $width, $mainpic, $serialno); $result = $stmt->get_result(); $rows = $result->num_rows; for ($j = 0 ; $j < $rows ; ++$j) { $result->data_seek($j); $row = $result->fetch_array(MYSQLI_NUM); echo <<<_END <pre> Name: $row[0] Bedrooms: $row[1] Length: $row[2] Width: $row[3] Serial No: $row[5] MainPic: $row[4] <img src="uploads/$row[4]" width=200 height=200> </pre> _END; } $result->close(); $conn->close(); ?> <pre> <form action="PTestPreStmnt05.php" method="POST"> <input type="hidden" name="delete" value="yes"> <input type="hidden" name="serialno" value="<?php echo $row[5]?>"> <input type="submit" value="DELETE RECORD"> </form> </pre> <pre> <form action="PTestPreStmnt05.php" method="post" enctype="multipart/form-data"> Select main photo: <input type="hidden" name="serialno" value="<?php echo $row[5]?>"> <input type="file" name="fileToUpload" id="fileToUpload"> <input type="submit" value="Upload Image" name="submit"> </form> </pre> <br><br> </body> </html>
  12. I still get the same error if I remove the parens $stmt = $conn->prepare("SELECT name, bedrooms, length, width, mainpic, serialno FROM holidayhomes VALUES (?,?,?,?,?,?)"); $stmt->bind_param("ssssss", $name, $bedrooms, $length, $width, $mainpic, $serialno); $stmt->execute(); $result = $stmt->get_result();
  13. I have tried lots of different combinations to try and use prepared statements with the 'SELECT * FROM' part on line 95. I just cannot work out how to use prepared statements on this 'SELECT * FROM' part. I have tried replacing from line 95 to 97 with the following: $stmt = $conn->prepare("SELECT (name, bedrooms, length, width, mainpic, serialno) FROM holidayhomes VALUES (?,?,?,?,?,?)"); $stmt->bind_param("ssssss", $name, $bedrooms, $length, $width, $mainpic, $serialno); $stmt->execute(); $result = $stmt->get_result(); When I replace line 95 to 97 with the above code I get the following error: Fatal error: Call to a member function bind_param() on boolean in C:\xampp\htdocs\PTestPreStmnt02.php on line *the line that the bind_param is on If you could show me how to get the prepared statement working when using SELECT from the database I would be very grateful.
×
×
  • Create New...