按修改按钮后显示出一个新的Div,对联系人信息进行修改,修改完后显示到label上
源代码:
<div id="right1">
<span style=" float:left; display:block; margin-left:5px;">联系信息 </span>
<input id="Button1" type="button" value="修 改" runat="server" onclick="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" onclick="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;
}
}