添加客人信息 创建 div 选择姓名 自动把证件号放入了文本框

最新推荐文章于 2023-10-25 18:26:10 发布
最新推荐文章于 2023-10-25 18:26:10 发布
阅读量1.2k 收藏
点赞数
文章标签： div function textbox asp server search
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/goodyatou/article/details/4789596
版权

前面导入jquery.js

     <script language="JavaScript" type="text/javascript">
 
    var Arr_values;
    var Arr_value = new Array();

    Arr_values = Arr_value;
  
    document.onclick = function() {
        deleteDiv();
    }
    $(document).ready(function() {

        if (document.getElementById("txtXmlStr") == null) {
            return;
        }
        var xml_value = document.getElementById("txtXmlStr").value;

        if (xml_value == "") {
            return;
        }

        var detail;
        detail = xml_value.split("||");
        // alert(detail.length);
        for (var i = 0; i < detail.length; i++) {
            var node = detail[i];
            var moredetail = node.split("#");
            //    alert( moredetail[0]+"  "+ moredetail[1]+"  "+ moredetail[2]);
            var name = moredetail[0];
            var idCard = moredetail[1];
            var Ctype = moredetail[2];
            Arr_value[i] = new Array(name, idCard, Ctype);
        }

        Arr_values = Arr_value;
        document.getElementById("txtXmlStr").value = "";
        //alert(Arr_values.length);

        //});

    });

    //删除层
    function deleteDiv() {
        var kv = document.getElementById("google");
        if (kv) {
            kv.removeNode(true);
        }
    }

    //查找匹配的关键字
    function search(txtNameKey) {
        //防止产生N多个DIV,所以先判断是否存在,如果存在,则删除.
        deleteDiv();

        //创建一个层，用于显示实时提示
        var div = document.createElement("div");
        div.id = "google";
        div.style.position = "absolute"; //设置位置为绝对位置
        //控制层的位置和大小
        //位置
        var top;
        var left;
        //alert(txtNameKey.value);
        //alert(document.getElementById(txtNameKey).value);
        var tempdiv = txtNameKey;
        top = tempdiv.offsetTop;
        left = tempdiv.offsetLeft;
        while (tempdiv = tempdiv.offsetParent) {
            top += tempdiv.offsetTop;
            left += tempdiv.offsetLeft;
        }

        //大小
        var width = txtNameKey.offsetWidth;
        var height = 0;

        //设置
        div.style.top = top + txtNameKey.offsetHeight - 1;
        div.style.left = left;
        div.style.width = width - 2;

        //效果:边框样式框和背景色
        div.style.backgroundColor = "white";
        div.style.borderTopStyle = "solid";
        div.style.borderBottomStyle = "solid";
        div.style.borderLeftStyle = "solid";
        div.style.borderRightStyle = "solid";

        //注意,边框是加在区域外围的,所以在设置宽度的时候减掉了1 + 1 = 2个像素
        div.style.borderTopWidth = 1;
        div.style.borderBottomWidth = 1;
        div.style.borderLeftWidth = 1;
        div.style.borderRightWidth = 1;

        //填充数据
        var value = txtNameKey.value;
        var f = false;
        for (var i = 0; i < Arr_values.length; i++) {
            if (Arr_values[i][0].substr(0, value.length).toLowerCase() == value.toLowerCase()) {
                f = true;

                //每个选项填充到div中
                var span = document.createElement("<div>");
                span.innerText = Arr_values[i][0];
                span.title = Arr_values[i][1];
                span.name = Arr_values[i][2];
                span.style.fontSize = 14;
                span.style.padding = "2px";
                div.appendChild(span);
                span.style.width = width - 2

                //触发每个项目的鼠标移入移出事件
                span.onmouseover = function() {
                    event.srcElement.style.cursor = "hand";
                    event.srcElement.style.backgroundColor = "blue";
                    event.srcElement.style.color = "white";
                }
                span.onmouseleave = function() {
                    event.srcElement.style.cursor = "default";
                    event.srcElement.style.backgroundColor = "white";
                    event.srcElement.style.color = "black";
                }
                //单击选项时将该选项的值填充到文本框.
                span.onclick = function() {
                    txtNameKey.value = event.srcElement.innerText;
                    var k = txtNameKey.name.substr(txtNameKey.name.lastIndexOf("e") + 1);
                  
                    document.getElementById("txtCardID" + k).value = event.srcElement.title;
                    document.getElementById("txtCustomerName" + k).value = event.srcElement.innerText;           
                 //需要增加多种类型   document.getElementById("drplstPagerType" + k).options[event.srcElement.name].selected = true;
                    $("#chkTravel" + k).attr("checked", "");
                    //填充完毕后删除DIV
                    deleteDiv();
                }
            }
        }

        //将层追加到页面
        if (f) {
            document.body.appendChild(div);
        }

        //如果文本框中没有内容,则删掉DIV  
        if (txtNameKey.value.length == 0) {
            deleteDiv();
        }
    }
    function changeEvent(islog, gnamei) {
 
        var name = "";
        var carid = "";
        var cbVisitor = "";
        var gname = "";
        var cardid = "";
        if (islog == "0") {
            name = "txtCustomerName" + gnamei;
            carid = "txtCardID" + gnamei;
            cbVisitor = "chkTravel" + gnamei;
            gname = $("#" + name).attr("value");
            cardid = $("#" + carid).attr("value");
        } else { //Gname06 Card06 cbVisitor206
            name = "txtCustomerName" + gnamei;
            carid = "txtCardID" + gnamei;
            cbVisitor = "chkTravel" + gnamei;
            gname = $("#" + name).attr("innerHTML");
            cardid = $("#" + carid).attr("innerHTML");
        }

//如何判断
        $.post("../fellowship/DisposeRequest.aspx", {
            "methodParameter": "JasonOrderTable2",
            "gname": escape(gname),
            "cardid": cardid
        },//到此页面中去判读数据库中是否已经存在了该人
        function(xml_data) {

          

            if (xml_data == "1") {
                alert("已是常旅客！");

                //             var c = document.getElementById("Visitor1"+gnamei);
                //             c.checked="";
                $("#" + chkTravel).attr("checked", "");
            }

        });

    }
    </script>

 

 

  <tr>
                            <td style="background-image: url(/images/bg/thead.gif); background-repeat: repeat-x;
                                text-align: left;" colspan="6" class="font3">
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;乘客人数：
                                <select id="drplstGuestNum" name="drplstGuestNum" οnchange="ShowPassenger();" runat="server"
                                    style="width: 60px;">
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                    <option value="6">6</option>
                                    <option value="7">7</option>
                                    <option value="8">8</option>
                                    <option value="9">9</option>
                                </select>
                                &nbsp;位&nbsp;&nbsp;&nbsp;儿童订票请拨客服热线
                                <input id="txtXmlStr" type="hidden" runat="server" />
                                021-51808178
                            </td>
                        </tr>
                        <tr id="trCostomer1" class="font3">
                            <td>
                                第1位乘客姓名
                            </td>
                            <td>
                                &nbsp;<asp:TextBox ID="txtCustomerName1" runat="server" class="input0" onpropertychange="search(txtCustomerName1)"
                                    οnclick="search(txtCustomerName1)"></asp:TextBox>
                            </td>
                            <td>
                                &nbsp;&nbsp;&nbsp;证件类型：
                            </td>
                            <td>
                                &nbsp;<asp:DropDownList Width="100" ID="drplstPagerType1" runat="server">
                                    <asp:ListItem Value="0">身份证</asp:ListItem>
                                    <asp:ListItem Value="1">护照</asp:ListItem>
                                 <%--   <asp:ListItem Value="2">学生证</asp:ListItem>
                                    <asp:ListItem Value="3">军人证</asp:ListItem>
                                    <asp:ListItem Value="4">回乡证</asp:ListItem>
                                    <asp:ListItem Value="5">台胞证</asp:ListItem>
                                    <asp:ListItem Value="6">港澳通行证</asp:ListItem>
                                    <asp:ListItem Value="7">国际海员证</asp:ListItem>
                                    <asp:ListItem Value="8">其它证件</asp:ListItem>如果此处修改则确认信息里也要修改这么多的类型--%>
                                </asp:DropDownList>
                                <asp:CheckBox ID="chkTravel1" runat="server" Text="常旅客"  οnclick="changeEvent('0','1')"; />
                            </td>
                            <td>
                                &nbsp;&nbsp;&nbsp; 证件号码：
                            </td>
                            <td style="text-align: left;">
                                &nbsp;<asp:TextBox ID="txtCardID1" runat="server" Width="90%" class="input0" Style="ime-mode: disabled;"
                                    MaxLength="18"></asp:TextBox>
                            </td>
                        </tr>

 

 

 

 

 

后台

 

     //loading 事件中  把常旅客从数据库中读取放入这里
        public void BindPersonList()
        {
            //调用此方法要添加个条件   需要修改logic层  userinfo.usname
            DataSet ds = Logic.People.GetPeopleList();
            StringBuilder xmlnode = new StringBuilder();
            if (ds != null)
            {
                if (ds.Tables.Count > 0)
                {

                    for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
                    {
                        DataRow row = ds.Tables[0].Rows[i];

                        xmlnode.Append("||")
                            .Append(row[1])
                            .Append("#")
                            .Append(row[3])
                            .Append("#")
                            .Append(row[8])
                            .Append("#");
                    }
                    this.txtXmlStr.Value = xmlnode.ToString();
                }
            }


        }

 

 

 

 

goodyatou
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
自动填写表单的chrome插件
12-28
主要功能是打开任意网页插件会自动判断URL是否是form.php结尾，如果是则按照规则自动填写网页表单，如果不是则略过。你可以根据此代码进行任意改造以满足新的需求。
自动填充 input 标签
08-19
js 实现 代码 自动填充 可以自己连库 可以实现的。
html用户添加,HTML添加用户信息到div与ajax和MYSQL + PHP
weixin_42366752的博客
06-25 291
我想有2个单独的div与一个标记为电子邮件和第二个div命名数字。当用户从下拉菜单中选择一个人时，从PHP + MySQL中检索到的信息应该添加到div中，当你点击添加时，如何添加到div中：http://jsfiddle.net/QVUHU/84/HTML添加用户信息到div与ajax和MYSQL + PHP我被卡住了，因为我不知道如何添加检索信息成2周的div一个电子邮件一个像一个在JS小提琴...
js根据身份证号判断并输出（或选择）性别select、生日，年龄。带身份证号正则，自动选中性别下拉菜单
wenkesheng304的专栏
12-09 3577
所有说明都注释zai在了代码里，这里就不做说明了。 JS分： &lt;script language="javascript" type="text/javascript"&gt; //根据身份证号获取生日、性别 function GetBir_and_Sex(IDNu,Birth,sex){ var IDNu=document.getElementById(IDNu); var Bir...
【前端面试题】我靠它拿到了大厂Offer
热门推荐
前端进阶之路 | 中大厂、外企、国企内推 | 面试培训 | 简历修改
03-01 1万+
每日一题（前端面试） 第 23 题：介绍下观察者模式和订阅-发布模式的区别，各自适用于什么场景 观察者模式中主体和观察者是互相感知的； 假设你正在找一份软件工程师的工作，对“香蕉公司”很感兴趣。所以你联系了他们的HR，给了他你的联系电话。他保证如果有任何职位空缺都会通知你。这里还有几个候选人也你一样很感兴趣。所以职位空缺大家都会知道，如果你回应了他们的通知，他们就会联系你面试。 这里的“香蕉公...
前端三剑客！桃园结义~
DDDDWJDDDD的博客
10-25 905
HTML,CSS,JavaScript
jQuery实现的选择商品飞入文本框动画效果完整实例
11-22
在本文中，我们将深入探讨如何使用jQuery来实现一个有趣且互动性强的商品选择飞入文本框的动画效果。这个效果能够提升用户体验，使用户在选择商品时感到更加生动和直观。以下是一个简化的实现步骤和相关的jQuery知识...
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
12-08
本文实例讲述了js实现文本框中输入文字页面中div层同步获取文本框内容的方法。分享给大家供大家参考。具体实现方法如下： 代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...
layui当点击文本框时弹出选择框,显示选择内容的例子
10-16
在本文中，我们将深入探讨如何使用layui框架在文本框被点击时弹出一个选择框，以便用户能够选择并显示相关内容。layui是一个轻量级的前端UI框架，它提供了丰富的组件和便捷的API，使得开发更加高效。以下是实现这一...
基于JQuery的浮动DIV显示提示信息并自动隐藏
10-28
函数首先获取当前浏览器窗口的宽度，然后创建一个包含提示信息的浮动DIV，并将其添加到页面的body元素中。接着，使用jQuery的`.css()`方法设置浮动DIV的样式，包括位置、尺寸、颜色等。最后，通过`.fadeOut()`方法使...
让超出DIV宽度范围的文字自动显示省略号...
10-30
关键是:text-overflow: ellipsis;
点击button，将一个input的value放到另一个input中的三种方法
菜小菜吃菜的博客
04-24 3966
function merge(){ //方法一js实现 var value=document.getElementById(oldId).value; document.getElementById(newId).value=value; //方法2jQuery实现 $("#"+newId+"").val($("#"+oldId+"").val()); //方法1和2都是有
计算机控制技术题库(附答案).doc
07-18
计算机
yolo数据集8：1：1分类
最新发布
07-18
yolo数据集8：1：1分类

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值