Ajax Auto填充php Form

时间:2014-11-20 05:41:41

标签: javascript php jquery

我正在建立一个简单的PHP表单来自动填充PHP表单上的数据。我已经检查了此页面Auto fill form input fields from database using AJAX中的其他示例,它们看起来相同,但我无法弄清楚我的问题。我理解在msql查询上注入SQL的风险,但这是一种简单的形式

我的文本框和自动填充脚本

<style>
    form input { padding: 3px; }
</style>

<p><u><strong>Kindly enter the Trip ID to Generate a Budget.</u></strong></p>

<form align="center">
    Ref No:<br />
    <input name="refno" type="text" class="ed" /><br />
    Distance:<br />
    <input name="distance" type="text" id="distance" class="ed" onkeypress="return isNumberKey(event)" /><br />
    Fuel Cost/Litre<br/>
    <input name="fuelcostperl" type="text" id="fuelcostperl" class="ed" onkeypress="return isNumberKey(event)" /><br />
    <br><hr><table border=0 cellpadding=2>
        <tr><td>Req No:</label></td><td><input type='text' name='req_id' id="req_id" size=5 onchange="updateBudget()"></td></tr>
        <tr><td colspan=3>The following are details of the budget:</td></tr>
        <tr><td>Initials:</td><td><input type='text' id='init' /></td></tr>
        <tr><td>First Name:</td><td><input type='text' id='fname'/></td></tr>
        <tr><td>Othernames:</td><td><input type='text' id='Othernames'/></td></tr>
        <tr><td>Email Address:</td><td><input type='text' id='email'/></td></tr>
        <td>Trip Date:</td><td><input type='text' id='tripdate'/></td></tr>
        <tr><td>Drop Date:</td><td><input type='text' id='dropdate'/></td></tr>
        <tr><td>Destination:</td><td><input type='text' id='destination'/></td></tr>
        <tr><td>Number Of Persons:</td><td><input type='text' id='no_persons'/></td></tr>
        <tr><td>Vote:</td><td><input type='text' id='vote'/></td></tr>
        <tr><td>Trip Purpose:</td><td><input type='text' id='tripreason'/></td></tr>
    </table>
</form>
<script>
    var ajax = getHTTPObject();

    function getHTTPObject()
    {
        var xmlhttp;
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else if (window.ActiveXObject) {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } else {
            //alert("Your browser does not support XMLHTTP!");
        }
        return xmlhttp;
    }

    function updateBudget()
    {
        if (ajax)
        {
            var reqValue = document.getElementById("req_id").value;
            if (reqValue)
            {
                var url = "populatebudget.php";
                var param = "?req_id=" + escape(reqValue);

                ajax.open("GET", url + param, true);
                ajax.onreadystatechange = handleAjax;
                ajax.send(null);
            }
        }
    }
    function handleAjax()
    {
        if (ajax.readyState == 4)
        {
            budgetarr = ajax.responseText.split(",");

            var init = document.getElementById('init');
            var fname = document.getElementById('fname');
            var othernames = document.getElementById('othernames');
            var email = document.getElementById('email');
            var tripdate = document.getElementById('tripdate');
            var dropdate = document.getElementById('dropdate');
            var destination = document.getElementById('destination');
            var no_persons = document.getElementById('no_persons');
            var vote = document.getElementById('vote');
            var tripreason = document.getElementById('tripreason');

            init.value = budgetarr[0];
            fname.value = budgetarr[1];
            othernames.value = budgetarr[2];
            email.value = budgetarr[3];
            tripdate.value = budgetarr[4];
            dropdate.value = budgetarr[5];
            destination.value = budgetarr[6];
            no_persons.value = budgetarr[7];
            vote.value = budgetarr[8];
            tripreason.value = budgetarr[9];

        }
    }
</script>

<tr align="center">

<a href="transmanager.php">Back to Main Page</a>

</tr></div>
</body>
</html>

我的PHP链接到数据库

<?php
//you'll have to replace your credentials here
$mysqldatabase = "kuvs";
$mysqluser = "root";
$mysqlpassword = "";

//connect to db
$DBCONN = mysql_connect("localhost", $mysqluser, $mysqlpassword);
if (!$DBCONN)
    die("Couldn't connect to MySQL Server.");
//perform lookup
$query = "SELECT init,fname,othernames,email,tripdate,dropdate,destination,no_persons,vote,tripreason FROM request WHERE req_id=" . mysql_real_escape_string($_GET['req_id']);
$result = mysql_db_query($mysqldatabase, $query) or die(mysql_error());

//print out results
$row = mysql_fetch_array($result);
echo $row['init'] . "," . $row['fname'] . "," . $row['othernames'] . "," . $row['email'] . "," . $row['tripdate'] . "," . $row['dropdate'] . "," . $row['destination'] . "," . $row['no_persons'] . "," . $row['vote'] . "," . $row['tripreason'];
?>

我的问题是我一直试图填充所有其他字段,但只显示前两个

3 个答案:

答案 0 :(得分:0)

而不是mysql_fetch_array使用mysql_fetch_assoc

请在提及为document.getElementById('othernames');的html代码中检查提及错误的Othernames ID。 Javascript区分大小写

答案 1 :(得分:0)

试试这个

while($row = mysql_fetch_assoc($result)){
echo $row['init'].",".$row['fname'].",".$row['othernames'].",".$row['email'].",".$row['tripdate'].",".$row['dropdate'].",".$row['destination'].",".$row['no_persons'].",".$row['vote'].",".$row['tripreason'];
}

答案 2 :(得分:0)

感谢Venkat,它只是大写的。我将Othernames更改为document.getElementById('othernames');它有效。是否有任何程序或插件可以解决这个问题? 否则,感谢所有有意见的人