1. 首頁
  2. 問答
  3. 使用多種形式的衝突javascript

使用多種形式的衝突javascript

2011-09-19 85 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

相關問題

 相關問題