JS Form in form

[sterckx]

Hallo,

Ik word gek van volgend probleem:

ik ben een formulier aan het maken met een upload (met progressbar), de upload"spullen" steken allemaal in een apart formulier. Als ik dit formulier met de upload buiten het ander formulier zet is er geen probleem, alles werkt, wanneer ik het uplaod form in het ander zet, krijg ik een null exception. De javascript code vindt het binnenste formulier niet als ik dit zoek via document.getElementById, hij vindt het dus wel als de formulieren niet in elkaar staan.

javascript code:

form.PHP:
            function submitForms(){
                if(document.form0.file0.value == ""){
                    alert("CV verplicht");
                } else {
                    checkRadiobuttons(document.form);
                    document.form.submit();
                }
            }

            function callFunctions(){
                document.getElementById('moreUploadsLink').style.display = 'block';
                var formcount = "form" + (upload_number-1);
                uploadForm(formcount, '4d46e2a1bf27bad15d63790e447bcc46' + formcount);
            }

upload_form.js:
function uploadForm(form, sid) {
    //var theForm = $(form);
    var theForm = document.getElementById(form);

==> Error : theForm is null ( enkel als het upload formulier binnen de andere form is )

PHP CODE:

 <form action="<?php print $url; ?>" method="post" enctype="multipart/form-data" name="form" id="form">
($url = gezonden.php 
(REMOVED TABLE)
(REMOVED TABLE)
(REMOVED TABLE)

            <div id="divavailability">
                <table border='0' cellspacing='5' cellpadding='0'>
                    <tr>
                        <td> Beschikbaarheid:</td>
                        <td> <input type='text' name='availability' id='availability'/></td>
                        <td> (DD/MM/JJJJ) </td>
                        <td width="18%"> </td>
                        <td width="18%"> </td>
                    </tr>
                </table>
            </div>

            <div>
                <div id="uploadforms" style="width: 43em;padding: .5em;">
==> THIS FORM IS CAUSING THE TROUBLES
                    <form METHOD="POST" enctype="multipart/form-data"
                          name="form0" id="form0"
                          action="upload.cgi?sID=4d46e2a1bf27bad15d63790e447bcc46form0"
                          target="form0_iframe" class="forms">
                        <div class="progressBox">
                            <div style="" class="progressBar" id="4d46e2a1bf27bad15d63790e447bcc46form0_progress">&nbsp;</div>
                        </div>
                        <div class="fileName" id="4d46e2a1bf27bad15d63790e447bcc46form0_fileName">
                        </div>
                        <input type="file" name="file0" id="file0" class="inputfile" onchange="callFunctions();"/>
                    </form>
                </div>
                <div id="moreUploadsLink" class="morelinks"><a href="javascript:addFileInput();">Attach file</a></div>
                <iframe name="form0_iframe" id="form0_iframe" src="blank.html" class="loader"></iframe>
            </div>

TABLE REMOVED

            <!-- hidden input to place variable when radiobutton is empty
            -->
            <form  method="POST" action="" name="formradio" id="formradio">
                <input type="hidden" id="radiobuttonscheck" name="radiobuttonscheck" value=""/>
            </form>
        </form>
        <input type="button" value="Verzenden" id="btnSubmit" name="btnSubmit" src="images/knop_verzenden.png" onclick ="submitForms()"/>

Weet iemand hoe dit op te lossen valt?

Niels