I want to make a registration form using jquery dialog but after I used jQuery Dialog and clicked the button to open the form the #btnsubmit Button doesn't work, before it's working can someone help me in my problem I have been trying to find the answer for like 2 days now and couldn't find the answer and I am newbie at all :P
js
$(function () {
$("#dialog").dialog({
autoOpen: false,
width: 630,
height: 630,
draggable: false,
resizable: false,
modal: true
});
$("#btnaddnew").click(function () {
$("#dialog").dialog("open");
return false;
});
});
html
<div id="dialog" title="Add/Edit User">
<asp:UpdatePanel ID="addpanel" runat="server">
<ContentTemplate>
<table>
<tr>
<td><div id="registerform">
<div class="formrow">
<table>
<tr>
<td><label for="firstname">First Name</label></td>
<td><asp:TextBox ID="txfirstname" runat="server" class="basetxt" /></td>
</tr>
<tr>
<td><asp:RequiredFieldValidator ID="rfvfirstname" runat="server" ForeColor="Red" Display="Dynamic" ErrorMessage="Required" ControlToValidate="txfirstname" style="margin-left:20px" /></td>
</tr>
</table>
</div>
<div class="formrow">
<table>
<tr>
<td><label for="lastname">Last Name</label></td>
<td><asp:TextBox ID="txlastname" runat="server" class="basetxt" /></td>
</tr>
<tr>
<td><asp:RequiredFieldValidator ID="rvflastname" runat="server" ForeColor="Red" ErrorMessage="Required" Display="Dynamic" ControlToValidate="txlastname" style="margin-left:20px" /></td>
</tr>
</table>
</div>
<div class="formrow">
<table>
<tr>
<td><label for="address">Address</label></td>
<td><asp:TextBox ID="txaddress" runat="server" class="basetxt" /></td>
</tr>
<tr>
<td><asp:RequiredFieldValidator ID="rfvaddress" runat="server" ForeColor="Red" Display="Dynamic" ErrorMessage="Required" ControlToValidate="txaddress" style="margin-left:20px" /></td>
</tr>
</table>
</div>
<div class="formrow">
<table>
<tr>
<td><label for="age">Age</label></td>
<td><asp:TextBox ID="txage" runat="server" class="basetxt" /></td>
</tr>
<tr>
<td><asp:RequiredFieldValidator ID="rvfage" runat="server" ForeColor="Red" Display="Dynamic" ErrorMessage="Required" ControlToValidate="txage" style="margin-left:20px" />
<asp:RegularExpressionValidator ID="revage" runat="server" ForeColor="Red" Display="Dynamic" ErrorMessage="Not Valid" ControlToValidate="txage" ValidationExpression="^[1-9]\d{0,2}$" /></td>
</tr>
</table>
</div>
<div class="formrow">
<table>
<tr>
<td><label for="mobile">Mobile #</label></td>
<td><asp:TextBox ID="txmobile" runat="server" class="basetxt" /></td>
</tr>
<tr>
<td><asp:RequiredFieldValidator ID="rvfmobile" runat="server" Display="Dynamic" ForeColor="Red" ErrorMessage="Required" ControlToValidate="txmobile" style="margin-left:20px" />
<asp:RegularExpressionValidator ID="revmobile" runat="server" ForeColor="Red" ErrorMessage="Not Valid" Display="Dynamic" ControlToValidate="txmobile" ValidationExpression="^\d{11}" style="margin-left:20px" /></td>
</tr>
</table>
</div>
<div id="btnc2">
<asp:Button ID="btnsubmit" runat="server" class="submitbtn" Text="Submit" onclick="btnsubmit_Click" style="margin-left: 10px" />
<asp:Button ID="btnreset" runat="server" class="submitbtn" Text="Reset"
style="margin-left: 30px" onclick="btnreset_Click" CausesValidation="false" />
</div></td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</div>
Button Add New
<asp:Button ID="btnaddnew" runat="server" class="submitbtn" Text="Add New"
style="margin-left: 10px; margin-top: 10px" onclick="btnaddnew_Click" CausesValidation="false" />
You should use jQuery .on method to assign a click handler to the button element. Here is how the should look like:
$(function () {
$("#dialog").dialog({
autoOpen: false,
width: 630,
height: 630,
draggable: false,
resizable: false,
modal: true
});
$("#dialog").on('click', '#btnaddnew', function () {
$("#dialog").dialog("open");
return false;
});
});
Related
What needed to achieve is by clicking the preview button (ASP button, which calls another function), the hidden preview section shows. But it didn't work by the below codes... not sure what I missed.
In the .aspx
<style>
#PreviewSection {display:none;}
</style>
in the script, (edited to point to btPreview, but still not working... )
<script type="text/javascript">
var previewbt = document.getElementById('btPreview');
previewbt.addEventListener('click',function(){
PreviewSection.style.display = "block";
})
</script>
the html:
<div class ="container" id="InputSection">
<table class="table">
<tbody>
<tr>
<td style="width:60%">
<p>The Question</p>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Please fill in Question." ControlToValidate="TBQuestion" CssClass="alert-danger"></asp:RequiredFieldValidator>
<asp:TextBox ID="TBQuestion" runat="server" CssClass="form-control" MaxLength="100000" TextMode="MultiLine" Rows="10"></asp:TextBox>
</td>
</tr>
</tbody>
</table>
<asp:Button ID="btPreview" runat="server" Text="Preview" CssClass="btn" OnClick="btPreview_Click"/>
</div>
<hr />
<div class="container" id="PreviewSection">
<h3> The preview of the content.</h3>
<table class="table">
<tbody>
<tr>
<td>
Question: <asp:Label ID="LbPrevQuestion" runat="server" Text="" Font-Bold="True" ForeColor="#0066CC"></asp:Label><br />
</td>
</tr>
</tbody>
</table>
<asp:Button ID="BtSubmit" runat="server" Text="Submit" CssClass="btn" OnClick="BtSubmit_Click" />
</div>
</asp:Content>
Probably this is what you want:
Edited to add your modification after my first post.
var BtPreview = document.getElementById('BtPreview');
BtPreview.addEventListener('click', function() {
PreviewSection.style.display = "block";
})
var BtSubmit = document.getElementById('BtSubmit');
BtSubmit.addEventListener('click', function() {
PreviewSection.style.display = "none";
InputSection.style.display = "none";
})
var btPreview_Click = function() {
console.log('Do something else for Preview.');
};
var btSubmit_Click = function() {
console.log('Do something else for Submit.');
};
#PreviewSection {
display: none;
}
<div class="container" id="InputSection">
<table class="table">
<tbody>
<tr>
<td style="width:60%">
<p>The Question</p>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Please fill in Question." ControlToValidate="TBQuestion" CssClass="alert-danger"></asp:RequiredFieldValidator>
<asp:TextBox ID="TBQuestion" runat="server" CssClass="form-control" MaxLength="100000" TextMode="MultiLine" Rows="10"></asp:TextBox>
</td>
</tr>
</tbody>
</table>
<button ID="BtPreview" runat="server" Text="Preview" CssClass="btn" OnClick="btPreview_Click()">Button Preview</button>
</div>
<hr />
<div class="container" id="PreviewSection">
<h3> The preview of the content.</h3>
<table class="table">
<tbody>
<tr>
<td>
Question:
<asp:Label ID="LbPrevQuestion" runat="server" Text="" Font-Bold="True" ForeColor="#0066CC"></asp:Label>
<br />
</td>
</tr>
</tbody>
</table>
<button ID="BtSubmit" runat="server" Text="Submit" CssClass="btn" OnClick="btSubmit_Click()">Button Submit</button>
</div>
This will be the solution for ASP:
<div class="container" id="InputSection">
<table class="table">
<tbody>
<tr>
<td style="width:60%">
<p>The Question</p>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Please fill in Question." ControlToValidate="TBQuestion" CssClass="alert-danger"></asp:RequiredFieldValidator>
<asp:TextBox ID="TBQuestion" runat="server" CssClass="form-control" MaxLength="100000" TextMode="MultiLine" Rows="10"></asp:TextBox>
</td>
</tr>
</tbody>
</table>
<asp:Button ID="BtPreview" runat="server" Text="Preview" CssClass="btn" OnClick="btPreview_Click()"/>
</div>
<hr />
<div class="container" id="PreviewSection">
<h3> The preview of the content.</h3>
<table class="table">
<tbody>
<tr>
<td>
Question:
<asp:Label ID="LbPrevQuestion" runat="server" Text="" Font-Bold="True" ForeColor="#0066CC"></asp:Label>
<br />
</td>
</tr>
</tbody>
</table>
<asp:Button ID="BtSubmit" runat="server" Text="Submit" CssClass="btn" OnClick="btSubmit_Click()" />
</div>
Display:none is misleading. Its not just not displayed, its not part of the page. So you cannot click on it. Use opacity:
#previewSection{
opacity:0;
}
Heres the right js:
<script type="text/javascript">
var previewsectionID = document.getElementById('PreviewSection');
previewsectionID.addEventListener('click',function(){
previewsectionID.style.opacity = 1; });
</script>
I have 2 panels, of checkbox: In Panel1, if all checkbox are checked I need to show Panel2.
I have a HTML and a script but it's not working, I think that I'm missing somthing.
here is my code :
<body>
<asp:Panel ID="Panel1" runat="server">
<table>
<tr>
<td>
<asp:Label ID="Title" runat="server" Text="Enter the Title"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Question1" runat="server" Text="Question1"></asp:Label>
</td>
<td>
<asp:CheckBox ID="CheckBox1" name="cb" runat="server" Checked="false" />
</td>
</tr>
<tr>
<td>
<asp:Label ID="Question2" runat="server" Text="Question2"></asp:Label>
</td>
<td>
<asp:CheckBox ID="CheckBox2" name="cb" runat="server" Checked="false" />
</td>
</tr>
<tr>
<td>
<asp:Label ID="Question3" runat="server" Text="Question3"></asp:Label>
</td>
<td>
<asp:CheckBox ID="CheckBox3" name="cb" runat="server" Checked="false" />
</td>
</tr>
</table>
</asp:Panel>
<asp:Panel ID="Panel2" runat="server">
<table>
<tr>
<td>
<asp:Label ID="Question4" runat="server" Text="Question4"></asp:Label>
</td>
<td>
<asp:CheckBox ID="CheckBox4" runat="server" Checked="false" />
</td>
</tr>
</table>
</asp:Panel>
<table>
<tr>
<td>
<asp:Button ID="Button1" runat="server" Text="Submit" OnClick="Button1_Click" />
</td>
</tr>
</table>
And this is my script but it's not working
$(document).ready(function () {
$('#CheckBox1').removeAttr('checked');
$('#CheckBox2').removeAttr('checked');
$('#CheckBox3').removeAttr('checked');
$('#CheckBox4').removeAttr('checked');
$('#Panel2').hide();
$('#Panel1').change(function () {
if (this.checked) {
$('#Panel2').show();
}
else {
$('#Panel2').hide();
}
});
});
Help please
Using jQuery you can compare the checked checkboxes vs all checkboxes inside Panel1 like this:
if($("#Panel1 input[type=checkbox]:checked").length === $("#Panel1 input[type=checkbox]").length){
$('#Panel2').show();
}else{
$('#Panel2').hide();
}
I am trying to validater my .aspx form using jQuery Validate plugin. I have written the function for the validation with the rules for checking and messages for showing the error messages.
But even after adding all the necessary plugins and function calls, my form is not getting validated.
Can anyone please guide me if am wrong somewhere.
I am attaching the .aspx code below.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-2.1.4.js"></script>
<script src="Scripts/jquery.validate.js"></script>
<script src="Scripts/jquery.validate.min.js"></script>
<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script>
//$(function () {
$(document).ready(function () {
debugger;
$("#form1").validate({
rules: {
lblName: "required",
lblCity: "required",
lblDepName: "required",
lblSalary: {
required: true,
number: true
},
},
// Specify the validation error messages
messages: {
lblName: "Please enter your Name",
lblCity: "Please enter your City",
lblDepName: "Please select a department Name from the dropdown list",
lblSalary: {
required: "Please enter the Salary",
number: "Only Numbers are allowed"
}
},
submitHandler: function (form) {
form.submit();
}
});
$('#btnInsertEmployee').click(function () {
debugger;
if ($("#form1").validate()) {
}
});
//});
});
</script>
<style type="text/css">
.auto-style1 {
width: 100%;
}
.auto-style2 {
}
.auto-style3 {
width: 146px;
height: 26px;
}
.auto-style4 {
height: 26px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<br />
<br />
<br />
<br />
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" OnRowEditing="GridView1_RowEditing">
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
<br />
<br />
<table class="auto-style1">
<tr>
<td class="auto-style3">
<asp:Label ID="lblName" runat="server" Text="Name"></asp:Label>
</td>
<td class="auto-style4">
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td class="auto-style2"> </td>
<td> </td>
</tr>
<tr>
<td class="auto-style2">
<asp:Label ID="lblCity" runat="server" Text="City"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtCity" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td class="auto-style2"> </td>
<td> </td>
</tr>
<tr>
<td class="auto-style2">
<asp:Label ID="lblDepName" runat="server" Text="Department Name"></asp:Label>
</td>
<td>
<asp:DropDownList ID="ddlDepName" runat="server" AutoPostBack="True" Height="16px" OnSelectedIndexChanged="ddlDepName_SelectedIndexChanged" Width="122px">
</asp:DropDownList>
</td>
</tr>
<tr>
<td class="auto-style2"> </td>
<td> </td>
</tr>
<tr>
<td class="auto-style2">
<asp:Label ID="lblSalary" runat="server" Text="Salary"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtSalary" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td class="auto-style2"> </td>
<td>
<asp:Button ID="btnInsertEmployee" runat="server" OnClick="btnInsertEmployee_Click" Text="Insert Employee" />
</td>
</tr>
<tr>
<td class="auto-style2" colspan="2">
<asp:Label ID="lblMessage" runat="server"></asp:Label>
</td>
</tr>
</table>
<br />
<br />
<br />
<br />
<br />
<br />
</div>
</form>
</body>
</html>
Instead of lblName or lblCity, it should be txtName or txtCity.
rules: {
txtName: "required",
txtCity: "required",
},
// Specify the validation error messages
messages: {
txtName: "Please enter your Name",
txtCity: "Please enter your City",
},
i have been working on some assignment and was facing a problem...
how to record the input time on a text-box control in asp.net
that is the timer starts at the time when i start to input in the text-box and stops when i move to the next text-box or move to any other control.. ??
<table style="width: 685px">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<tr>
<td colspan="3">
<asp:Image ID="Image1" runat="server" Height="174px" ImageUrl="~/Registration/images/registerwithus.jpg"
Width="605px" />
</td>
</tr>
<tr>
<td>
User Name
</td>
<td colspan="2">
<asp:TextBox ID="TextBox1" runat="server" ontextchanged="TextBox1_TextChanged"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox1"
ErrorMessage="Please Enter the correct Name" ForeColor="Red"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td class="style5">
Choose Password
</td>
<td colspan="2">
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="TextBox2"
ErrorMessage="Choose Password" ForeColor="Red"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td class="style5">
Confirm Password
</td>
<td class="style6" colspan="2">
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="TextBox3"
Display="Dynamic" ErrorMessage="Choose Password" ForeColor="Red"></asp:RequiredFieldValidator>
<asp:CompareValidator ID="CompareValidator1" runat="server" ControlToCompare="TextBox2"
ControlToValidate="TextBox3" Display="Dynamic" ErrorMessage="Both the Password fields do not match"
ForeColor="#CC0000" SetFocusOnError="True"></asp:CompareValidator>
</td>
</tr>
<tr>
<td class="style5">
Email Id
</td>
<td class="style6" colspan="2">
<asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="TextBox4"
Display="Dynamic" ErrorMessage="Enter your EmailId" ForeColor="Red"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="TextBox4"
Display="Dynamic" ErrorMessage="Invalid Email Id" ForeColor="Red" ValidationExpression="\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td>
Mob No
</td>
<td colspan="2">
<asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>
<asp:RegularExpressionValidator ID="RegularExpressionValidator2" runat="server" ErrorMessage="Invalid Mobile No."
ControlToValidate="TextBox5" ForeColor="Red" ValidationExpression="^[7-9][0-9]{9}$"></asp:RegularExpressionValidator>
</td>
</tr>
You can start the timer on focus event and stop it on blur event.
Here is a sample
$(function(){
$("#<%=TextBox.ClientID%>")
.focus(function () {
// Start Timer
})
.blur(function () {
// Stop Timer
});
)};
I have 2 jQuery script in one page jQuery Dialog and jQuery slideToggle inside the dialog box, jQuery dialog is working but after hitting button to open jQuery Dialog inside the dialog box there will be a button to slideToggle a div but its not working I tried to move slideToggle outside the dialog and it works. I don't know whats going on inside the dialog box if someone can help me to solve my problem
jQuery Dialog
<script type="text/javascript">
$(function () {
$("#dialog").dialog({
appendTo: "form",
autoOpen: false,
width: 630,
height: 700,
draggable: false,
resizable: false,
modal: true
});
$("#btnaddnew").click(function () {
$("#dialog").dialog("open");
return false;
});
});
</script>
jQuery slideToggle
<script type="text/javascript">
$(document).ready(function () {
$("#Div1").hide();
$("#Button1").click(function () {
$("#Div1").slideToggle();
return false;
});
});
</script>
dialog div + slideToggle div inside the jQuery dialog
<div id="dialog" title="Classification">
<asp:UpdatePanel ID="addpanel" runat="server">
<ContentTemplate>
<table>
<tr>
<td><div id="registerform">
<table align="center" style="margin-top:10px" width="600">
<tr>
<td>
<asp:DropDownList ID="DropDownList1" runat="server"
onselectedindexchanged="DropDownList1_SelectedIndexChanged"
AutoPostBack="True">
<asp:ListItem Selected="True">Choose Classification</asp:ListItem>
<asp:ListItem Value="Resident">Resident</asp:ListItem>
<asp:ListItem Value="Business">Business</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
</table>
<table>
<tr>
<td><div id="divresident" runat="server" visible="false">
<table style="margin-top:10px; margin-bottom:10px">
<tr>
<td width="300" style="text-align:left"><asp:Label ID="lbAddress" runat="server" Text="Address"></asp:Label></td>
<td width="300"><asp:TextBox ID="txtAddress" class="basetxt" runat="server" Width="290"></asp:TextBox></td>
</tr>
<tr>
<td style="text-align:left"><asp:Label ID="lbUserEntry" runat="server" Text="Number of House occupant"></asp:Label></td>
<td><asp:TextBox ID="txtUserEntry" class="basetxt" runat="server" Width="290"></asp:TextBox></td>
</tr>
<tr>
<td style="text-align:left"><asp:Button ID="btnAddOccupant" runat="server" Text="+" />
<asp:Label ID="lbres5" runat="server" Text="Add Occupant"></asp:Label></td>
</tr>
<tr>
<td>
<div id="divOccupantProfile" style="display: none">
<asp:Label ID="OPfamilyname" runat="server" Text="Family Name"></asp:Label>
<asp:TextBox ID="textOPfamilyname" runat="server"></asp:TextBox><br />
<asp:Label ID="OPfirstname" runat="server" Text="First Name"></asp:Label>
<asp:TextBox ID="textOPfirstname" runat="server"></asp:TextBox><br />
<asp:Label ID="OPmiddlename" runat="server" Text="Middle Name"></asp:Label>
<asp:TextBox ID="textOPmiddlename" runat="server"></asp:TextBox><br />
<asp:Label ID="OPmaritalstatus" runat="server" Text="Marital Status"></asp:Label>
<asp:DropDownList ID="ddlOPmaritalstatus" runat="server" >
<asp:ListItem></asp:ListItem>
<asp:ListItem>Married</asp:ListItem>
<asp:ListItem>Single</asp:ListItem>
<asp:ListItem>Divorced</asp:ListItem>
</asp:DropDownList><br />
<asp:Label ID="OPoccupation" runat="server" Text="Occupation"></asp:Label>
<asp:TextBox ID="textOPoccupation" runat="server"></asp:TextBox><br />
<asp:Label ID="OPrelationship" runat="server" Text="Relationship"></asp:Label>
<asp:DropDownList ID="ddlOPrelationship" runat="server" >
<asp:ListItem></asp:ListItem>
<asp:ListItem>Wife</asp:ListItem>
<asp:ListItem>Daughter</asp:ListItem>
<asp:ListItem>Son</asp:ListItem>
<asp:ListItem>Father</asp:ListItem>
<asp:ListItem>Mother</asp:ListItem>
<asp:ListItem>House helper</asp:ListItem>
<asp:ListItem>Driver</asp:ListItem>
</asp:DropDownList>
</div>
<div id="holder">
</div>
</td>
</tr>
</table>
</div></td>
</tr>
</table>
<table>
<tr>
<td><div id="divbusiness" runat="server" visible="false">
<table width="600" style="margin-top:10px; margin-bottom:10px">
<tr>
<td width="300" style="text-align:left"><asp:Label ID="lbbus1" runat="server" Text="Registered Business Name" ></asp:Label></td>
<td width="300"><asp:TextBox ID="txtbus2" class="basetxt" runat="server" Width="290"></asp:TextBox></td>
</tr>
<tr>
<td width="300" style="text-align:left"><asp:Label ID="lbbus3" runat="server" Text="Address"></asp:Label></td>
<td width="300"><asp:TextBox ID="txtbus4" class="basetxt" runat="server" Width="290"></asp:TextBox></td>
</tr>
<tr>
<td width="300" style="text-align:left"><asp:Label ID="lbbus5" runat="server" Text="Structure"></asp:Label></td>
<td width="300"> </td>
</tr>
<tr>
<td width="300" style="text-align:left"><asp:Label ID="lbbus6" runat="server" Text="SEC No./DTI number"></asp:Label></td>
<td width="300"><asp:TextBox ID="txtbus7" class="basetxt" runat="server" Width="290"></asp:TextBox></td>
</tr>
<tr>
<td width="300" style="text-align:left"><asp:Label ID="lbbus8" runat="server" Text="Nature of Business"></asp:Label></td>
<td width="300"><asp:TextBox ID="txtbus9" class="basetxt" runat="server" Width="290"></asp:TextBox></td>
</tr>
<tr>
<td colspan="2" style="text-align:left">
<div>
<asp:Button ID="Button1" runat="server" Text="+" />
<asp:Label ID="Label1" runat="server" Text="Add Phone"></asp:Label>
<div id="Div1" style="display: none">
<asp:Label ID="Label2" runat="server" Text="Landline work"></asp:Label>
<asp:TextBox ID="TextBox1" class="basetxt" runat="server" ></asp:TextBox><br />
<asp:Label ID="Label3" runat="server" Text="Handphone personal" ></asp:Label>
<asp:TextBox ID="TextBox2" class="basetxt" runat="server"></asp:TextBox><br />
<asp:Label ID="Label4" runat="server" Text="Handphone work"></asp:Label>
<asp:TextBox ID="TextBox3" class="basetxt" runat="server"></asp:TextBox>
</div>
</div>
</td>
</tr>
</table>
</div></td>
</tr>
</table>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</div>
.click won't work on later loaded elements, try it like this, replace:
$("#Button1").click(function () {
With:
$("body").on('click', '#Button1', function() {