Image loading script only works for the last <li> </li> saved in the database

Question

Below is a script to upload images and save them to the database.

On one page of the website there is a table and inside each <li></li> , there is a download icon , where users can add a single image.

The problem is that image loading only works for the "highest" empty <li> in the table.

Here, "highest" means the last <li> stored in the database (the table is sorted by TIME DESC).

For example, if I want to upload an image to a random <li></li> on the page, as soon as I select the image, nothing will happen. But if I select the "highest" empty (empty = no image stored in the database) <li></li> , it works like a charm.

HTML:

 <li id="entry<?php echo $recipe_id ?>"> <div class="addimage_icon" id="upload<?php echo $recipe_id; ?>"> <form id="upload_icon" action="upload_extra.php" method="POST" enctype="multipart/form-data"> <input class="upload" id="file" type="file" style="display:none" /> <input type="hidden" name="recipe_id" value="<?php echo $recipe_id; ?>"/> <img class="upload_icon" src="/upload_icon.png"> </form> </div> </li> 

JAVASCRIPT (loading starts immediately after selecting one image):

 <script> $('.upload_icon').click(function(){ $(this).parent().find('.upload').click(); }); document.getElementById("file").onchange = function() { document.getElementById("upload_icon").submit(); } </script> 

PHP:

 <?php include "includes/connnect.php"; $id = $_SESSION['id']; $recipe_id = mysql_real_escape_string($_POST['recipe_id']); if ($_SERVER["REQUEST_METHOD"] == "POST") { $recipe_id= $_POST['recipe_id']; //get image attributes $add = query("UPDATE cookbook SET recipe_pic = '".$location."' WHERE recipe_id = '$recipe_id'"); header(Location:"home.php"); } ?> 

What's going on here?

Answer 1

There are many, many problems with your question. First of all, the HTML you posted is invalid . I suspect your Javascript code has a problem with such invalid HTML. However, the following code does not have (for your HTML code duplicated once for demo purposes):

 NodeList.prototype.forEach = Array.prototype.forEach; document.querySelectorAll('input[type="file"]').forEach(function (file) { var click = function() { file.click(); }; var change = function() { console.log('change:', file.value); }; file.form.querySelector('img').addEventListener('click', click); file.addEventListener('change', change); }); 

http://jsfiddle.net/eBLL5/

All you need to do is assign the correct listeners to the right elements, as you can see, I do not use identifier values ​​because they are duplicated.

I can also use duplicate identifiers, if you think that this is not an argument, this is shown in the corresponding answer:

• delete text from multiple spaces with the same identifier

I hope this helps you get feet on the ground again so that you can continue checking HTML and do a little clean up.

Answer 2

It looks like your html form contains <input type="hidden" value="<?php echo $recipe_id; ?>"/>

However, the input field name attribute is missing, so the post data stream will not have a definition for the $_POST["recipe_id"] field. The undefined value is probably interpreted by your script as 0, and therefore only the top or “top” image li is updated.

If you change the input field this way:

<input type="hidden" name="recipe_id" value="<?php echo $recipe_id; ?>"/>

You may have better results ...

Answer 3

Just change this part:

 document.getElementById("file").onchange = function() { document.getElementById("upload_icon").submit(); } 

FROM:

 $("#file").change(function(){$(this).parents("form").get(0).submit();}) 

Answer 4

In your HTML, you:

 <form id="upload_icon" action="upload_extra.php" method="POST" enctype="multipart/form-data"> 

Then your Javascript mentions:

 document.getElementById("file").onchange = function() { document.getElementById("upload_icon").submit(); } 

According to some specifications ( HTML4 , HTML5 ), there should not be identical identifiers for several elements. Therefore, when you use iteration, avoid typing identifiers without adding something unique to them, for example:

 <form id="upload_icon<?php print $recipe_id; ?>" action="upload_extra.php" method="POST" enctype="multipart/form-data"> 

Your Javascript can be turned into something like the following. (note that you need to call this function after the page loads)

 function afterPageLoad() { var buttons = document.getElementsByClassName("upload"); for (i = 0; i < buttons.length; i++) { buttons[i].onchange = function() { this.form.submit(); } } } 

Now, if your PHP code stops working, we will also need to see this in the part that you skipped by writing

 //get image attributes 

where the $location variable is triggered.

Answer 5

In JavaScript, when submitting a form by searching for an element by identifier. As in the HTML code, identifiers are repeated (not a standard method, IDS cannot repeat, but the class can), therefore the browser will always send the latter (highest), therefore, when adding an image to the highest line, it works and doesn’t work between it.

Please check this code

  <script> $(document).ready(function() { id = ''; $('.upload_icon').click(function(){ id = $(this).attr('id'); $(this).parent().find('#file'+id).click(); }); $(".upload").change(function () { $('#upload_icon'+id).submit(); }); }); </script> <style> .upload_icon { cursor:pointer; } </style> <ul> <?php for($recipe_id=1;$recipe_id<10;$recipe_id++): ?> <li id="entry<?php echo $recipe_id ?>"> <div class="addimage_icon" id="upload<?php echo $recipe_id; ?>"> <form action="upload.php" method="POST" enctype="multipart/form-data" id="upload_icon<?php echo $recipe_id; ?>"> <input class="upload" id="file<?php echo $recipe_id; ?>" type="file" name="image" style="display:none"/> <input type="hidden" name="recipe_id" value="<?php echo $recipe_id; ?>" /> <img class="upload_icon" src="https://cdn2.iconfinder.com/data/icons/picons-basic-2/57/basic2-036_cloud_upload-128.png" id="<?php echo $recipe_id; ?>"> </form> </div> </li> <?php endfor; ?> </li> 

In the HTMl code that I provided, there are different identifiers for each form (using $ recipe_id as a suffix), when ever clicked an event on a boot icon, it will check which boot icon clicked on its attribute id, and then the corresponding file value type of input is changed by finding the element by identifier (the same $ recipe_id is also used here as the suffix). When an input type change event occurs, the same logic is also used to run the corresponding form.