1. 首页
  2. 问答
  3. 使用多种形式的冲突javascript

使用多种形式的冲突javascript

2011-09-19 88 views
1

我使用两种不同的形式 - 一种是检索单选按钮，另一种是提交形式。问题是，我无法同时使用两种表单操作。使用多种形式的冲突javascript

<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代码：如果我把radioForm表外

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(); 
     } 
}

这里，getRadioValue功能工作正常，但Upload按钮不提交submitForm。如果我围绕一个<tr>与radioForm情况反之亦然。对嵌套形式有任何限制吗？

来源

2011-09-19 Pow

+1

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

回答

2

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

您正在创建具有相同名称的多个表单。 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事件处理程序已被删除。它没有任何用处，并且会对用户造成巨大的不便。

来源

2011-09-19 19:03:08

相关问题

 相关问题