Hi Babloo22,
Refer below code and modify the code according to your need.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript">
var visible = false;
function visibleImage() {
var value = $('#chkImage').prop('checked');
visible = value;
if (value) {
$('#imgDiv').css('display', 'block');
$('#logohide').hide();
}
else {
$('#imgDiv').css('display', 'none');
$('#logohide').show();
}
}
function btnSubClick() {
if (isNullOrEmpty($('#<%=txtComName.ClientID%>').val())) {
$('#lblComName').text('Community Name is required').show().fadeOut(3000);
return false;
}
if (isNullOrEmpty($('#<%=txtPhone.ClientID%>').val())) {
$('#lblPhone').text('Phone number is required').show().fadeOut(3000);
return false;
}
if (isNullOrEmpty($('#<%=txtContactName.ClientID%>').val())) {
$('#lblContactName').text('ContactName is required').show().fadeOut(3000);
return false;
}
if (isNullOrEmpty($('#<%=txtAddress.ClientID%>').val())) {
$('#lblAddress').text('Address is required').show().fadeOut(3000);
return false;
}
if (visible) {
if ($('[id*=ddlImages] option:selected').index() == 0) {
$('#ddlLogo').text('Please Select Logo').show().fadeOut(3000);
return false;
}
}
else {
if ($('[id*=logoUpload]').val() == '') {
$('#lblLogo').text('Please Select Logo').show().fadeOut(3000);
return false;
}
}
return true;
}
function isNullOrEmpty(str) {
if (str != null && str != '')
return false;
else
return true;
}
$(function () {
$('[id*=btnShow]').click(function () {
$('[id*=AddCommunity]').modal('show');
return false;
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button Text="Show Modal" ID="btnShow" runat="server" />
<div class="modal fade" id="AddCommunity" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">
Edit Community Info</h4>
</div>
<div class="modal-body txtCommunityName">
<div class="form-group">
<div class="row">
<div class="col-md-3">
<label for="txtCommunityName">
Community Name</label>
</div>
<div class="col-md-9">
<asp:TextBox ID="txtComName" runat="server" CssClass="form-control"></asp:TextBox>
<label id="lblComName" style="display: none; color: red">
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-3">
<label for="txtPhone">
Phone</label>
</div>
<div class="col-md-9">
<asp:TextBox ID="txtPhone" runat="server" CssClass="form-control"></asp:TextBox>
<label id="lblPhone" style="display: none; color: red">
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-3">
<label for="txtContactName">
Contact Name</label>
</div>
<div class="col-md-9">
<asp:TextBox ID="txtContactName" runat="server" CssClass="form-control"></asp:TextBox>
<label id="lblContactName" style="display: none; color: red">
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-3">
<label for="txtAddress">
Address</label>
</div>
<div class="col-md-9">
<asp:TextBox ID="txtAddress" TextMode="MultiLine" Rows="3" runat="server" CssClass="form-control"></asp:TextBox>
<label id="lblAddress" style="display: none; color: red">
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-3">
<label for="txtEmail">
Email</label>
</div>
<div class="col-md-9">
<asp:TextBox ID="txtEmail" runat="server" CssClass="form-control"></asp:TextBox>
<label id="lblEmail" style="display: none; color: red">
</label>
</div>
</div>
</div>
<div class="form-group" id="imgHide">
<div class="row">
<div class="col-md-3">
<label for="chkImage">
Use existing logo</label>
</div>
<div class="col-md-9">
<input type="checkbox" id="chkImage" onchange="visibleImage();" />
</div>
</div>
<div class="form-group">
<div class="row" id="imgDiv" style="display: none;">
<div class="col-md-3">
<label for="ddlImages">
Select</label>
</div>
<div class="col-md-9">
<div class="col-md-9">
<asp:DropDownList runat="server" ID="ddlImages" CssClass="form-control">
<asp:ListItem Text="Please Select" Value="0" />
<asp:ListItem Text="Logo 1" Value="1" />
<asp:ListItem Text="Logo 2" Value="2" />
<asp:ListItem Text="Logo 3" Value="3" />
</asp:DropDownList>
<label id="ddlLogo" style="display: none; color: red">
</label>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="row" id="logohide">
<div class="col-md-3">
<label for="Logo">
Logo</label>
</div>
<div class="col-md-9">
<asp:FileUpload ID="logoUpload" runat="server" />
<label id="lblLogo" style="display: none; color: red">
</label>
</div>
</div>
</div>
<asp:HiddenField ID="hdnImage" runat="server" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-sm" data-dismiss="modal">
Close</button>
<asp:Button ID="btnSave" runat="server" CssClass="btn btn-primary btn-sm" Text="Save"
OnClick="btnSave_Click" OnClientClick="return btnSubClick();" />
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
C#
protected void btnSave_Click(object sender, EventArgs e)
{
//Your saving code.
}
VB.Net
Protected Sub btnSave_Click(sender As Object, e As EventArgs)
'Your saving code.
End Sub