javascript - 使用多个表单javascript时发生冲突

Question

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

<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 放在这里在 table 外面，getRadioValue功能正常但Upload按钮不提交 submitForm .如果我包围一个 <tr>与 radioForm情况正好相反。嵌套形式有什么限制吗？

Answer 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事件处理程序已被删除。它毫无用处，而且会给用户带来巨大的烦恼。