Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>In JavaScript provided its submitting the form by finding the element by ID, As in the HTML code the IDs are repeating (not a standard method, IDS can't repeat but class can) so the browser will always submit the last (highest) form only, that's why when adding image to highest row its working and in between its not.</p> <p>Please check this code out</p> <pre><code> &lt;script&gt; $(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(); }); }); &lt;/script&gt; &lt;style&gt; .upload_icon { cursor:pointer; } &lt;/style&gt; &lt;ul&gt; &lt;?php for($recipe_id=1;$recipe_id&lt;10;$recipe_id++): ?&gt; &lt;li id="entry&lt;?php echo $recipe_id ?&gt;"&gt; &lt;div class="addimage_icon" id="upload&lt;?php echo $recipe_id; ?&gt;"&gt; &lt;form action="upload.php" method="POST" enctype="multipart/form-data" id="upload_icon&lt;?php echo $recipe_id; ?&gt;"&gt; &lt;input class="upload" id="file&lt;?php echo $recipe_id; ?&gt;" type="file" name="image" style="display:none"/&gt; &lt;input type="hidden" name="recipe_id" value="&lt;?php echo $recipe_id; ?&gt;" /&gt; &lt;img class="upload_icon" src="https://cdn2.iconfinder.com/data/icons/picons-basic-2/57/basic2-036_cloud_upload-128.png" id="&lt;?php echo $recipe_id; ?&gt;"&gt; &lt;/form&gt; &lt;/div&gt; &lt;/li&gt; &lt;?php endfor; ?&gt; &lt;/li&gt; </code></pre> <p>In the HTMl code I have provided have different IDs for each forms (used the $recipe_id as suffix), when ever click event on the upload icon is fired it will check which upload icon is clicked by its attribute Id and then the respective input type file value is changed by finding the element by Id (used the same $recipe_id as suffix here also). On input type change event also same logic is used to fire the respective form. </p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload