Conflict using multiple forms javascript

Question

I'm using two different forms - one is to retrieve radio button, another is as submission form. Problem is, I cannot use both the form actions at a time.

<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 code:

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

Here if I put the radioForm outside the table, getRadioValue function works fine but Upload button does not submit the submitForm. And if I surround one <tr> with radioForm scenario is just vice-versa. Are there any restrictions on nesting forms?

You do not get *two* forms, you get *n+1* forms where *n* is the number of records in your result set (which you are calling *$image_query* by the way). What are you trying to achieve by multiple forms? — Majid Fouladpour, Sep 19 '11 at 19:06

Rob W · Answer 1 · 2011-09-19T19:31:21.870

Scroll to the bottom if you want to skip the explanation, and get to the solution.

You're creating multiple forms with the same name. document.radioForm will only refer to the first form, which is probably not desired. To solve it, place the form tags outside the while loop.

See below for a simplified overview of your problem, without loss of generality):

Current situation (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 -->

Desired situation (<form> placed outside the while loop):

<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>

Fixed code
One form is enough to meet your wishes. The form will only be submitted when you click at the <input type="submit" .. /> button. Since the name attribute of your previous "second" form is obsolete, I've omitted it without breaking any code.

<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>

I have adjusted only one thing: The onsubmit event handler have been removed. It serves no purpose, and would be a huge annoyance to the user.

score 1 · Answer 2 · edited May 23 '17 at 10:24

nesting form isn't allowed, check How do you overcome the html form nesting limitation? the result unpreditable but you can use Javascript to workaround with it.

Checkout jQuery serialize example. see how it extract values, and then submit from via DOM. http://api.jquery.com/serialize/

In your case, file upload form should be the parent, because you need its encode type to work. Or you can optionally iframe it, using the above technique to reorganize data.

Conflict using multiple forms javascript

2 Answers2