JS Form in form problem

[sterckx]

Hello,

 

This problem is driving me crazy:

 

I'm making a form with some input fields, and with an upload ( with progressbar ), i have an seperate form to arrange the upload stuff. When i place the form with the upload outside the other form, everything works correct. But when I place the upload form in the other, my javascript code can't find document.getElementById("formid")...

 

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 ( not when upload form is outside other form. )

 

PHP CODE:

<form action="<?php print $url; ?>" method="post" enctype="multipart/form-data" name="form" id="form">
($url = gezonden.php (the new php page, doesn't matter for this )
(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"> </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()"/>

 

Anyone knows how to solve this ?

 

Niels

[KevinM1]

I don't think you can nest forms.