jquery load删除表单元素

时间:2012-06-11 19:11:08

标签: php javascript jquery

我有一个奇怪的问题。我对PHP的JQuery有点新意。

我使用JQuery加载加载模态php页面。

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

加载模态页面,启动所有列表(通过mySQL),但缺少所有表单元素。我不懂为什么。元素在屏幕上显示。也许他们的形式不是???

我尝试使用表单中的所有元素,但是虽然找到了表单但没有元素。 (????)。

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

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

            }

当我将页面作为普通的php文件运行时,一切正常。这是表格。

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

还有formSubmit方法。

<script language="JavaScript">
    function formSubmit() {


        alert('SUBMIT');

        var formsCollection = document.getElementsByTagName("form");
            for(var i=0;i<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("<?php echo $lang['titlemissing'] ?>");
            return;
        }

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

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

        document.eventForm.method = "post";
        document.eventForm.action = "eventsubmit.php<?php echo $qstr ?>";
        document.eventForm.submit();

    }
    </script>

来自调用php文件。这是Jquery调用方法

<script>
        $(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);

            });

        });
    </script>

这是div。

 <div id="boxes">

        <div id="dialog" class="window">

        </div>

    </div>

大部分代码来自此示例jquery modal tutorial

感谢您的帮助, 科恩

0 个答案:

没有答案