jquery load removes form elements
<p>I have a weird problem. I'm kinda new to JQuery with PHP. </p>

<p>I load a modal php page using JQuery load.</p>

<pre><code> $("#dialog").load(e.target.href);
</code></pre>

<p>The modal page loads , all lists are initated (via mySQL) but all the form elements are missing. I do not understand why. The elements are there as they are shown on the screen. Maybe they are not in the form???</p>

<p>I tried to get all elements in the form using, but although the form is found there are no elements. (????).</p>

<pre><code>var formsCollection = document.getElementsByTagName("form");
            for(var i=0;i&lt;formsCollection.length;i++)
            {
                alert(formsCollection[i].name);
                 var theForm = formsCollection[i];

                 alert("number of elements in form   "+theForm.elements.length); // shows 0

            }
</code></pre>

<p>All works fine when I run the page as a plain php file. Here is the form.</p>

<pre><code>&lt;form name="eventForm"&gt;
    &lt;input type="hidden" name="uid" value="&lt;?php echo $uid?&gt;"&gt;
        &lt;tr&gt;
            &lt;td nowrap valign="top" align="right" nowrap&gt;&lt;span class="form_labels"&gt;&lt;/span&gt;&lt;/td&gt;
            &lt;td&gt;&lt;?php monthPullDown($m, $lang['months']); dayPullDown($d); yearPullDown($y); ?&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td nowrap valign="top" align="right" nowrap&gt;
            &lt;span class="form_labels"&gt;&lt;?php echo $lang['activity']?&gt;&lt;/span&gt;&lt;/td&gt;
            &lt;td&gt;
                &lt;?php
                    if ($mode == "Add"){
                        include("../php/list_activities.php");
                    }
                    else{
                        echo $activity;
                    }
                ?&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td nowrap valign="top" align="right" nowrap&gt;
            &lt;span class="form_labels"&gt;&lt;?php echo $lang['title']?&gt;&lt;/span&gt;&lt;/td&gt;
            &lt;td&gt;&lt;input type="text" name="title" size="29" value="&lt;?php echo $title ?&gt;" maxlength="50"&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td nowrap valign="top" align="right" nowrap&gt;
            &lt;span class="form_labels"&gt;&lt;?php echo $lang['text']?&gt;&lt;/span&gt;&lt;/td&gt;
            &lt;td&gt;&lt;textarea cols=22 rows=6 name="text"&gt;&lt;?php echo $text ?&gt;&lt;/textarea&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td nowrap valign="top" align="right" nowrap&gt;&lt;span class="form_labels"&gt;&lt;?php echo $lang['starttime'] ?&gt;&lt;/span&gt;&lt;/td&gt;
            &lt;td&gt;&lt;?php hourPullDown($stime_vals['hour'], "start"); ?&gt;&lt;b&gt;:&lt;/b&gt;&lt;?php minPullDown($stime_vals['minute'], "start"); amPmPullDown($stime_vals['pm'], "start"); ?&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td nowrap valign="top" align="right" nowrap&gt;&lt;span class="form_labels"&gt;&lt;?php echo $lang['endtime'] ?&gt;&lt;/span&gt;&lt;/td&gt;
            &lt;td&gt;&lt;?php hourPullDown($etime_vals['hour'], "end"); ?&gt;&lt;b&gt;:&lt;/b&gt;&lt;?php minPullDown($etime_vals['minute'], "end"); amPmPullDown($etime_vals['pm'], "end"); ?&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;br&gt;&lt;input type="button" value="&lt;?php echo $buttonstr ?&gt;" onClick="formSubmit()"&gt;&amp;nbsp;&lt;input type="button" id="closebutton" value="&lt;?php echo $lang['cancel'] ?&gt;" onClick="window.close();"&gt;&lt;/td&gt;&lt;/tr&gt;
    &lt;/form&gt;
</code></pre>

<p>And the formSubmit method.</p>

<pre><code>&lt;script language="JavaScript"&gt;
    function formSubmit() {


        alert('SUBMIT');

        var formsCollection = document.getElementsByTagName("form");
            for(var i=0;i&lt;formsCollection.length;i++)
            {
                alert(formsCollection[i].name);
                 var theForm = formsCollection[i];

                 alert("number of elements in form "+theForm.elements.length);

            }

        var eventForm = document.getElementById("eventForm");


        // results in undefined??
        if(document.eventForm.title.value == ""){
            alert("&lt;?php echo $lang['titlemissing'] ?&gt;");
            return;
        }

        //alert("form submit called "+document.eventForm.title.value);

        if(document.eventForm.activity.value == ""){
            alert("&lt;?php echo $lang['activitymissing'] ?&gt;");
            return;
        }

        document.eventForm.method = "post";
        document.eventForm.action = "eventsubmit.php&lt;?php echo $qstr ?&gt;";
        document.eventForm.submit();

    }
    &lt;/script&gt;
</code></pre>

<p>From the calling php file. this is the Jquery caller method</p>

<pre><code>&lt;script&gt;
        $(document).ready(function() {

            //select all the a tag with name equal to modal
            $('a[name=modal]').click(function(e) {
                //Cancel the link behavior
                e.preventDefault();
                //Get the A tag
                var id = $(this).attr('href');

                // alert("i was fired "+id);

                //Get the screen height and width
                var maskHeight = $(document).height();
                var maskWidth = $(window).width();

                //Set height and width to mask to fill up the whole screen
                $('#mask').css({
                    'width' : maskWidth,
                    'height' : maskHeight
                });

                //transition effect
                $('#mask').fadeIn(1000);
                $('#mask').fadeTo("slow", 0.8);

                //Get the window height and width
                var winH = $(window).height();
                var winW = $(window).width();

                //Set the popup window to center
                $('#dialog').css('top', winH / 2 - $('#dialog').height() / 2);
                $('#dialog').css('left', winW / 2 - $('#dialog').width() / 2);

                $("#dialog").load(e.target.href);

                //transition effect
                $('#dialog').fadeIn(2000);

            });

        });
    &lt;/script&gt;
</code></pre>

<p>This is the div.</p>

<pre><code> &lt;div id="boxes"&gt;

        &lt;div id="dialog" class="window"&gt;

        &lt;/div&gt;

    &lt;/div&gt;
</code></pre>

<p>most of the code comes from this example <a href="http://www.queness.com/post/77/simple-jquery-modal-window-tutorial" rel="nofollow">jquery modal tutorial</a></p>

<p>Thanks for your help,
Coen</p>
