修改联系人详情

最新推荐文章于 2022-05-05 15:50:55 发布

岁月静好_cai

最新推荐文章于 2022-05-05 15:50:55 发布

阅读量873

点赞数

分类专栏：技术类文章标签： asp.net ASP.NET Asp.Net ASP.Net Asp.net javascript JavaScript Javascript javaScript

本文链接：https://blog.csdn.net/c512026052/article/details/8279186

版权

技术类专栏收录该内容

22 篇文章 0 订阅

订阅专栏

按修改按钮后显示出一个新的Div，对联系人信息进行修改，修改完后显示到label上

源代码：

<div id="right1">
<span style=" float:left; display:block; margin-left:5px;">联系信息  </span>
<input id="Button1" type="button" value="修 改" runat="server" οnclick="Xiugaiclick()" style="background-color: #FF5024; width: 60px; height: 20px; border:none;margin-bottom:3px; float:left; margin-left:20px;"/></div>                  
                                      
     <!--旧的联系人详情-->
            <div id="oldContact">
            <div class="line">
                <span style="margin-left: 50px;">联系人     
                    <asp:Label ID="lblContact" runat="server" Text=""></asp:Label> 
            </span> </div>
                <div class="line">
                <span style="margin-left: 50px;">确认方式    <asp:Label ID="lblConfirmWay"
                    runat="server" Text=""></asp:Label></span>
            </div>
           
            <div class="line">
                <span style="margin-left: 50px;">手机号码    <asp:Label ID="lblPhone"
                    runat="server" Text=""></asp:Label></span>
            </div>
          
            <div class="line">
                <span style="margin-left: 50px;">固定电话    <asp:Label ID="lblTel"
                    runat="server" Text=""></asp:Label> 
                </span>
            </div>
          
            <div class="line">
                <span style="margin-left: 50px;">电子邮箱    <asp:Label ID="lblEmail"
                    runat="server" Text=""></asp:Label>  </span>
            </div>
         
            </div>



           <!-- 新的联系人详情-->
<!--这个div应设置为不可见，只有按修改按钮时才可见-->
 <div  id="newContact" style="display:none; background-color:gray">
           <div class="line">
                <span style="margin-left: 50px;">联系人     
                <input 
                    id="Text1" type="text" runat="server"  
                    style=" border-style:inset; border-width:1px; border-color:#D8D8D8;"  /> </span>
             </div>
            <div class="line">
                <span style="margin-left: 50px;">确认方式    <select 
                    id="Select21" runat="server"  
                    style=" border-style:inset; border-width:1px; border-color:#D8D8D8;" name="D2">
            <option>短信</option>
            <option>Email</option>
            <option>电话</option>
        </select></span>
            </div>
            <div class="line">
                <span style="margin-left: 50px;">手机号码    <input id="Text3" 
                    runat="server" type="text"  
                    style=" border-style:inset; border-width:1px; border-color:#D8D8D8;" /></span><a style="color:red">*至少填一个联系方式</a>
            </div>
            <div class="line">
                <span style="margin-left: 50px;">固定电话    <input id="Text2" type="text" 
                    style =" width :80px; border-style:inset; border-width:1px; border-color:#D8D8D8;" 
                    runat="server"/> 
                </span>
            </div>
            <div class="line">
                <span style="margin-left: 50px;">电子邮箱    <input id="Text5" 
                    type="text" runat="server"  
                    style=" border-style:inset; border-width:1px; border-color:#D8D8D8;" />  <span style="color: #71C6FF">最好填写，为了便于了解最新资讯</span></span>
            </div>
            <div class="line" style="text-align:right; margin-right:5px; margin-bottom:3px;">
            
              <input id="Button3" type="button" value="保存" runat="server" οnclick="check()" style="background-color: #FF5024; width: 60px; 
                            height: 20px; border:none;"/>
                            <div style="width:100%; height:2px; clear:both;"></div>
                   </div>
            </div>
    </div>

JS部分代码：

 //修改按钮
    function Xiugaiclick() {

        var oldContact = document.getElementById("oldContact");
        var newContact = document.getElementById("newContact");

        oldContact.style.display = "none";
        newContact.style.display = "";
    }


//对新填写的联系人详情进行判断
    function check() {

        var contact = document.getElementById("ContentPlaceHolder1_Text1");
        var phone = document.getElementById("ContentPlaceHolder1_Text3");
        var tel = document.getElementById("ContentPlaceHolder1_Text2");
        var confirmWay = document.getElementById("ContentPlaceHolder1_Select21");
        var emai = document.getElementById("ContentPlaceHolder1_Text5");

        if (contact.value == "") {
            alert("联系人不能为空！");

            return false;
        }

        else if (phone.value == "" && tel.value == "") {
            alert("必须填写一个联系方式");

            return false;
        }



        if (contact.value != "" && (phone.value != "" || tel.value != "")) {

//将新修改的联系人详情传到label上显示，但要想后台获取就得存在隐藏域中，因为这里的label是属于表单内容，后台是无法直接获取表单的值的，只能先存在隐藏控件中


            document.getElementById("<%=lblContact.ClientID%>").innerHTML = contact.value;

            document.getElementById("<%=lblPhone.ClientID %>").innerHTML = phone.value;
            document.getElementById("<%=lblTel.ClientID %>").innerHTML = tel.value;
            document.getElementById("<%=lblConfirmWay.ClientID %>").innerHTML = confirmWay.value;
            document.getElementById("<%=lblEmail.ClientID %>").innerHTML = emai.value;


            document.getElementById("<%=HiddenFieldContacter.ClientID%>").value = contact.value;
            document.getElementById("<%=HiddenFieldPhone.ClientID %>").value = phone.value;
            document.getElementById("<%=HiddenFieldTEL.ClientID %>").value = tel.value;
            document.getElementById("<%=HiddenFieldConfirm.ClientID %>").value = confirmWay.value;
            document.getElementById("<%=HiddenFieldEmail.ClientID %>").value = emai.value;


            newContact.style.display = "none";
            oldContact.style.display = "";
            return true;
        }
    }