Ajax 自动填充 php 窗体


Ajax Auto populate php Form

我正在构建一个简单的 php 表单来自动填充 PHP 表单上的数据。我已经检查了此页面中的其他示例 使用 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'];
?>

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

试试这个

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'];
}

而不是mysql_fetch_array使用mysql_fetch_assoc

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

谢谢 Venkat 它只是大写字母搞砸了。我改变了Othernames,因为它document.getElementById('othernames');起作用。是否有任何程序或插件可以纠正此问题?否则感谢所有有意见的人