Hello
I have an issue I wish to resolve. I got help on how to upload image file into image control and also how to change div background with asp color-picker. The issue I have is that when I change div background color, it changes. But immediately I upload picture, the page refreshes and causes the div background to revert back to its initial color. Besides that, when I click on any button on the page, the div background color reverts back too.
How can I maintain that chosen div color even when the page is refreshed?
<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]-->
<link href='https://fonts.googleapis.com/css?family=Comfortaa' rel='stylesheet' />
<link href='https://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' />
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Bootstrap CSS CDN -->
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />
<!-- Our Custom CSS -->
<!-- <link rel="stylesheet" href="style.css"/>-->
<!-- <link href="css2/style2.css" rel="stylesheet" />-->
<!--<link rel="stylesheet" href="style2.css" />-->
<!-- Scrollbar Custom CSS -->
<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 defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
<!-- 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>
</head>
<body style="font-family: Nunito; background-color:#eeeeee;">
<form id="form1" runat="server">
<div class="wrapper">
<div id="content" style="font-size: 10pt;">
<div class="container" id="center-content" style="margin-top: -4%; font-family: Nunito;">
<div class="form-horizontal">
<hr />
<asp:Label ID="labelid" runat="server" Text="30"></asp:Label><asp:Label ID="createby" runat="server" Text="williams@gmail.com"></asp:Label><asp:Label ID="role" runat="server" Text="Admin"></asp:Label>
<!-- 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:FileUpload ID="fuUpload" runat="server" Style="display: none" />
<asp:Button ID="btnUpload" runat="server" Style="display: none" OnClick="OnUpload" />
<asp:Image ID="imgFileUpload" ImageUrl="Test.png" runat="server" Width="60" Height="70" />
<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="williams"/>
<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>
</div>
</div>
<br />
<div>
<asp:Button ID="Button1" runat="server" CssClass="btn btn-primary" Font-Size="Small" BackColor="SteelBlue" Text="Create Invoice" OnClick="Button1_Click" />
</div>
</div>
</div>
</div>
</div>
</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="js/bootstrap.min.js"></script>
<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>
<script type="text/javascript">
$(function () {
var fileUpload = $("[id*=fuUpload]");
var img = $("[id*=imgFileUpload]");
img.click(function () { fileUpload.click(); });
fileUpload.change(function () {
$('[id*=btnUpload]').click();
});
});
</script>
</body>
</html>
