Multiple Forms Issue - Webmaster Forum - Web Design, Programming and SEO forums

10-06-2008, 04:59 PM

xxkylexx

Status: Member
Join date: Apr 2006
Location:
Expertise:
Software:

Posts: 181

iTrader: 0 / 0%

xxkylexx is on a distinguished road

Multiple Forms Issue

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:

Code:

<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="javascript:void(0);" onclick="share_codes_popup('/view-codes/?filename=siege_of_stormwynd-AXAP0.jpg&amp;thumbname=th_siege_of_stormwynd-AXAP0.jpg', 'title');" title="get share codes">share</a> | <a href="javascript: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="&lt;a href=&quot;http://www.new.imagenerd.com/show.ph...XAP0.jpg&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://www.new.imagenerd.com/thumbna...XAP0.jpg&quot; alt=&quot;&quot; border=&quot;0&quot; width=&quot;175&quot; height=&quot;35&quot; /&gt;&lt;/a&gt;" onclick="this.select()" /></td>

								</tr>
								<tr>
									<td colspan="2"><a href="/view-codes/?filename=siege_of_stormwynd-AXAP0.jpg&amp;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="javascript:void(0);" onclick="share_codes_popup('/view-codes/?filename=siege_of_stormwynd-UHjaf.jpg&amp;thumbname=th_siege_of_stormwynd-UHjaf.jpg', 'title');" title="get share codes">share</a> | <a href="javascript: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="&lt;a href=&quot;http://www.new.imagenerd.com/show.ph...Hjaf.jpg&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://www.new.imagenerd.com/thumbna...Hjaf.jpg&quot; alt=&quot;&quot; border=&quot;0&quot; width=&quot;175&quot; height=&quot;35&quot; /&gt;&lt;/a&gt;" onclick="this.select()" /></td>
								</tr>
								<tr>

									<td colspan="2"><a href="/view-codes/?filename=siege_of_stormwynd-UHjaf.jpg&amp;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="javascript:void(0);" onclick="share_codes_popup('/view-codes/?filename=clouddissapear0zy-ZPIDW.png&amp;thumbname=th_clouddissapear0zy-ZPIDW.png', 'title');" title="get share codes">share</a> | <a href="javascript: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="&lt;a href=&quot;http://www.new.imagenerd.com/show.ph...PIDW.png&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://www.new.imagenerd.com/thumbna...PIDW.png&quot; alt=&quot;&quot; border=&quot;0&quot; width=&quot;103&quot; height=&quot;175&quot; /&gt;&lt;/a&gt;" onclick="this.select()" /></td>
								</tr>
								<tr>
									<td colspan="2"><a href="/view-codes/?filename=clouddissapear0zy-ZPIDW.png&amp;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>

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

Any suggestions on how I can achieve this?

Thanks,
Kyle