如何使用我的 ajax 脚本获取名字和姓氏

Question

我有一个 ajax 脚本，它从文本框 Employee_Name 获取 post 并自动填充 Employee_Number。它在用户键入名字时有效，但我希望它在用户键入名字和姓氏时仍然有效。是否有可能做到这一点？

这是insert.php

<?php



header('Content-Type: application/json');


try {

$dbName = "C:\inetpub\wwwroot\fpdb\staffing.mdb";
 $db = new PDO("odbc:DRIVER={Microsoft Access Driver (*.mdb)};charset=UTF-8; DBQ=$dbName; Uid=; Pwd=;");

}
catch (PDOException $e) {
  echo $e->getMessage();
}
$Employee_Name=  trim($_POST["Employee_Name"]);  
$Employee_Lastname=  trim($_POST["Employee_Name"]);      
        $params = array( ':FIRSTNAME' => $Employee_Name, ':LASTNAME'=>$Employee_Lastname );

$query = $db->prepare("
    SELECT * FROM tbl_USERS
    WHERE FIRSTNAME=:FIRSTNAME and LASTNAME=:LASTNAME");

$query->execute($params);

$result = $query->fetch(PDO::FETCH_ASSOC);
$EMPLOYEE_NUMBER=trim('EMPLOYEE_NUMBER');
$rc= $result[$EMPLOYEE_NUMBER];

echo json_encode ($rc);

?>

具有 php 形式的脚本。

<head>
<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>css/view.css">
<script src="<?php echo base_url();?>js/view.js"></script>
<script src="<?php echo base_url();?>js/jquery-1.11.1.min.js"></script>
<script>


$(document).ready(function(){
      $("#Employee_Name").change(function(){
          var Employee_Name=$(this).val();
           if(Employee_Name != ''){
                  $.ajax({
                              type:"post",
                              url:"insert.php",
                              data:"Employee_Name="+Employee_Name,
                              datatype:"json",
                              success:function(data){ $("#Employee_Number").val(data);
                               $('#Employee_Number').css( "background-color","#B3CBD6"  ) 
                               $('#Employee_Number').animate({backgroundColor: "#ffffff"});
                               },
                                 error: function(response){
    alert("error scripting")    }

                                                           });
           }
           else{
               $("#Employee_Number").val("");
               }

          });
     });



</script>   

<link href="<?php echo base_url();?>assets/css/bootstrap.min.css" rel="stylesheet">

</head>
<?php $msg = $this->session->flashdata('msg'); if((isset($msg)) && (!empty($msg))) { ?>
                <div class="alert alert-success" >

                  <a href="#" class="close" data-dismiss="alert">&times;</a>
                <?php print_r($msg); ?>
                </div>
                <?php } ?>
                <?php $msg = $this->session->flashdata('msg1'); if((isset($msg)) && (!empty($msg))) { ?>
                <div class="alert alert-error" >

                  <a href="#" class="close" data-dismiss="alert">&times;</a>
                <?php print_r($msg); ?>
                </div>
                <?php } ?>
<body id="main_body" >


    <div id="form_container">


<form class="" action="<?php echo base_url();?>employee/insert_employee" method="post">

        <div class="form_description">
            <h2>Enter Data</h2>

        </div>                      
            <ul >

                    <li id="li_1" >
        <label class="description" for="element_1">Date Scheduled</label>
        <div>
            <input id="element_1" name="Date_Scheduled" class="element text medium" type="text" maxlength="255" value="" required/> 
        </div> 
        </li>       <li id="li_2" >
        <label class="description" for="element_2">Employee_Name </label>
        <div>
            <input id="Employee_Name" name="Employee_Name" class="element text medium" type="text" maxlength="255" value="" required/> 
        </div> 


        </li>       <li id="li_3" >
        <label class="description" for="element_3">Employee Number </label>
        <div>
            <input id="Employee_Number" name="Employee_Number" class="element text medium" type="text" maxlength="255" value="" required/> 
        </div> 
        </li>   


<li id="li_3" >
        <label class="description" for="element_3">Time Reported </label>
        <div>
            <input id="element_3" name="Time_Reported" class="element text medium" type="text" maxlength="255" value="" required/> 
        </div> 
        </li>   

<li id="li_6" >
        <label class="description" for="element_6">Reason </label>
        <div>
        <select class="element select medium" id="element_6" name="reason" required> 
            <option value="" selected="selected">Please Select..</option>
<option value="ILL PTO" >ILL PTO</option>
<option value="PTO" >PTO</option>
<option value="OTHER" >Other</option>

        </select>
        </div> 
        </li>

<li id="li_4" >
        <label class="description" for="element_4">Scheduled Area</label>
        <div>
        <select class="element select medium" id="element_4" name="Scheduled_Area" required> 
            <option value="" selected="selected">Please Select..</option>
<option value="Outbound" >Outbound</option>
<option value="Inbound" >Inbound</option>
<option value="Claims" >Claims</option>

        </select>
        </div> 
        </li>   


        <li id="li_6" >
        <label class="description" for="element_6">Contact </label>
        <div>
        <select class="element select medium" id="element_6" name="contact" required> 
            <option value="" selected="selected">Please Select..</option>
<option value="ILL PTO" >ILL PTO</option>
<option value="PTO" >PTO</option>
<option value="OTHER" >Other</option>

        </select>
        </div> 
        </li>


        <li id="li_6" >
        <label class="description" for="element_6">Approval </label>
        <div>
        <select class="element select medium" id="element_6" name="Approval" required> 
            <option value="" selected="selected">Please Select..</option>
<option value="ILL PTO" >ILL PTO</option>
<option value="PTO" >PTO</option>
<option value="OTHER" >Other</option>

        </select>
        </div> 
        </li>
          <input id="Complete" class="default" type="hidden" name="Complete" value="NO" />
            <input id="Status" class="default" type="hidden" name="Status" value="1" />

                    <li class="buttons">


                <input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" />
        </li>
            </ul>
        </form> 


</body>
</html>

从访问数据库中拉取的下拉框

<?php

try {

$dbName = "C:\inetpub\wwwroot\fpdb\staffing.mdb";
 $db = new PDO("odbc:DRIVER={Microsoft Access Driver (*.mdb)};charset=UTF-8; DBQ=$dbName; Uid=; Pwd=;");

}
catch (PDOException $e) {
  echo $e->getMessage();
}
$sql="SELECT FIRSTNAME, LASTNAME, EMPLOYEE_NUMBER  FROM tbl_USERS WHERE STATUS='A' order by FIRSTNAME";

/* You can add order by clause to the sql statement if the names are to be displayed in alphabetical order */

echo "<select id='Employee_Name' name=Employee_Name value=''>Employee_Name</option>"; // list box select command
foreach ($db->query($sql) as $row){//Array or records stored in $row
echo "<option value=$row[FIRSTNAME] $row[LASTNAME]>$row[FIRSTNAME]  $row[LASTNAME]</option>"; 

/* Option values are added by looping through the array */ 
}
echo "</select>";// Closing of list box


?>

Answer 1

$("#Employee_Name").change 将在第一次更改事件时触发，这意味着当输入元素失去焦点时。最好的解决方案是使用一个单独的姓氏字段，并且仅当两个字段都有内容时才触发您的 ajax post 请求。

Answer 2

如果名字和姓氏将在同一个输入中键入，您可以拆分字符串，然后使用知道名字和姓氏的逻辑分开：

使用Javascript:

$(document).ready(function(){
    $("#Employee_Name").change(function(){
    var txt = $(this).val();
    var nameArray = txt.split(",");
    var Employee_Name = nameArray[0];
    var Employee_LastName =  nameArray[1];
    if(Employee_Name != "" && Employee_LastName != ""){
        $.ajax({
            type:"post",
            url:"insert.php",
            data:"Employee_Name="+Employee_Name+"&Employee_Lastname="+Employee_LastName,
            datatype:"json",
            contentType: "application/x-www-form-urlencoded; charset=ISO-8859-1",
            success:function(data){
                $("#Employee_Number").val(data);
                $('#Employee_Number').css( "background-color","#B3CBD6"  ) 
                $('#Employee_Number').animate({backgroundColor: "#ffffff"});
            },
            error: function(response){
                alert("error scripting");
            }
        });
    }
    else{
        $("#Employee_Number").val("");
    }
    });
});

在PHP中：

$Employee_Name = trim($_POST["Employee_Name"]);  
$Employee_Lastname = trim($_POST["Employee_Lastname"]);

echo json_encode(explode('.',$rc)[0]);

如何使用我的 ajax 脚本获取名字和姓氏

How to get First and last name to work with my ajax script

html

php

ajax

ms-access