Hi George616,
Check this example. Now please take its reference and correct your code.
HTML
Default
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Create Invoice</title>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css" />
<!-- Font Awesome JS -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/1.0.7/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.9/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style type="text/css" media="screen">
.parent {
margin-left: auto;
margin-right: auto;
padding: 10px;
display: flex;
background-color: #ffffff;
border: 1px solid #ccc;
width: 90%;
}
.child {
width: 100%;
height: auto;
padding: .5rem;
}
.container {
width: 100%;
padding: .5rem;
margin: 0px;
}
.company-address {
border: 0px solid #ccc;
float: left;
width: 240pt;
font-size: smaller;
font-family: Nunito;
}
.invoice-details {
border: 0px solid #ccc;
float: right;
width: 240px;
margin-right: 10px;
}
.heading {
font-size: larger;
font-weight: bolder;
position: center;
margin-top: 0%;
}
.total {
float: right;
width: 250px;
font-size: small;
}
#securelbl {
opacity: 0.3;
font-family: Comfortaa;
}
</style>
<script>
function isNumber(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}
</script>
<script>
function isLetterKey(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode
if ((charCode <= 93 && charCode >= 65) || (charCode <= 122 && charCode >= 97) || charCode == 8) {
return true;
}
alert("Numbers only");
return false;
}
</script>
<script type="text/javascript">
function onlyNumbersWithDot(e) {
var charCode;
if (e.keyCode > 0) {
charCode = e.which || e.keyCode;
}
else if (typeof (e.charCode) != "undefined") {
charCode = e.which || e.keyCode;
}
if (charCode == 46)
return true
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="container" id="center-content" style="margin-top: -4%; font-family: Nunito;">
<div class="form-horizontal">
<br />
<br />
<br />
<!-- color change -->
<input type="color" value="#fdffff" id="colorhead" style="width: 25px;" onchange="ChangeColor(this);" />
<div class="parent">
<div class="child" id="midcont" style="width: 100%;">
<asp:HiddenField ID="hfColor" runat="server" />
<div class="div-head" style="height: 4%;">
<center>
<div class="heading">
<asp:Label ID="Label4" runat="server" Font-Bold="true" Font-Size="X-Large" ForeColor="#000066" Text="INVOICE"></asp:Label>
</div>
</center>
</div>
<hr />
<asp:Image ID="Image4" runat="server" BorderStyle="None" Width="70px" Height="60px" />
<label style="opacity: 0.2;">This is an Invoice of</label> <asp:Label ID="securelbl" runat="server" ForeColor="#40576d" Text=""></asp:Label><br />
<div style="float: right;">
<asp:Label ID="Label3" runat="server" Text="Invoice N°:" Font-Bold="true"></asp:Label> <asp:Label ID="Labelinvoice" runat="server" Text=""></asp:Label>
</div>
<br />
<div class="company-address">
<p style="font-size: 7pt;">FROM:</p>
<asp:Label ID="ftxtname" runat="server" Font-Size="12pt" Font-Bold="true" Height="25px" Width="240px" Text="" />
<br />
<br />
<asp:TextBox ID="ftxtaddress" runat="server" CssClass="form-control" TextMode="MultiLine" Placeholder="Organization Address" Height="40px" Font-Size="X-Small" Width="240px" BorderStyle="Solid" BorderWidth="2"></asp:TextBox>
<br />
<asp:TextBox ID="ftxtmail" runat="server" CssClass="form-control" Font-Size="X-Small" placeholder="Email Address" Height="25px" Width="240px" BorderStyle="Solid" BorderWidth="2"></asp:TextBox>
<br />
<asp:TextBox ID="ftxtphone" runat="server" CssClass="form-control" placeholder="Phone N°" Font-Size="X-Small" Height="25px" Width="240px" BorderStyle="Solid" BorderWidth="2" onkeypress="return isNumber(event);" />
</div>
<br />
<div class="invoice-details">
<p style="font-size: 7pt;">TO:</p>
<asp:Label ID="Label7" runat="server" Font-Bold="true" Font-Size="X-Small" Text="Name"></asp:Label>
<asp:TextBox ID="txtnat" runat="server" CssClass="form-control" Font-Size="X-Small" Height="25px" Width="240px" BorderStyle="Solid" BorderWidth="2" onkeypress="isLetterKey(event);" />
<asp:Label ID="Label9" runat="server" Font-Bold="true" Font-Size="X-Small" Text="Address"></asp:Label>
<asp:TextBox ID="txtdress" runat="server" CssClass="form-control" Height="40px" Font-Size="X-Small" TextMode="MultiLine" Width="240px" BorderStyle="Solid" BorderWidth="2"></asp:TextBox>
<asp:Label ID="Label12" runat="server" Font-Bold="true" Font-Size="X-Small" Text="Email"></asp:Label>
<asp:TextBox ID="txtmal" runat="server" CssClass="form-control" Font-Size="X-Small" Height="25px" Width="240px" BorderStyle="Solid" BorderWidth="2"></asp:TextBox>
<asp:Label ID="Label13" runat="server" Font-Bold="true" Font-Size="X-Small" Text="Phone N°"></asp:Label>
<asp:TextBox ID="txtfon" runat="server" CssClass="form-control" Font-Size="X-Small" Height="25px" Width="240px" BorderStyle="Solid" BorderWidth="2" onkeypress="return isNumber(event);" />
<asp:Label ID="Label15" runat="server" Font-Bold="true" Font-Size="X-Small" Text="Due Date"></asp:Label>
<asp:TextBox ID="txtdated" runat="server" CssClass="form-control" Font-Size="X-Small" Height="25px" Width="240px" type="date" BorderStyle="Solid" BorderWidth="4"></asp:TextBox>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<asp:GridView ID="Gridview1" runat="server" Font-Size="x-Small" ShowFooter="True" AutoGenerateColumns="False"
class="table table-striped table-condensed table-bordered" Style="max-width: 100%" HeaderStyle-ForeColor="#00003D" Height="50px" HeaderStyle-Height="10px" HeaderStyle-BackColor="#D3D9E5">
<Columns>
<asp:TemplateField HeaderText="ITEM DESCRIPTION" ItemStyle-Width="47%">
<ItemTemplate>
<asp:TextBox ID="textBox1" runat="server" Class="form-control" Width="100%" Font-Size="Small" TextMode="MultiLine" Style="overflow: hidden; resize: none;" oninput="Resize(this)" />
<script type="text/javascript">
function Resize(textbox) {
textbox.style.height = "";
textbox.style.height = Math.min(textbox.scrollHeight, 300) + "px";
}
</script>
</ItemTemplate>
<FooterStyle HorizontalAlign="Left" />
<FooterTemplate>
<asp:Button ID="ButtonAdd" runat="server" Class="btn btn-primary" BackColor="SteelBlue" Font-Size="Small" Text="+ Item" />
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="QUANTITY" ItemStyle-Width="11%">
<ItemTemplate>
<asp:TextBox CssClass="form-control" ID="txtQuantity" Height="25" Font-Size="Small" runat="server" Width="100%" onkeypress="return onlyNumbersWithDot(event);" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="RATE" ItemStyle-Width="19%">
<ItemTemplate>
<span class="currency-symbol" style="font-weight: bolder">NGN</span>
<asp:TextBox ID="txtRate" Height="25" runat="server" Width="80%" onkeypress="return onlyNumbersWithDot(event);" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="AMOUNT" ItemStyle-Width="17%">
<ItemTemplate>
<span class="currency-symbol" style="font-weight: bolder">NGN</span>
<asp:Label ID="lblAmount" runat="server" Text="" Font-Bold="True"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="LinkButton1" ForeColor="Red" runat="server">
<asp:Image ID="Image1" runat="server" ImageUrl="~/images/del6.png" Height="25" />
</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<HeaderStyle Height="10px" />
</asp:GridView>
<hr />
<div class="total">
<asp:Label ID="Label1" runat="server" Font-Bold="true" Text="Total"></asp:Label>
<asp:Label ID="lblTotal" runat="server" Text=""></asp:Label>
<br />
<br />
<div class="row">
<asp:Label ID="Label10" runat="server" Font-Bold="true" Text="WHT:"></asp:Label>
<asp:TextBox ID="Whttxt" runat="server" CssClass="form-control" Width="120px" Font-Bold="true" Height="22px" Font-Size="8pt" placeholder="Withholding Tax" onkeypress="return onlyNumbersWithDot(event);" />
<asp:Label ID="Label8" runat="server" Font-Size="5pt" Text="(optional)"></asp:Label>
</div>
<br />
<div class="row">
<asp:Label ID="Label2" runat="server" Font-Bold="true" Text="SD:"></asp:Label>
<asp:TextBox ID="Sdtxt" runat="server" CssClass="form-control" Width="120px" Font-Bold="true" Height="22px" Font-Size="8pt" placeholder="Stamp Duty" onkeypress="return onlyNumbersWithDot(event);" />
<asp:Label ID="Label11" runat="server" Font-Size="5pt" Text="(optional)"></asp:Label>
</div>
<br />
<div class="row">
<asp:Label ID="Label5" runat="server" Font-Bold="true" Text="VAT:"></asp:Label>
<asp:TextBox ID="txtVAT" runat="server" CssClass="form-control" Width="120px" Font-Bold="true" Height="22px" Font-Size="8pt" placeholder="Value Added Tax" onkeypress="return onlyNumbersWithDot(event);" />
<asp:Label ID="warnlbl" runat="server" ForeColor="Red" Font-Size="Small" Font-Bold="true" Text=""></asp:Label>
</div>
<br />
<asp:Label ID="Label6" runat="server" Font-Bold="true" Text="GRAND TOTAL:"></asp:Label>
<asp:Label ID="lblGrandTotal" runat="server" Text=""></asp:Label>
<br />
<br />
<br />
<br />
</div>
<br />
<br />
<br />
<br />
</div>
</div>
<br />
</div>
</div>
<asp:Button Text="Save" runat="server" OnClick="Save" />
</form>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
<script>
function ChangeColor(ele) {
document.getElementById("<%=hfColor.ClientID %>").value = ele.value;
document.getElementsByClassName("div-head")[0].style.backgroundColor = ele.value;
var color = invertColor(ele.value);
document.getElementById("<%=Label4.ClientID %>").style.color = color;
}
function invertColor(hex) {
if (hex.indexOf('#') === 0) {
hex = hex.slice(1);
}
// convert 3-digit hex to 6-digits.
if (hex.length === 3) {
hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
}
if (hex.length !== 6) {
throw new Error('Invalid HEX color.');
}
// invert color components
var r = (255 - parseInt(hex.slice(0, 2), 16)).toString(16),
g = (255 - parseInt(hex.slice(2, 4), 16)).toString(16),
b = (255 - parseInt(hex.slice(4, 6), 16)).toString(16);
// pad each with zeros and return
return '#' + padZero(r) + padZero(g) + padZero(b);
}
function padZero(str, len) {
len = len || 2;
var zeros = new Array(len).join('0');
return (zeros + str).slice(-len);
}
</script>
</body>
</html>
Details
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div id="dvDetails" runat="server">
Details Div
</div>
</form>
</body>
</html>
Code
Default
protected void Save(object sender, EventArgs e)
{
Server.Transfer("Details.aspx?Color=" + hfColor.Value);
}
Details
protected void Page_Load(object sender, EventArgs e)
{
dvDetails.Attributes["style"] = "background-color:" + Request.QueryString["Color"];
}
