使用多种形式的javascript冲突答案

【问题标题】：Conflict using multiple forms javascript使用多种形式的javascript冲突
【发布时间】：2011-11-20 12:12:46
【问题描述】：

我使用了两种不同的表单——一种是检索单选按钮，另一种是作为提交表单。问题是，我不能同时使用两个表单操作。

<table id="newImageTable" border="1" style="position:absolute; ">
<?
while($row=mysql_fetch_array($image_query)) {?>
    <form name="radioForm">
    <tr>
    <td><img border="0" src="<?=$row['image_path']?>" /></td>
    <td>
    <input type="radio" name="imageRadio" id="<?=$row['image_name']?>" />
    </td>
    </tr>
    </form>
<?}?>
<tr>
<td width="60%">
<!--<input type="file" id="image" /><input type="button" id="imagePathButton" value="Upload Image" onclick="uploadImagePath()" />-->
<form name="submitForm" action="http://128.233.104.33/passimagemodels/uploadServer.php?dbname=<? echo $dbname ?>" method="post" target="foo" enctype="multipart/form-data"                                                                                         
onSubmit="window.open('', 'foo', 'width=200,height=200,status=yes,resizable=yes,scrollbars=yes')">
   Upload New Image: <input name="myfile" type="file" id="imageBox" />
   <input type="submit" name="submitBtn" value="Upload" onclick=""/>
   </form></td>
   <td width="10%">
   <input type="button" value="Use selected image" id="useImageButton" onclick="post_value();"/>
   </td></tr>  
</table>

javascript代码：

function getRadioValue() {
for (index=0; index < document.radioForm.imageRadio.length; index++) {
        if (document.radioForm.imageRadio[index].checked) {
    var radioValue = document.radioForm.imageRadio[index].id;
    return radioValue;
        }
}
}

function post_value(){
      alert('im');
      var selected_Image = getRadioValue();

      if (selected_Image == null){
         alert('Please Select an Image');
      }
      else{
           window.opener.document.getElementById(imageId).value = selected_Image;
           self.close();
      }
 }

如果我将radioForm 放在表格之外，getRadioValue 函数可以正常工作，但Upload 按钮不会提交submitForm。如果我用radioForm 包围一个<tr>，反之亦然。嵌套表格有什么限制吗？

【问题讨论】：

你没有得到两个表格，你得到 n+1 个表格，其中 n 是记录的数量您的结果集（顺便说一下，您正在调用 $image_query）。您想通过多种形式实现什么目标？

标签： javascript html ajax forms

【解决方案1】：

如果您想跳过解释，请滚动到底部并找到解决方案。

您正在创建多个具有相同名称的表单。 document.radioForm 只会引用第一种形式，这可能是不希望的。要解决这个问题，请将表单标签放在while 循环之外。

在不失一般性的情况下，请参阅下面对您的问题的简化概述）：

当前情况（document.radioForm.imageRadio.length = 1）：

<!-- Only the first form is selected by JS. All of the others are ignored-->
<form name="radioForm"><input type="radio" name="imageRadio" id="imag1" /></form>
<form name="radioForm"><input type="radio" name="imageRadio" id="imag2" /></form>
<form name="radioForm"><input type="radio" name="imageRadio" id="imag3" /></form>
<!-- Et cetera -->

期望的情况（<form> 置于外部 while 循环）：

<form name="radioForm">
    <input type="radio" name="imageRadio" id="image1" />
    <input type="radio" name="imageRadio" id="image2" />
    <input type="radio" name="imageRadio" id="image3" />
</form>

固定代码
一种形式足以满足您的愿望。只有当您单击<input type="submit" .. /> 按钮时才会提交该表单。由于您之前的“第二个”表单的 name 属性已过时，因此我在不破坏任何代码的情况下省略了它。

<form name="radioForm"
     action="http://128.233.104.33/passimagemodels/uploadServer.php?dbname=<? echo $dbname ?>"
     method="post" target="foo" enctype="multipart/form-data">
<table id="newImageTable" border="1" style="position:absolute;">
<?
while($row=mysql_fetch_array($image_query)) {?>
    <tr>
        <td><img border="0" src="<?=$row['image_path']?>" /></td>
        <td>
            <input type="radio" name="imageRadio" id="<?=$row['image_name']?>" />
        </td>
    </tr>
<?}?>
    <tr>
        <td width="60%">
            <!--<input type="file" id="image" /><input type="button" id="imagePathButton" value="Upload Image" onclick="uploadImagePath()" />-->
            <input type="submit" name="submitBtn" value="Upload" />
        </td>
        <td width="10%">
           <input type="button" value="Use selected image" id="useImageButton" onclick="post_value();" />
        </td>
    </tr>  
</table>
</form>

我只调整了一件事：onsubmit 事件处理程序已被删除。它没有任何用途，并且会给用户带来巨大的烦恼。

【讨论】：

【解决方案2】：

不允许嵌套形式，检查How do you overcome the html form nesting limitation? 结果无法预测，但您可以使用 Javascript 来解决它。

签出 jQuery 序列化示例。看看它如何提取值，然后通过 DOM 提交。 http://api.jquery.com/serialize/

在您的情况下，文件上传表单应该是父表单，因为您需要它的编码类型才能工作。或者您可以选择 iframe 它，使用上述技术重新组织数据。

【讨论】：