HTML - 嵌套表单解决方法？ [英] HTML - Nested form work-around?
问题描述
我最初的想法是在别处创建一个不可见的表单，然后复制单击按钮时的文件框值，然后是AJAX提交。这不起作用，因为JavaScript无法编辑文件框的值。可以理解。
第二次尝试是创建嵌套表单。通过一些黑客行为，我确实设法让FireFox看到两种形式，但提交内部提交外部提交。 未定义的行为，我相信是这个词。有意义的是，你不应该嵌套表单。
所以 - 忽略这个事实，这绝对没有意义，客户真的应该被告知 - 是还有什么办法可以在页面上创建一个文件上传表单，这个表单可以通过AJAX提交，并且明显位于另一个表单中？我希望避免只是在页面的其他地方创建表单，并用可恶的CSS黑客攻击它。 不知道这是否足够适合你，但是如何在表单中间嵌入 iframe 并在该窗口中进行文件上传呢？它可能不是纯粹的邪恶，真的是那么聪明和skullduggerous，但它可能工作。
唯一的副作用，我可以看到，如果当父提交，嵌入的 iframe 也是如此。如果你足够小心，并确保当它不用于文件上传时删除 iframe ，我认为你应该没问题。
父
<！DOCTYPE html>
< html>
< head>
< meta charset =ISO-8859-1>
< title>在此插入标题< / title>
< / head>
< body>
< form submit =http://www.google.com/searchmethod =get>
< div>
< input type =textname =qvalue =[Search Google Here]/>
< / div>
< iframe src =http://jfcoder.com/test/embed.phpstyle =width：200px; height：200px;>< / iframe>
< div>
< button type =submit>提交此页面的表单< / button>
< / div>
< / form>
< / body>
< / html>
嵌入
<！DOCTYPE html>
< html>
< head>
< meta charset =ISO-8859-1>
< title>在此插入标题< / title>
< / head>
< body>
<？php
if（$ _GET ['q']）{
echo< p>< strong> GET SUBMITTED< / strong>< p>中;
}
？>
< form submit =embed.phpmethod =get>
< div>
< input type =textname =qvalue =输入任何内容/>
< button type =submit>提交此页面的表单< / button>
< / div>
< / form>
< / body>
< / html>
http://jfcoder.com/test/parentform.php
In order to prove myself to someone who doesn't know much about PHP, I need to work with some awkwardly hacked-together system designed and built by people who probably shouldn't be allowed to program any more. Basically, it has been decided that users should be allowed to upload an image for their profile, before they actually finish registering. Just, right there, in the middle of the registration form, a completely separate form (functionally, it has to look the same) with a file upload field, a separate submit button, and an image display area. Apparently, the customer saw AJAX image uploading on another site, and decided, "That's cool, we want that!" without actually knowing how forms work or taking into account why an unregistered user should be uploading things to begin with
My initial idea was to create an invisible form elsewhere, and copy over the file box value when the button is clicked, followed by the AJAX submission. That doesn't work because JavaScript can't edit the value of a file box. Understandable.
Second attempt was to create nested forms. With some hacking, I did manage to get FireFox to see two forms, but submitting the inner one submits the outer one. "Undefined behavior", I believe is the term. Makes sense, you're not supposed to nest forms.
So - ignoring the fact that this makes absolutely no sense, and the client really ought to be told that - is there any way left to create a file upload form on a page, that can be submitted via AJAX, and is visibly located within another form? I'm hoping to avoid just creating the form elsewhere on the page and hammering it into place with abhorrent CSS hacks.
I don't know if this is ingenious enough for you or not, but what about embedding an iframe in the middle of the form and doing the file upload within that window? It may not be pure evil enough to really be that clever and skullduggerous, but it may work.
The only side-effect I can see if that when the parent is submitted, so is the embedded iframe. If you're careful enough and make sure to remove the iframe when it's not in use for the file upload, I think you should be ok.
Parent
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<form submit="http://www.google.com/search" method="get">
<div>
<input type="text" name="q" value="[ Search Google Here ]"/>
</div>
<iframe src="http://jfcoder.com/test/embed.php" style="width: 200px; height: 200px;"></iframe>
<div>
<button type="submit">Submit this Page's Form</button>
</div>
</form>
</body>
</html>
Embedded
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<?php
if ($_GET['q']) {
echo "<p><strong>GET SUBMITTED</strong></p>";
}
?>
<form submit="embed.php" method="get">
<div>
<input type="text" name="q" value="Type whatever"/>
<button type="submit">Submit this Page's Form</button>
</div>
</form>
</body>
</html>
http://jfcoder.com/test/parentform.php
这篇关于HTML - 嵌套表单解决方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
