PNewCode

Hello. I have 2 different questions running at one time today. My apologies if that is annoying. For this task, I am wanting to show the images that are from an array of different file names. What I have now shows all of them in the echo. I even understand why it's doing that. Where I'm puzzled and stuck is how to limit it to what is only showing in the entry. Right now, there is only "1.png", "6.png" in the database (one row, one column named emotes2) And it's showing all 8 instead of just those 2 (like I said, I know why it is, but I don't know how to fix it.. see below) What I tried to do is change the array to $emotes2s = array(" '. $row["emotes2"] .' "); ////// OR ////// $emotes2s = array( echo $row["emotes2"]; ); And several variations of that, but no luck. Here is my code $emotes2s = array("1.png", "2.png", "3.png", "4.png", "5.png", "6.png", "7.png", "8.png"); foreach ($emotes2s as $emotes2) { echo "<img src='img-picker/images/$emotes2' width='35'/>"; } } else { echo ''; }

So I'm guessing that it means there's an issue passing the id of the row. I don't have a clue how to correct that through ajax. Ugh

@requinix That is the entire action.js file. I didn't write this, it's a sample I got online. It works fine for posting stuff but I can't get a delete to work. I didn't check with the consol actually. I didn't think of that. I just meant no onscreen errors (I should have clarified that sorry) Here is a screen shot of the consol error. I blurred out the web address because I'm not allowed to display it in forums (not my rules)

I chose the php help because the before and after of this process is php I have a successful way to add entries to the database without leaving the page using ajax and php. I tried to change it up to use it to delete a record in the same way with zero success. After several days of searching and trying, below is what I have come to. Can someone please help me out? Thank you so much What is happening currently, is nothing. No errors, or action. The page just "blinks" like a refresh and adds a # at the end of the URL action.js $(document).ready(function() { $('#manage_delete_post').submit(function(e) { e.preventDefault() $.ajax({ url: 'delete-post-2.php?id=".$row['id']."', data: $(this).serialize(), method: 'POST', success: function(resp) { $('#error_msg_back').html(resp); } }) }) }) The page with the delete button (placed in the row with the id of the entry) index.php <form action="#" method="post" id="manage_delete_post"> <div class="form-group"> <button class="btn btn-success button pointer" type="submit"><img src="btn/trash12.png" width="32"></button> </div></form> <script src="action.js"></script> And here is the delete-post-2.php <script> document.addEventListener('contextmenu', event => event.preventDefault()); </script> <?php error_reporting(E_ALL); ini_set('display_errors', 1); $servername = "localhost"; $username = "stuff"; $password = "stuff"; $dbname = "stuff"; $id = $_GET['id']; $conn = new mysqli($servername, $username, $password, $dbname); // Check connection if (!$conn) { die("Connection failed: " . mysqli_connect_error()); } // sql to delete a record $sql = "DELETE FROM livechat_chat WHERE id = $id"; $results = mysqli_query($connection, $sql); if($results) { echo "<div id='hideMe'>CHANGES ARE SAVED!</div>"; } else { echo "<div id='hideMe'>Changes failed, Please Try Again</div>"; }

Stemming of the question with resolution by @mac_gyver , I'm taking that education to add something new. And it works beautifully UNTIL I try it with the gradient Objective, to have instant background change to a <td> on clicking the buttons. When it's just one color and one button, it's flawless When it comes to the gradient, it's a no go. Below is the original question (I made a new topic because I assume it's a new question entirely. I apologize if I should have just added this to the other topic instead) As you can see I've tried several variations but I'm stuck. I wont list all of what I've tried because I really only remember the last 4 or 5 methods I attempted What works (it's labeled 2, in order to give some clarity and because there are multiple options to select) ////// This is the java script and button that will change the <td> background color - This works for one color and one function ////// <script> function setColor2(color2){ document.getElementById("tableCell2").style.backgroundColor=color2; }; </script> <img src="btn/colorpicker/blue.png" data-color='blue' onClick="pic_color2(this); setColor2('blue');" class="pointer clrimg"> <td id="tableCell2">Some stuff added in this cell</td> This does NOT work for gradients. I am thinking that it's because I need to have both functions in the same element ID. I've tried many many approaches but all have failed ////// This did not work ////// <script> function setColor3(color3){ } function setColor4(color4){ } document.getElementById("tableCell3").style.background = "linear-gradient(to right, " + color3 + ", " + color4 + ")"; }; </script> ////// neither did this one ////// <script> function setColor3(color3){ document.getElementById("tableCell3").style.background = "linear-gradient(to right, " + color3 + ", " + color4 + ")"; }; function setColor4(color4){ document.getElementById("tableCell3").style.background = "linear-gradient(to right, " + color3 + ", " + color4 + ")"; }; </script> ////// And neither did this one ////// <script> function setColor3(color3, color4){ document.getElementById("tableCell3").style.background = "linear-gradient(to right, " + color3 + ", " + color4 + ")"; }; </script> ////// And naturally... neither did this one ////// <script> function setColor3, setColor4(color3, color4){ document.getElementById("tableCell3").style.background = "linear-gradient(to right, " + color3 + ", " + color4 + ")"; }; </script> ////// Also tried this, and no go ////// <script> function setColor3(color3) + setColor4(color4) { document.getElementById("tableCell3").style.background = "linear-gradient(to right, " + color3 + ", " + color4 + ")"; }; </script> _______________ The buttons: <img src="btn/colorpicker/blue.png" data-color='blue' onClick="pic_color3(this); setColor3('blue');" class="pointer clrimg"><br> <img src="btn/colorpicker/red.png" data-color='red' onClick="pic_color4(this); setColor4('red');" class="pointer clrimg"><br> ______________ <td id="tableCell3">Stuff in this cell</td> Here is something that DOES work with the gradients, however it's not usable because I need to be able to change both colors, not have one static all the time ////// This will change the gradients, but one of the colors is always defined instead of refering to the selected color ////// <script> function setColor3(color3){ document.getElementById("tableCell3").style.background = "linear-gradient(to right, " + color3 + ", white)"; }; function setColor4(color4){ document.getElementById("tableCell3").style.background = "linear-gradient(to right, white, " + color4 + ")"; }; </script> _______________ The buttons: <img src="btn/colorpicker/blue.png" data-color='blue' onClick="pic_color3(this); setColor3('blue');" class="pointer clrimg"><br> <img src="btn/colorpicker/red.png" data-color='red' onClick="pic_color4(this); setColor4('red');" class="pointer clrimg"><br> ______________ <td id="tableCell3">Stuff in this cell</td>

Well now I feel silly haha. For some reason I thought it was important. Yup, removing it solved that. Thank you

@mac_gyver I hope I'm not being a pain, but do you know how to get rid of the gap that is from the line below? I'm including a screen shot. It might be silly for me to be concerned with it but it's annoying me haha. It's that space under the current and change to colors <?php echo '<pre>'; print_r($_POST); echo '</pre>'; ?>

@kicken Much love for what you posted. I actually learned a lot from that, though it's not ideal for what I'm trying to do for THIS one, but it will be perfect for another project I'm working on so you were very helpful. Thank you! @mac_gyver You nailed it. This was simple and fast and exactly what I needed. Thank you so much. And now I know how to do this for other projects too. I was also working on something similar to this that listed a bunch of images in a row to send (like a picker) but I gave up on that. After a month it got me drained. But I think after this project is done I'll use this method to try that again

@kicken That is a great approach to this. I think I will be able to use that exact method on a different project I'm working on because that will be very useful for it. For this project though, I am still looking to have the selection displayed where the field is. I'm thinking there has to be a way somehow. There's a way to show a preview with file selectors but I haven't been able to convert that into picking an image thats already on the page

I COULD deal with the image appearing inside the form field when clicked, like emojis do, but I'd really like to have it like my example above if that's even possible to do

@kicken Yes I'd rather not use radio buttons. I made a version of this with that and it just looked terrible in my opinion. Too much clutter. I've been searching for a way to display the chosen image much like an emoji picker does (only not in a form field) and then have the field hidden to still send the corrent value, but I'm not having any luck with that either

@Barand Thank you, that doesn't work though. That will give another form field. I already have that. I'm trying to replace the field with an image, OR add a place where the selected image will show. Below is a mock image I made to show what I have and what I'm wanting to do instead ______________________________________________________________________________________

Hello I have a page where a person can click on an image, and that will show the image name in a text field. That image name is then sent to a php page to enter that value into a database table What I have below works perfectly for that (not showing all the php stuff because that's not what I need to change) What I want instead, is to have the image that is selected showing AS the form field, and keeping that same text value to send in the form (so if they choose the green image, it shows the green image, instead of a text field) So another words, if the user clicks on "Purple" then it will show the Purple.png instead of the text field, and will still retain the value of "purple" to send to the database I've tried changing the "text" to "Image" and putting the sourse as name-pref, and adding an image tag outside of the form field with making the field hidden but that didn't work Any thoughts? <img src="btn/colorpicker/darkred.png" onClick= "document.forms[0].elements['name_pref'].value = 'darkred'" class="pointer clrimg"> <img src="btn/colorpicker/yellow.png" onClick= "document.forms[0].elements['name_pref'].value = 'yellow'" class="pointer clrimg"> <img src="btn/colorpicker/purple.png" onClick= "document.forms[0].elements['name_pref'].value = 'purple'" class="pointer clrimg"> <input type="text" name="name_pref" style="font-size: 24px;" value="">

@ginerjm I really do appreciate your help but as I posted a few times now, there isn't anything on the page that doesn't work anymore. The page works as it is intended now with the fix that I made on it. There is nothing further to fix at all. That project is completed Thank you for the help See the one I marked as the solution. It shows all

@ginerjm I'm not pursuing a programming career. I do this as a retired old man just having fun. And like I said, when I remove one of those statements then it doesn't work at all. I'm sorry that you don't like the working page that I have. Thank you for your input.

@ginerjm My whole page works. There are no errors. Why would I change anything when it's working? The previous post I made shows what works. If I take out what I said, one of these lines if (!in_array($ext, $allowed_img)) { if (!in_array($ext, $allowed_img)) { Sorry but I don't see any reason to change it since the page is working as it needs to. If someone else comes along and sees this then they can see what I did to make it work for them too. I think suggesting I change up the coding could just confuse someone new like me

@ginerjm I get no errors. And I know, that double if looks like it shouldn't belong but if I take one out, it doesn't work at all. Not too sure why you assume what I still had and didn't have, I was just showing what made it work. But for anyone that comes to this wanting to know how to make that work, here's what I have in more length. Don't ask me how or why because I couldn't tell you. I just tinkered with it till it worked lol. Now the form will submit with or without an image (if the user just wants to post a comment without a picture, they can) if (isset($_POST["submit"])) { $pname = ""; if(!empty($_FILES["file"]["name"])){ $allowed_img = array('gif', 'png', 'jpg', 'jpeg'); $img_ext = $_FILES["file"]["name"]; $ext = pathinfo($img_ext, PATHINFO_EXTENSION); if (!in_array($ext, $allowed_img)) { if (!in_array($ext, $allowed_img)) { echo ' '; } die(); } #file name with a random number so that similar dont get replaced $pname = rand(1000,10000)."-".$_FILES["file"]["name"]; $pname = str_replace(" ", "_", $pname); #temporary file name to store file $tname = $_FILES["file"]["tmp_name"]; #upload directory path $uploads_dir = 'img'; #TO move the uploaded file to specific location move_uploaded_file($tname, $uploads_dir.'/'.$pname); } }

I figured it out. I was trying to add stuff to the wrong if statement. Instead I just changed the following, and now it works if (isset($_POST["submit"])) { $pname = ""; if(!empty($_FILES["file"]["name"])){ $allowed_img = array('gif', 'png', 'jpg', 'jpeg');

@ginerjm that's a perfect plan. I couldn't figure out how to do that either so I thought it would be easier to just have it enter in nothing if no file was selected. I couldn't figure out how to do either one. But yes that would be ideal. I know at one point I almost had it that way but then it wasn't inserting the message field in the db either

Hello I have a working upload image file to the folder and name of the file to the database. The form also has a place to enter a name of the file to also make a comment on the page. The problem is that if no file is chosen to upload, then the whole thing stops. Below is what I have and then after that is what I've tried. Any thoughts? Goal: To allow this form to submit with or without an image. The text field is already put as required in the form This is what I have (leaving out all the connection to the db stuff and the "insert into" part because thats fine. The issue is only when the no file is chosen) $allowed_img = array('gif', 'png', 'jpg', 'jpeg'); $img_ext = $_FILES["file"]["name"]; $ext = pathinfo($img_ext, PATHINFO_EXTENSION); if (!in_array($ext, $allowed_img)) { if (!in_array($ext, $allowed_img)) { echo 'No Image Was Chosen. This Form Did Not Post'; } die(); } #file name with a random number so that similar dont get replaced $pname = rand(1000,10000)."-".$_FILES["file"]["name"]; $pname = str_replace(" ", "_", $pname); #temporary file name to store file $tname = $_FILES["file"]["tmp_name"]; #upload directory path $uploads_dir = 'img'; #TO move the uploaded file to specific location move_uploaded_file($tname, $uploads_dir.'/'.$pname); This is what I've tried $allowed_img = array('gif', 'png', 'jpg', 'jpeg'); $img_ext = $_FILES["file"]["name"]; $ext = pathinfo($img_ext, PATHINFO_EXTENSION); if (!in_array($ext, $allowed_img)) { if (!in_array($ext, $allowed_img)) { ($ext = "", $allowed_img = ""); } die(); } ///// and I tried //// $allowed_img = array('gif', 'png', 'jpg', 'jpeg'); $img_ext = $_FILES["file"]["name"]; $ext = pathinfo($img_ext, PATHINFO_EXTENSION); if (!in_array($ext = "", $allowed_img = "")) { elseif (!in_array($ext, $allowed_img)) { echo 'No image file selected'; } die(); } ///// and I ALSO tried //// $allowed_img = array('gif', 'png', 'jpg', 'jpeg'); if $img_ext = $_FILES[""][""]; { } else { $img_ext = $_FILES["file"]["name"]; } $ext = pathinfo($img_ext, PATHINFO_EXTENSION); if (!in_array($ext = "", $allowed_img = "")) { } die(); } //// And about 10+ more variations that I don't remember what I did ////

Hello My new scripting adventure is a very simple chat page. And by simple I mean it's no where near what it should be for a real one. This is just to play around with. Something I wanted to get done was have the page load with ajax so new enties auto load (CHECK)... then I wanted the page to auto scroll to the bottom (CHECK) BUT... What I have does all that, but it doesn't allow to scroll up at all. So it's sort of "If you missed what was said... sorry!". I'm not really cool with that. I'm posting my entire 2 pages that makes all this work because I've tried mannyyyyyyy examples online and this is as far as I got. Any help is appreciated. ALSO, I don't like that I have to specify PX's in the height to make it work. Thats not very device friendly. Is there a way to not have to do that? I tried % but it makes it not work at all. Many thanks! The page that loads the info from the database and has the scroll (list.php) PS... I know I know, the PHP is TERRIBLE haha. I really didn't give a lot of thought behind that part of it on this project yet <style> .container { height: 900px; overflow: auto; display: flex; flex-direction: column-reverse; } </style> <div class="container"> <?php $conn = mysqli_connect("deleted for posting", "deleted for posting", "deleted for posting", "deleted for posting"); $rows = mysqli_query($conn, "SELECT * FROM auction"); ?> <style> .table-roundmenue4 { background-color: #ffffff; border-collapse: collapse; border-radius: 10px; padding: 10px; border-style: hidden; /* hide standard table (collapsed) border */ box-shadow: 0 0 0 2px #9C01A9; /* this draws the table border */ box-shadow: 0px 3px 8px #000; color: #ffffff; } </style> <table width="80%" cellspacing="20"> <?php $i = 1; ?> <?php foreach($rows as $row) : ?> <tr> <td><div class="table-roundmenue4"> <?php echo '<font color="CCCCFF" size="5" face="Verdana, Arial, Helvetica, sans-serif"><b>';echo $row["name"];echo '</b></font>'; echo "<br>"; echo '<font color="000000" size="4" face="Verdana, Arial, Helvetica, sans-serif"><b>';echo $row["comment"];echo '</b></font>'; ?></div></td> </tr> <?php endforeach; ?> </table> </div> And the page that displays list.php to make it appear in real time <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> </head> <body onload = "table();"> <script type="text/javascript"> function table(){ const xhttp = new XMLHttpRequest(); xhttp.onload = function(){ document.getElementById("table").innerHTML = this.responseText; } xhttp.open("GET", "list.php"); xhttp.send(); } setInterval(function(){ table(); }, 1); </script> <div id="table"> </div>

@Barand and others.... I DID IT YAY! Below is the solution (in case anyone else can learn from this too) I just changed the JS a bit and added a line to reflect the local time I had that adjusted var dateValue = document.getElementById("date").value; var dateValue2 = new Date().toLocaleString('en-US', { timeZone: 'America/New_York' }); var date = Math.abs((new Date(dateValue2).getTime() / 1000).toFixed(0)); var date2 = Math.abs((new Date(dateValue).getTime() / 1000).toFixed(0));

@Barand and others that see this. I don't know if I should make a new topic or not since I picked a solution, and I am worried that I may be an annoyance with all of my questions. But here I am on day 5 of this project and I can't get this last part resolved. Here is what I have, Thanks to you! 1: User creates an auction 2: The auction accepts or declines the offer based on if it's higher or lower than the highest bid 3: When it ends, a new screen appears showing it's ended and if the logged in user is the winner then they also see a button to pay for the auction via paypal 4: I have an edit auction page where I can adjust the time, image, name, etc Where I am stuck now is getting this timer to work for viewers in different time zones. It will be accurate in the time the user posted it, but not for others. For example, if I creat an auction to run for 10 hours, then it will show users in my time zone 10 hours remaining. However if someone in London views it then they see 5 hours remaining. This will cause the auction end to not be the same for everyone. I really do appreciate all the help, and again I've learned so much. This last peice of the puzzle has me stumped. HERE IS WHAT I'VE TRIED and what I think MIGHT work but haven't been able to get it right... In the JS countdown, I've tried adding UTC comments to the NEW TIME in various places and also added the months in the brackets. I've tried to create a part in the php section to convert it then use it (which I think may be the best approach but I can't figure it out) Finally, everything I see in my searches shows example of how to convert it if you put in a specific time zone (like if I manually put in America/Denver for example) but nothing that shows universal for everyone. Also, I can't seem to find a clear answer on if my timestamps are even being stored as UTC or not lol Here is what I have so for this now, all of this works perfect except for the timezone issue. THANK YOU SO MUCH! <?php error_reporting(E_ALL); ini_set('display_errors', '1'); $mysqli = new mysqli("deleted for posting","deleted for posting","deleted for posting","deleted for posting"); if ($mysqli -> connect_errno) { echo "Failed to connect to MySQL: " . $mysqli -> connect_error; exit(); } $sql = "SELECT * FROM auctiontitle"; if ($result = $mysqli -> query($sql)) { while($row = $result->fetch_assoc()) { $duration = $row["duration"]; $created_at = $row["created_at"]; $date = "$created_at"; } } else { echo "0 results"; } ?> <div id="data" align="center"></div> <input type="hidden" id="date" value="<?php echo $date; ?>"> <script> function func() { var dateValue = document.getElementById("date").value; var date = Math.abs((new Date().getTime() / 1000).toFixed(0)); var date2 = Math.abs((new Date(dateValue).getTime() / 1000).toFixed(0)); var diff = date2 - date; var days = Math.floor(diff / 86400); var hours = Math.floor(diff / 3600) % 24; var minutes = Math.floor(diff / 60) % 60; var seconds = diff % 60; var daysStr = days; if (days < 10) { daysStr = "0" + days; } var hoursStr = hours; if (hours < 10) { hoursStr = "0" + hours; } var minutesStr = minutes; if (minutes < 10) { minutesStr = "0" + minutes; } var secondsStr = seconds; if (seconds < 10) { secondsStr = "0" + seconds; } if (days < 0 && hours < 0 && minutes < 0 && seconds < 0) { window.location.href = "auction-ended.php","_blank"; daysStr = "00"; hoursStr = "00"; minutesStr = "00"; secondsStr = "00"; console.log("close"); if (typeof interval !== "undefined") { clearInterval(interval); } } document.getElementById("data").innerHTML = hoursStr + " Hours " + minutesStr + " Minutes " + secondsStr + " Seconds"; } func(); var interval = setInterval(func, 1000); </script> EDIT: This is what I'm thinking could work, but not sure how. Something like... ///// in the php section ///// $created_at = $row["created_at"]; $created_at = (something here that converts the time to the viewers timezone); $date = $created_at ///// then that could reflect the $date in the js countdown /////

Sorry, for this one it's myid, it's all working now

Those are 2 different projects but yes this one is myid that is passed from a previous page that has the session_id sent to this page and then translated to myid I know.... I make things too complicated. I'm getting the hang of it though (slowly) haha