使用jQuery.change将表单中的数据加载到Ajax驱动的PHP页面中

时间:2009-09-17 12:32:05

标签: php jquery ajax

我可能犯了一些愚蠢的错误,但我对Jquery的世界更新,我正在寻找这个问题的一些帮助。

我有一个表单,我需要在更改其值后检查/验证两个日期。一旦他们改变我有一个Ajax调用,加载一个页面“checkdates.php”并传入两位数据。使用GET更改的日期和项目名称为“checkdates.php”并将数据添加到URL字符串。此Ajax调用将页面加载到具有ID“status”的div中,并且php页面显示日期检查的结果。

旧代码使用原型将数据作为函数提取,我在表单元素上使用了onChange事件:

<script type="text/javascript" src="prototype.js"></script>
    <script type="text/javascript">
    /*function checkDate(date,project){
    if(date!==''){
    new Ajax.Updater('status', 'datechecker.php?date='+date+'&project='+project, { method: 'get' });
    } else {
    alert('enter a valid date!');
    }
    }
</script>

我试图转移到jquery的代码现在看起来像:

<script type="text/javascript">
    $(document).ready(function() {
        $('input#date_to').change(function() {
        var datevalue = $(this).val();
        $('#status').load('datechecker.php?date='+datevalue+'&project='+<? echo $_COOKIE['department']; ?>);
        }
        );

        $('input#date_from').change(function() {
        var datevalue = $(this).val();
        $('#status').load('datechecker.php?date='+datevalue+'&project='+<? echo $_COOKIE['department']; ?>);
        }
        );
    });
    </script>

我认为这可能是一个问题,可能与我如何提取我的数据或我如何要求它检查.change功能,因为它没有触发。任何帮助都会很精彩。免责声明:我对jquery有点新意,所以如果这是一个明显的白痴错误,那就请好。

编辑: 根据要求提供文件其余部分的HTML / PHP(对不起格式化,这是一个快速而又脏的项目,最后一分钟却变得非常令人头疼):

<form id="form1" name="form1"  method="get" action="?page=post_request">
<div class="timeavailable">
<? 
    require('data.php');
    $name=$_COOKIE['un'];
    $query="SELECT * FROM time WHERE emp_name='".$name."'";
    $result=mysql_query($query);
    $num=mysql_num_rows($result);
    mysql_close();
    $i=0;
?>
Vac: <b><? echo mysql_result($result,$i,"vacationtime"); ?></b>   
Personal: <b><? echo mysql_result($result,$i,"personaltime"); ?></b>
Pts: <b><? echo mysql_result($result,$i,"points"); ?></b>
<input type="hidden" name="vacationtime" value="<? echo mysql_result($result,$i,"vacationtime"); ?>">
<input type="hidden" name="personaltime" value="<? echo mysql_result($result,$i,"personaltime"); ?>">
</div>
        <h1>Time Off Request Form</h1>
        <div class="header">
<div class="floatydetails">
<br>
Reason for Absence:<br>
<textarea name="reason_detail" id="reason_detail" rows="<?php echo $textareaheight; ?>" cols="<?php echo $textareawidth; ?>"></textarea>
<div id="status"></div>
<div id="daysrequested"></div>
</div>

        <div class="col1">
        Type of Absence Requested:<br>
            <label for="reason_for_request"></label>
                <select name="reason_for_request" id="reason_for_request">
                    <option value="Sick" >Sick</option>
                    <option value="Vacation" >Vacation</option>
                    <option value="Bereavement" >Bereavement**</option>
                    <option value="Doctor Appointment" >Doctor Appointment**</option>
                    <option value="Court" >Court*</option>
                    <option value="Jury Duty" >Jury Duty*</option>
                    <option value="Personal Day" >Personal Day</option>
                    <option value="Other" >Other</option>
                </select><br>
        <div class="col2">
            Date of Request (mm/dd/yyyy)<br/>
            <label for="date_from">From:</label> 
            <input type="text" name="date_from" id="date_from" class="required" /><br>
            <label for="date_to">To:</label>    
            <input type="text" name="date_to" id="date_to" class="required" /><br>
            Partial Request (HH:MM am/pm)<br/>
            <label for="date_from">From:</label> 
            <input type="text" name="partial_from" id="partial_from" class="date-pick"  /><br>
            <label for="date_to">To:</label>    
            <input type="text" name="partial_to" id="partial_to" class="date-pick" /><br>

        </div>
        </div>
        <div class="clear-fix"></div><br><br>
        <hr>
        <center><b>
        Note: If You do Not have the Time Available, Your request will be Denied.<br>
        * Proper Documentation is required Before approval is made.   ** Proper documenation is required upon return.
        </b></center>
        </div>
        <input type="hidden" name="do" value="post">
        <input type="hidden" name="emp_name" value="<? echo $_COOKIE['un']; ?>">
        <input type="hidden" id="projects" name="projects" value="<? echo $_COOKIE['department']; ?>">
        <input type="hidden" name="supervisor" value="<? echo $cms->grabItemByName(employees, $_COOKIE['user_id'], supervisor); ?>">
        <input type="hidden" name="emp_number" value="<? echo $cms->grabItemByName(employees, $_COOKIE['user_id'], employee_id); ?>">
        <input type="hidden" name="page" value="post_request">
        </form>

3 个答案:

答案 0 :(得分:1)

$_COOKIE['department']是整数吗?否则你可能会遇到语法错误。

两个函数似乎都是相同的,所以你可以像这样组合它们:

<script type="text/javascript">
    $(document).ready(function() {
        $('input#date_to,input#date_from').change(function() {
            var datevalue = $(this).val();
            $('#status').load('datechecker.php?date='+datevalue+'&project='+<? echo json_encode($_COOKIE['department']); ?>);
        });
    });
</script>

答案 1 :(得分:1)

这是一个可能的答案:

jquery change event trigger

另外,尝试在Firebug中观看控制台,以确保您的php页面正在获取/返回正确的值。

答案 2 :(得分:0)

我在你的一些帮助和一些反复试验后找到了解决方案。使用.ajax我能够获得更多的灵活性来做我想做的事。

<script type="text/javascript">
    $(document).ready(function() {
        $('#date_to,#date_from').change(function() {
        //$('input').change(function() {
            var datevalue = $(this).val();
            var project = $('#projects').val();
            $('#status p').load('datechecker.php?date='+datevalue+'&project='+project);
        });
    });
</script>

希望这可以帮助别人。