javascript - PHP循环与html表单和javascript提交按钮仅提交循环中的最后一个表单

Question

我有一个显示多个 HTML 表单的 PHP 循环。我有 javascript onClick 用于提交按钮。我试图使每个表单上的提交按钮仅提交其所属的表单。我的问题是在循环显示多个表单后，只有循环中显示的最后一个表单才会提交。单击提交按钮时，循环中最后一个表单之前的任何表单都不会提交。我确实在 Post form in while loop with javascript submit 找到了一些有用的信息以及 add onclick function to a submit button这些确实帮助了我的尝试，但它们并没有帮助我解决我遇到的这个问题。任何建议将不胜感激。

这是头部的 javascript:

<!-- 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 -->

这是 PHP 循环和表单:

<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 } ?>

以下是接受表单提交并加载数据库的代码:

<!-- 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

我解决了这个问题。这里的问题是表单名称和提交按钮名称使用相同的变量名称。显然，这在提交时造成了困惑，因为表单名称和提交按钮名称都编码为 $image_id。

之前的代码不起作用:

<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">

通过简单地更改提交按钮的名称，一切正常，更正后的代码如下所示:

<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">