PHP loop with html forms and javascript submit button only submitting last form in loop

Question

I have a PHP loop that displays multiple HTML forms. I have javascript onClick for the submit button. I am attempting to cause the submit button on each form to only submit the form it belongs to. My problem is after the loop displays several forms only the very last form displayed from the loop will submit. Any forms previous to the last form in the loop do not submit when the submit button is clicked. I did find some helpful information over at Post form in while loop with javascript submit and also at add onclick function to a submit button and these did help me in my attempt but they did not help me to solve this problem I ran into. Any suggestions would be greatly appreciated.

Here is the javascript in the head section:

<!-- Script to fire uploaded photos form bound to unique id -->

<script>
function submitForm(image_id) {
  document.forms[image_id].submit();
  return false;
}
</script>

<!-- End of script to fire uploaded photos form bound to unique id -->

Here is the PHP loop and form:

<div id="uploaded-photos">

<!-- Start of Uploaded Photos -->

<?php

// Selecting all images from the database
$select_images = "select * from files where email = '$_SESSION[email]'";
$run_images = mysqli_query($conn, $select_images);
while($row=mysqli_fetch_array($run_images)){

// Creating variables for post id, title, date, author, image, keywords and content
$image_name = $row['name'];
$image_description = $row['description'];
$image_title = $row['title'];
$image_directory_name = $row['image_directory_name'];
$image_keywords = $row['keywords'];
$image_privacy = $row['privacy'];
$image_id = $row['id'];

?>

<div id="uploaded-photos-individual">

<div id="uploaded_photos_image_wrapper">

<form method="post" name="<?php echo "$image_id"; ?>" action="nonadmin_user_profile.php">

<p class="av-radio2"><img src="../photo-uploads/server/php/files/<?php echo "$image_directory_name"; ?>/thumbnail/<?php echo "$image_name"; ?>" width="100" height="100" alt="<?php echo "$image_description"; ?>" title="<?php echo "$image_title"; ?>">
<br>
&nbsp;<input type="radio" value="<?php echo "$image_name"; ?>" name="uploaded-personal-avatar-name" <?php if ("$uploaded_personal_avatar_name" == "$image_name") {echo 'checked="checked"';} else {echo '';} ?>>Personal Profile
<br>
<input type="radio" value="<?php echo "$image_name"; ?>" name="uploaded-business-avatar-name" <?php if ("$uploaded_business_avatar_name" == "$image_name") {echo 'checked="checked"';} else {echo '';} ?>>Business Profile<input type="hidden" name="image-id" value="<?php echo "$image_id"; ?>"</p>

</div> <!-- End of Uploaded Photos IMG Wrapper -->

<div id="uploaded-photos-inputs">

<table style="width:100%">

<tr>
<td class="tdleft"><strong>Title:</strong></td>
<td align="left"><input type="text" name="image-title" style="width:99%" maxlength="250" value="<?php echo "$image_title"; ?>"></td>
</tr>

<tr>
<td class="tdleft"><strong>Description:</strong></td>
<td align="left"><input type="text" name="image-description" style="width:99%" maxlength="250" value="<?php echo "$image_description"; ?>"></td>
</tr>

<tr>
<td class="tdleft"><strong>Keywords:</strong></td>
<td align="left"><input type="text" name="image-keywords" style="width:99%" maxlength="250" value="<?php echo "$image_keywords"; ?>"></td>
</tr>

<tr>
<td class="tdleft"><strong>Name:</strong></td>
<td align="left"><input type="text" name="image-name" style="width:99%" maxlength="250" readonly="readonly" value="<?php echo "$image_name"; ?>"></td>
</tr>

<tr>
<td class="tdleft"><strong>Privacy:</strong></td> 
<td align="left"><select name="image-privacy"><option value="Private" <?php if ("$image_privacy" == 'Private') {echo 'selected="'."$image_privacy".'"';} else {echo '';} ?>>Private</option><option value="Public" <?php if ("$image_privacy" == 'Public') {echo 'selected="'."$image_privacy".'"';} else {echo '';} ?>>Public</option>
</select></td>
</tr>

</table>

</div> <!-- End of Uploaded Photos Inputs -->

<div id="uploaded-photos-submit">
<input type="submit" value="Update This Photo" class="submit_button" name="<?php echo "$image_id"; ?>" <?php echo 'onClick="return submitForm($image_id);"'; ?>>

</div>

</form>

</div> <! -- End of Uploaded Photos Individual -->

<?php } ?>

Here is the code to accept the form submit and load the database:

<!-- Code for Uploaded Photos Update Form -->

<?php 

if (isset($_POST["$image_id"])) {

// Let's sanitize the user's uploaded avatar selection for personal profile
$uploaded_personal_avatar_name_input = trim(((isset($conn) && is_object($conn)) ? mysqli_real_escape_string($conn, $_POST['uploaded-personal-avatar-name']) : ((trigger_error("[MySQLConverterToo] Fix the mysql_escape_string() call! This code does not work.", E_USER_ERROR)) ? "" : "")));

// Let's sanitize the user's uploaded avatar selection for business profile
$uploaded_business_avatar_name_input = trim(((isset($conn) && is_object($conn)) ? mysqli_real_escape_string($conn, $_POST['uploaded-business-avatar-name']) : ((trigger_error("[MySQLConverterToo] Fix the mysql_escape_string() call! This code does not work.", E_USER_ERROR)) ? "" : "")));

// Let's sanitize the user's uploaded image title
$image_title_input = trim(((isset($conn) && is_object($conn)) ? mysqli_real_escape_string($conn, $_POST['image-title']) : ((trigger_error("[MySQLConverterToo] Fix the mysql_escape_string() call! This code does not work.", E_USER_ERROR)) ? "" : "")));

// Let's sanitize the user's uploaded image description
$image_description_input = trim(((isset($conn) && is_object($conn)) ? mysqli_real_escape_string($conn, $_POST['image-description']) : ((trigger_error("[MySQLConverterToo] Fix the mysql_escape_string() call! This code does not work.", E_USER_ERROR)) ? "" : "")));

// Let's sanitize the user's uploaded image keywords
$image_keywords_input = trim(((isset($conn) && is_object($conn)) ? mysqli_real_escape_string($conn, $_POST['image-keywords']) : ((trigger_error("[MySQLConverterToo] Fix the mysql_escape_string() call! This code does not work.", E_USER_ERROR)) ? "" : "")));

// Let's sanitize the user's uploaded image privacy settings
$image_privacy_input = trim(((isset($conn) && is_object($conn)) ? mysqli_real_escape_string($conn, $_POST['image-privacy']) : ((trigger_error("[MySQLConverterToo] Fix the mysql_escape_string() call! This code does not work.", E_USER_ERROR)) ? "" : "")));

// Let's sanitize the user's uploaded image id
$image_id_input = trim(((isset($conn) && is_object($conn)) ? mysqli_real_escape_string($conn, $_POST['image-id']) : ((trigger_error("[MySQLConverterToo] Fix the mysql_escape_string() call! This code does not work.", E_USER_ERROR)) ? "" : "")));

if ('$uploaded_personal_avatar_name_input' == '') {}

else {

// Let's add all this stuff to the database if an uploaded user photo is selected for personal profile use
mysqli_query($conn, "UPDATE nonadmin_user_login SET

uploaded_personal_avatar_name='$uploaded_personal_avatar_name_input',
uploaded_personal_avatar_usage='1',
built_in_personal_avatar_name='',
built_in_personal_avatar_usage='0'

WHERE email = '$_SESSION[email]'") or die(((is_object($conn)) ? mysqli_error($conn) : (($___mysqli_res = mysqli_connect_error()) ? $___mysqli_res : false)));

}

if ('$uploaded_business_avatar_name_input' == '') {}

else {

// Let's add all this stuff to the database if an uploaded user photo is selected for business profile use
mysqli_query($conn, "UPDATE nonadmin_user_login SET

uploaded_business_avatar_name='$uploaded_business_avatar_name_input',
uploaded_business_avatar_usage='1',
built_in_business_avatar_name='',
built_in_business_avatar_usage='0'

WHERE email = '$_SESSION[email]'") or die(((is_object($conn)) ? mysqli_error($conn) : (($___mysqli_res = mysqli_connect_error()) ? $___mysqli_res : false)));

}

// Let's add some remaining stuff to the database regardless if any profile picture was selected
mysqli_query($conn, "UPDATE files SET

title='$image_title_input',
description='$image_description_input',
keywords='$image_keywords_input',
privacy='$image_privacy_input'

WHERE email = '$_SESSION[email]' AND id = '$image_id_input'") or die(((is_object($conn)) ? mysqli_error($conn) : (($___mysqli_res = mysqli_connect_error()) ? $___mysqli_res : false)));

// If the database insert fails let's print a query failed warning
if (mysqli_affected_rows($conn) == 0) {

echo 'Something went wrong';
}

// If the database insert succeeded we can alert the user and refresh the page
else {

//echo " <script>alert('Photo Selection Update Successful!');</script> ";
echo "<script>window.location=window.location</script>";

//echo "<script>$(window).load(function() { alert('Photo Selection Update Successful!'); });</script>";

}
}
?>

<!-- End of Code for Uploaded Photos -->

Answer 1

I solved this problem. The issue here is using the same variable name for the name of the form and the name of the submit button. Apparently this created confusion on submit since the form name and the submit button name were both coded as $image_id.

Previous code that didn't work:

<input type="submit" value="Update This Photo" class="submit_button" name="<?php echo "$image_id"; ?>" <?php echo 'onClick="return submitForm($image_id);"'; ?>>

<form method="post" name="<?php echo "$image_id"; ?>" action="nonadmin_user_profile.php">

By simply changing the name of the submit button everything works and the corrected code is shown below:

<input type="submit" value="Update This Photo" class="submit_button" name="upload-photo-form" <?php echo 'onClick="return submitForm($image_id);"'; ?>>

<form method="post" name="<?php echo "$image_id"; ?>" action="nonadmin_user_profile.php">