Конфликт с использованием нескольких форм 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 вне таблицы, 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 былудален.Это не имеет смысла и будет огромным раздражением для пользователя.

Answer 2

вложенная форма не разрешена, отметьте Как преодолеть ограничение на вложенность html-формы? результат непредсказуем, но вы можете использовать Javascript для его обхода.

Пример извлечения jQuery serialize,посмотрите, как он извлекает значения, а затем отправляет их через DOM.http://api.jquery.com/serialize/

В вашем случае форма загрузки файла должна быть родительской, потому что вам нужен ее тип кодирования для работы.Или вы можете при желании встроить его, используя описанную выше технику для реорганизации данных.