Multiple Forms Issue Options

[xxkylexx]

Hey Guys,
I am having an issue where the only logical way I can see this being done, is with nested forms, which I know aren't allowed, and are breaking my design in IE.

Here's the concept:

I have a gallery of images that a user is managing (like 12 images are displayed on each page). Each image has a checkbox associated with it that the user can check and then at the bottom of the page the user can move all checked images to another folder. Therefore, all images and their checkbox's, along with the "move to folder" selection menu and submit button at the bottom are contained into one big form.

Now within this form I have the option for users to move individual images. Each image has a select menu of folders and submit button that they can use to move a individual image. This therefore requires another form, just for this select menu (since I only want the action to be applied to this specific image and it's select input, and all others also have the same select input name, etc) and a submit button.

See this screenshot for example:
http://imagenerd.com/show.php?_img=gallery69SR.jpg


Here is a snippet of code I am using in this example:

<form action="" method="post">
<div class="box-row last-row">
<div class="box-full">
<div class="box-top"><div class="box-bot"><div class="box-left"><div class="box-right"><div class="box-top-left"><div class="box-top-right"><div class="box-bot-left"><div class="box-bot-right">
<div class="box-content">

<h1>Folder: dafasd</h1>
<div class="box-content-pad">
<div class="gallery-block">
<span class="edit-title" id="_199" title="edit title"><i>click to add title</i></span>
<div class="image-option-links">
<a href="java script:void(0);" onclick="share_codes_popup('/view-codes/?filename=siege_of_stormwynd-AXAP0.jpg&thumbname=th_siege_of_stormwynd-AXAP0.jpg', 'title');" title="get share codes">share</a> | <a href="java script:void(0);" title="move this image" class="move_image">move</a> | <a href="/my-gallery/?delete_image=199" title="delete this image" onclick="return confirm('Are you sure you want to delete this image, siege_of_stormwynd-AXAP0.jpg?')">delete</a>

</div>
<div class="move-image-options">
<form action="" method="post">
<select name="move_image_folder">
<option value="1">Root</option>
<option value="12">dafasd</option>
<option value="13">dafasd</option>

<option value="14">dafasd</option>
<option value="15">asdfasdf</option>
<option value="16">asdfasdf</option>
</select>
<input type="hidden" name="move_image_id" value="199" />
<input type="submit" name="move_image" value="Go" onclick="return confirm('Are you sure you want move this image, siege_of_stormwynd-AXAP0.jpg?');" />
</form>

</div>
<div class="image-box">
<a href="http://www.new.imagenerd.com/show.php?_img=siege_of_stormwynd-AXAP0.jpg" title="View siege_of_stormwynd-AXAP0.jpg" target="_blank"><img src="/thumbnails/th_siege_of_stormwynd-AXAP0.jpg" alt="siege_of_stormwynd-AXAP0.jpg" width="175" height="35" /></a>
</div>
<div>
<table width="100%" cellpadding="0" cellspacing="0" class="image-select">
<tr>
<td width="20" align="left">
<input type="checkbox" name="image_cb[]" value="199" class="checkbox" id="img_199" title="select siege_of_stormwynd-AXAP0.jpg" />

</td>
<td align="left"><label for="img_199" title="select siege_of_stormwynd-AXAP0.jpg">siege_of_stormwynd-AXAP0.jpg</label></td>
</tr>
</table>
<table width="100%" cellspacing="0" cellpadding="0" class="table-pad-2 table-align-td-left quick-select">
<tr>
<td width="70"><b>Email/IM:</b></td>
<td><input type="text" value="http://www.new.imagenerd.com/show.php?_img=siege_of_stormwynd-AXAP0.jpg" onclick="this.select()" /></td>

</tr>
<tr>

<td><b>Forums:</b></td>
<td><input type="text" value="" onclick="this.select()" /></td>
</tr>
<tr>
<td><b>HTML:</b></td>
<td><input type="text" value="<a href="http://www.new.imagenerd.com/show.php?_img...AXAP0.jpg" target="_blank"><img src="http://www.new.imagenerd.com/thumbnails/th...AXAP0.jpg" alt="" border="0" width="175" height="35" /></a>" onclick="this.select()" /></td>

</tr>
<tr>
<td colspan="2"><a href="/view-codes/?filename=siege_of_stormwynd-AXAP0.jpg&thumbname=th_siege_of_stormwynd-AXAP0.jpg" title="more share codes">more...</a></td>
</tr>
</table>
</div>
</div>
<div class="gallery-block">

<span class="edit-title" id="_198" title="edit title"><i>click to add title</i></span>
<div class="image-option-links">
<a href="java script:void(0);" onclick="share_codes_popup('/view-codes/?filename=siege_of_stormwynd-UHjaf.jpg&thumbname=th_siege_of_stormwynd-UHjaf.jpg', 'title');" title="get share codes">share</a> | <a href="java script:void(0);" title="move this image" class="move_image">move</a> | <a href="/my-gallery/?delete_image=198" title="delete this image" onclick="return confirm('Are you sure you want to delete this image, siege_of_stormwynd-UHjaf.jpg?')">delete</a>
</div>
<div class="move-image-options">

<form action="" method="post">
<select name="move_image_folder">
<option value="1">Root</option>
<option value="12">dafasd</option>
<option value="13">dafasd</option>
<option value="14">dafasd</option>
<option value="15">asdfasdf</option>

<option value="16">asdfasdf</option>
</select>
<input type="hidden" name="move_image_id" value="198" />
<input type="submit" name="move_image" value="Go" onclick="return confirm('Are you sure you want move this image, siege_of_stormwynd-UHjaf.jpg?');" />
</form>
</div>
<div class="image-box">
<a href="http://www.new.imagenerd.com/show.php?_img=siege_of_stormwynd-UHjaf.jpg" title="View siege_of_stormwynd-UHjaf.jpg" target="_blank"><img src="/thumbnails/th_siege_of_stormwynd-UHjaf.jpg" alt="siege_of_stormwynd-UHjaf.jpg" width="175" height="35" /></a>

</div>
<div>
<table width="100%" cellpadding="0" cellspacing="0" class="image-select">
<tr>
<td width="20" align="left">
<input type="checkbox" name="image_cb[]" value="198" class="checkbox" id="img_198" title="select siege_of_stormwynd-UHjaf.jpg" />
</td>
<td align="left"><label for="img_198" title="select siege_of_stormwynd-UHjaf.jpg">siege_of_stormwynd-UHjaf.jpg</label></td>

</tr>
</table>
<table width="100%" cellspacing="0" cellpadding="0" class="table-pad-2 table-align-td-left quick-select">
<tr>
<td width="70"><b>Email/IM:</b></td>
<td><input type="text" value="http://www.new.imagenerd.com/show.php?_img=siege_of_stormwynd-UHjaf.jpg" onclick="this.select()" /></td>
</tr>
<tr>

<td><b>Forums:</b></td>
<td><input type="text" value="" onclick="this.select()" /></td>
</tr>
<tr>
<td><b>HTML:</b></td>
<td><input type="text" value="<a href="http://www.new.imagenerd.com/show.php?_img...UHjaf.jpg" target="_blank"><img src="http://www.new.imagenerd.com/thumbnails/th...UHjaf.jpg" alt="" border="0" width="175" height="35" /></a>" onclick="this.select()" /></td>
</tr>
<tr>

<td colspan="2"><a href="/view-codes/?filename=siege_of_stormwynd-UHjaf.jpg&thumbname=th_siege_of_stormwynd-UHjaf.jpg" title="more share codes">more...</a></td>
</tr>
</table>
</div>
</div>
<div class="gallery-block">
<span class="edit-title" id="_150" title="edit title"><i>click to add title</i></span>
<div class="image-option-links">

<a href="java script:void(0);" onclick="share_codes_popup('/view-codes/?filename=clouddissapear0zy-ZPIDW.png&thumbname=th_clouddissapear0zy-ZPIDW.png', 'title');" title="get share codes">share</a> | <a href="java script:void(0);" title="move this image" class="move_image">move</a> | <a href="/my-gallery/?delete_image=150" title="delete this image" onclick="return confirm('Are you sure you want to delete this image, clouddissapear0zy-ZPIDW.png?')">delete</a>
</div>
<div class="move-image-options">
<form action="" method="post">
<select name="move_image_folder">

<option value="1">Root</option>
<option value="12">dafasd</option>
<option value="13">dafasd</option>
<option value="14">dafasd</option>
<option value="15">asdfasdf</option>
<option value="16">asdfasdf</option>

</select>
<input type="hidden" name="move_image_id" value="150" />
<input type="submit" name="move_image" value="Go" onclick="return confirm('Are you sure you want move this image, clouddissapear0zy-ZPIDW.png?');" />
</form>
</div>
<div class="image-box">
<a href="http://www.new.imagenerd.com/show.php?_img=clouddissapear0zy-ZPIDW.png" title="View clouddissapear0zy-ZPIDW.png" target="_blank"><img src="/thumbnails/th_clouddissapear0zy-ZPIDW.png" alt="clouddissapear0zy-ZPIDW.png" width="103" height="175" /></a>
</div>
<div>

<table width="100%" cellpadding="0" cellspacing="0" class="image-select">
<tr>
<td width="20" align="left">
<input type="checkbox" name="image_cb[]" value="150" class="checkbox" id="img_150" title="select clouddissapear0zy-ZPIDW.png" />
</td>
<td align="left"><label for="img_150" title="select clouddissapear0zy-ZPIDW.png">clouddissapear0zy-ZPIDW.png</label></td>
</tr>
</table>

<table width="100%" cellspacing="0" cellpadding="0" class="table-pad-2 table-align-td-left quick-select">
<tr>
<td width="70"><b>Email/IM:</b></td>
<td><input type="text" value="http://www.new.imagenerd.com/show.php?_img=clouddissapear0zy-ZPIDW.png" onclick="this.select()" /></td>
</tr>
<tr>
<td><b>Forums:</b></td>
<td><input type="text" value="" onclick="this.select()" /></td>

</tr>
<tr>
<td><b>HTML:</b></td>
<td><input type="text" value="<a href="http://www.new.imagenerd.com/show.php?_img...ZPIDW.png" target="_blank"><img src="http://www.new.imagenerd.com/thumbnails/th...ZPIDW.png" alt="" border="0" width="103" height="175" /></a>" onclick="this.select()" /></td>
</tr>
<tr>
<td colspan="2"><a href="/view-codes/?filename=clouddissapear0zy-ZPIDW.png&thumbname=th_clouddissapear0zy-ZPIDW.png" title="more share codes">more...</a></td>
</tr>

</table>
</div>
</div>
<div class="clear"></div>
<div class="clear"></div>
</div>
<div class="pager">
</div>
</div>

</div></div></div></div></div></div></div></div>
</div>
<div class="clear"></div>
</div>
<div class="box-row" style="margin: 12px 0px 0px 0px;">
<div class="box-full">
<div class="box-top"><div class="box-bot"><div class="box-left"><div class="box-right"><div class="box-top-left"><div class="box-top-right"><div class="box-bot-left"><div class="box-bot-right">
<div class="box-content align-center">
<p><b>With Selected Images:</b></p>

<table cellpadding="0" cellspacing="0" align="center">
<tr>
<td>
<input type="checkbox" id="selectall" />
</td>
<td width="120" align="left">
<label for="selectall">select/unselect all</label>
</td>

<td width="120">
<select name="action" id="action_select">
<option value="">----------</option>
<option value="delete">Delete</option>
<option value="move">Move to</option>
</select>
</td>

<td width="120">
<select name="multi_folder" disabled="disabled" id="folder_select">
<option value="1">Root</option>
<option value="12">dafasd</option>
<option value="13">dafasd</option>
<option value="14">dafasd</option>
<option value="15">asdfasdf</option>

<option value="16">asdfasdf</option>
</select>
</td>
<td width="120">
<input type="submit" name="multi_action" value="Go" id="multi_go" disabled="disabled" onclick="return confirm('Are you sure you want to perform the selected action on all of the selected images?')" />
</td>
</tr>
</table>

</div>
</div></div></div></div></div></div></div></div>
</div>
<div class="clear"></div>
</div>
</form>

[code] wouldn't allow me to add colors so I used [quote] instead (which dumped my indenting )



Red - Associates with multi image options
Blue - Associates with single image move option




Any suggestions on how I can achieve this?


Thanks,
Kyle

This post has been edited by xxkylexx: Oct 6 2008, 12:18 PM

[Brian Chandler]

You just have to write it as one form. If each image has individual buttons give then names like img01del, img01mov, img01folder [to move to], etc. Then add whatever the buttons for all images together with names like globfolder.

Then your program handling the form simply has to sort it out.

You can use different submit buttons, of course, and you will have to give them similar identifying name values (the "value" value will almost certainly need to be the same, like "Move this image"!)

[xxkylexx]

Hi Brian,
If it's all one form, then all of the input values are submitted with the data.

If they all have the same input names for <select name="move_image_folder">...</select>, and <input type="hidden" name="move_image_id" value="###" />, the my program cannot handle applying the move action to the proper specific image element.

This post has been edited by xxkylexx: Oct 7 2008, 10:14 AM

[Brian Chandler]

Hi Brian,If it's all one form, then all of the input values are submitted with the data.

Correct.

If they all have the same input names for <select name="move_image_folder">...</select>, and <input type="hidden" name="move_image_id" value="###" />, the my program cannot handle applying the move action to the proper specific image element.

Correct. So you need to give them different names, as I suggested. Of course this is much simpler if you are using a program to generate the page...

[xxkylexx]

Yea, it's all generated on the fly via a loop based on the user's images in the database.

I can give them all unique names with a common submit button, however, how will I determine which one the update needs to be applied to? Applying the update to all of the images on the page seems like an option, but that doesn't seem right.

This post has been edited by xxkylexx: Oct 7 2008, 10:32 AM

[Darin McGrew]

Please see the FAQ entry Can I have two or more Submit buttons in the same form?

[xxkylexx]

Please see the FAQ entry Can I have two or more Submit buttons in the same form?

Yes, I understand that it is possible to have multiple submit buttons in a form.

However, I want one function on my PHP to handle the move action for an image, so therefore all of the submits would need to have the same name (to detect this is the action I am wanting to perform).

[Brian Chandler]

Please see the FAQ entry Can I have two or more Submit buttons in the same form?

Yes, I understand that it is possible to have multiple submit buttons in a form.

However, I want one function on my PHP to handle the move action for an image, so therefore all of the submits would need to have the same name (to detect this is the action I am wanting to perform).

Why do "all the submits need to have the same name"? Then you can't tell them apart. You need to give the submit buttons _different_ names.

Perhaps you haven't yet noticed that the *name* of a button (or any other input) need not be a simple "word". It can be something like "img01move", which means "move" applied to image 1. Here's what I said again...

You just have to write it as one form. If each image has individual buttons give then names like img01del, img01mov, img01folder [to move to], etc. Then add whatever the buttons for all images together with names like globfolder.

Then your program handling the form simply has to sort it out.

You can use different submit buttons, of course, and you will have to give them similar identifying name values (the "value" value will almost certainly need to be the same, like "Move this image"!)

HTH

[xxkylexx]

Thanks for all the help.

This post has been edited by xxkylexx: Oct 7 2008, 06:19 PM