We Keep Coding

Function which enables to select different background color of each element from different color in javascript?

I have a project which is the note-taking website.
When someone adds a note it is stored in local storage in the form of an array and a Javascript function works which calls the stored element and runs for each on the elements.
Here is the Javascript code:
function showNote2() {
console.log("Show");
let note = localStorage.getItem("notes");
if(note == null){
noteData = []
// message.innerText = "Please Add a Note"
}
else{
noteData = JSON.parse(note);
};
let showBox = "";
noteData.forEach(function show(element, index) {
showBox += `<div class="noteCard my-2 mx-2 card" id="card4" style="width: 18rem;">
<select id="mySelect" class="clr-btn" style="text-align:center" onchange="change_color()">
<option id="bckgrnd-clr" value="white">Background Color</option>
<option id="red" value="Red">Red</option>
<option id="green" value="Green">Green</option>
<option id="blue" value="Blue">Blue</option>
</select>
<div class="card-body" id="card3">
<h5 class="cardtitle">Note
${index + 1}
</h5>
<p class="card-text">
${element}
</p>
<button id="${index}" onclick="deleteNote(this.id)" class="btn btn-primary">Delete Note</a>
</div>
</div> `
})
let showNote3 = document.getElementById("notes2");
if(noteData.length != 0){
showNote3.innerHTML = showBox;
}else{
showNote3.innerHTML = "Please add a Note"
}
}
In the above code, select gives us the option to choose a color for the note, now I want to add a function to onchange which can help me choose a different color for different notes.
The function I used was working only on the first-note and setting the color of all notes according to the selected option of first-note.
The color will be applied on class with card-body
I am building this for practice in Javascript. Any hints would be appreciated, as this is something new for me
Update:
This is the solution I applied after getting the idea from the comments.
function change_color(index) {
let note = localStorage.getItem("notes");
if(note != null ){
let colorApply = document.getElementById("card3")
let elm1 = document.getElementById(index)
let color = elm1.options[elm1.selectedIndex].value;
document.colorApply.style.backgroundColor = color;
}
else{
`Note is Empty`
}
Now this is the error i am getting at color
"Cannot read properties of null (reading 'options')"
Any help would be appreciated?

See the working snippet. :)
In your loop, change code like this:
let elm1 = document.getElementById(index)
to
let showNote3 = document.getElementById(`card${index}`);
let colorApply = document.getElementById(`card${index}`)
let elm1 = document.getElementById(`mySelect${index}`)
and in your HTML
`<div class="noteCard my-2 mx-2 card" id="card${index}" ...` />
`<select id=`mySelect${index}` class="clr-btn" style="text-align:center" onchange="change_color()">`
Also when you have the element, you do not need to use document
// -> document.colorApply.style.backgroundColor = color;
colorApply.style.backgroundColor = color;
Finally, you need to send the index of the note into your change_color function.
onchange="change_color(${index})"
function showNote2() {
console.log("Show");
let note = null // localStorage.getItem("notes");
if (note == null) {
noteData = ['My Note 1', 'My Note 2']
// message.innerText = "Please Add a Note"
} else {
noteData = JSON.parse(note);
};
let showBox = "";
noteData.forEach(function show(element, index) {
showBox += `
<div class="noteCard my-2 mx-2 card" id="card${index}" style="width: 18rem;">
<select id="mySelect${index}" class="clr-btn" style="text-align:center" onchange="change_color(${index})">
<option id="bckgrnd-clr" value="white">Background Color</option>
<option id="red" value="Red">Red</option>
<option id="green" value="Green">Green</option>
<option id="blue" value="Blue">Blue</option>
</select>
<div class="card-body" id="cardbody${index}">
<h5 class="cardtitle">Note ${index + 1}</h5>
<p class="card-text">
${element}
</p>
<button id="btn${index}" onclick="deleteNote(this.id)" class="btn btn-primary">Delete Note</a>
</div>
</div>
`
})
let showNote3 = document.getElementById("note");
if (noteData.length != 0) {
showNote3.innerHTML = showBox;
} else {
showNote3.innerHTML = "Please add a Note"
}
}
function change_color(index) {
let note = noteData[index] // localStorage.getItem("notes");
if (note != null) {
let colorApply = document.getElementById(`card${index}`)
let elm1 = document.getElementById(`mySelect${index}`)
let color = elm1.options[elm1.selectedIndex].value;
colorApply.style.backgroundColor = color;
} else {
console.log(`Note is Empty`)
}
}
showNote2()
<h1>Notes</h1>
<div id='note' />
<button onclick='note' />

Input file not uploading files to server

Having issue when i am using fileupload object to show the files while before upload in the modal
Even Try make a shallow copy of DOM object to use it but it still not working
Kindly Give me a possible solution for this problem
HTML and javascript Kindly see the FileConfigHandler Method
<div id="filedata"></div>
<div class="col-md-9">
<div class="homepage_contant">
<div class="container">
<!-- Start File Upload Section -->
<h4>File Upload</h4>
<form id="drag-and-drop-zone" class="upload_container" action="/Home/Upload" method="POST" enctype="multipart/form-data" ondrop="dropHandler(event);">
<div class="text-center">
<img class="cloud_upload_img" src="~/Content/images/cloud.png" />
<p>Drag & Drop Files Here or <span class="browse_btn_holder">Browse <input class="browse_btn" type="file" accept=".xls..xlsx image/* " multiple id="mfile" name="mfile" title='Click to add Files' /> </span> to upload files</p>
</div>
<!-- Modal -->
<div class="upload_file_modal modal" id="uploadFileModal" tabindex="-1" role="dialog" aria-labelledby="uploadFileModal" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">File Upload</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="container">
<ul class="list-unstyled p-2 d-flex flex-column col" style="padding:0 !important" id="files">
<li class="text-muted text-center empty"><p id="txt"> Files has been seleted. </p></li>
</ul>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="upload_field_wrap">
<label for="ItemTitle"> File Title</label>
<input type="text" class="form-control" id="title" name="title" />
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<div class="upload_field_wrap">
#Html.DropDownList("Department", ViewBag.lst as SelectList, "Select Department", new { #class = "form-control" })
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<div class="upload_field_wrap">
<select class="form-control" id="CourseId" name="CourseId">
<option value="" disabled selected>Course</option>
</select>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<div class="upload_field_wrap">
<select class="form-control" id="category" name="category">
<option value="" disabled selected>Select Category</option>
<option value="mid">
Mid Term
</option>
<option value="final">
Final
</option>
<option value="quiz">
Quiz
</option>
<option value="summary">
Summary
</option>
</select>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<div class="upload_field_wrap">
<select id="yearOfPublish" name="yearOfPublish" class="form-control">
<option value="" disabled> Select Year</option>
#for (int i = 2000; i < 2020; i++)
{
<option value="#i">#i</option>
}
</select>
</div>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<div class="upload_field_wrap">
<label for="description">Description</label>
<textarea class="form-control" id="" rows="3"></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
</form>
<!-- End File Upload Section -->
#section scripts
{
<script src="~/Scripts/jquery.dm-uploader.min.js"></script>
<script src="~/Scripts/upload_file_ui.js"></script>
<script>
function dropHandler(event) {
event.preventDefault();
mfile.files = event.dataTransfer.files;
console.log(mfile);
//ChangeImageHandler();
FileConfigHandler();
}
function formatBytes(bytes, decimals) {
if (bytes == 0) return '0 Bytes';
var k = 1024,
dm = decimals <= 0 ? 0 : decimals || 2,
sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
}
function ChangeImageHandler()
{
var x = $('#mfile').val();
let file = $('#mfile')[0].files[0];
var size = $('#mfile')[0].size;
var sizeWithTag = formatBytes(size);
$('#item_size').text(sizeWithTag);
$('#item_title').text(file.name);
if (x.split('.').pop()=='pdf') {
$("#item_type_img").attr("src", "../../Content/images/files_types/pdf.png");
}
else if (x.split('.').pop() == 'docx') {
$("#item_type_img").attr("src", "../../Content/images/files_types/doc.png");
}
else if (x.split('.').pop() == 'jpg') {
$("#item_type_img").attr("src", "../../Content/images/files_types/jpg.png");
}
else if (x.split('.').pop() == 'png') {
$("#item_type_img").attr("src", "../../Content/images/files_types/png.png");
}
else if (x.split('.').pop() == 'ppt') {
$("#item_type_img").attr("src", "../../Content/images/files_types/ppt.png");
}
else if (x.split('.').pop() == 'txt') {
$("#item_type_img").attr("src", "../../Content/images/files_types/txt.png");
}
else if (x.split('.').pop() == 'xls') {
$("#item_type_img").attr("src", "../../Content/images/files_types/xls.png");
}
else if (x.split('.').pop() == 'csv') {
$("#item_type_img").attr("src", "../../Content/images/files_types/csv.png");
}
console.log();
}
function FileConfigHandler()
{
console.log('chal raha h')
var files1 = mfile.files;
console.log(mfile.files);
for (var i = 0; i < files1.length; i++) {
// console.log(files1[i]);
//var x= AddChild(files1[i]);
$('#files').append(x);
}
}
function AddChild(item)
{
var template = $('#files-template').html();
var parent = $(template);
var extention = item.name.split('.').pop();
// console.log(item.name.split('.').pop());
var name = item.name;
var temp_size = item.size;
var size = formatBytes(temp_size);
parent.find('#item_size').text(size)
parent.find('#item_title').text(name)
if (extention == 'pdf') {
$(parent).find('.item_type_img').attr("src", "../../Content/images/files_types/pdf.png");
}
else if (extention == 'docx') {
$(parent).find('.item_type_img').attr("src", "../../Content/images/files_types/doc.png");
}
else if (extention == 'jpg') {
$(parent).find('.item_type_img').attr("src", "../../Content/images/files_types/jpg.png");
}
else if (extention == 'png') {
$(parent).find('.item_type_img').attr("src", "../../Content/images/files_types/png.png");
}
else if (extention == 'ppt') {
$(parent).find('.item_type_img').attr("src", "../../Content/images/files_types/ppt.png");
}
else if (extention == 'txt') {
$(parent).find('.item_type_img').attr("src", "../../Content/images/files_types/txt.png");
}
else if (extention == 'xls') {
$(parent).find('.item_type_img').attr("src", "../../Content/images/files_types/xls.png");
}
else if (extention == 'csv') {
$(parent).find('.item_type_img').attr("src", "../../Content/images/files_types/csv.png");
}
return '<li class="uploaded_item">' + parent.html() + '</li>'
}
//function dropHandler(ev) {
// console.log('File(s) dropped');
// // Prevent default behavior (Prevent file from being opened)
// ev.preventDefault();
// var file = ev.dataTransfer.files;
// // var file = e.originalEvent.dataTransfer.files;
// var fileData = new FormData();
// for (var i = 0; i < file.length; i++) {
// fileData.append("fileData", ev.dataTransfer.files[i]);
// }
//if (ev.dataTransfer.items) {
// // Use DataTransferItemList interface to access the file(s)
// for (var i = 0; i < ev.dataTransfer.items.length; i++) {
// // If dropped items aren't files, reject them
// if (ev.dataTransfer.items[i].kind === 'file') {
// file[i] = ev.dataTransfer.items[i].getAsFile();
// fileData.append("fileData",ev.dataTransfer.files[i]);
// console.log('... file[' + i + '].name = ' + file.name);
// }
// }
//} else {
// // Use DataTransfer interface to access the file(s)
// for (var i = 0; i < ev.dataTransfer.files.length; i++) {
// fileData.append("fileData", ev.dataTransfer.files[i]);
// console.log('... file[' + i + '].name = ' + ev.dataTransfer.files[i].name);
// }
//}
// $.ajax({
// type: "POST",
// dataType: "json",
// enctype: 'multipart/form-data',
// url:'/Home/SendFile',
// contentType: false, // Not to set any content header
// processData: false, // Not to process data
// data: fileData,
// success: function (result, status, xhr) {
// alert(result);
// },
// error: function (xhr, status, error) {
// alert(status);
// }
// })
//}
$(document).ready(function () {
$('#uploadFileModal').hide();
$('#drag-and-drop-zone').dmUploader({
onDragEnter: function () {
// Happens when dragging something over the DnD area
this.addClass('active');
$('.upload_container .cloud_upload_img').addClass('animated infinite shake')
},
onDragLeave: function (e) {
// Happens when dragging something OUT of the DnD area
this.removeClass('active');
$('.upload_container .cloud_upload_img').removeClass('animated infinite shake');
//readmultifiles(document.getElementById('#file'));
$('#uploadFileModal').modal("show");
}})
})
$('#mfile').change(function () {
console.log(mfile.files);
$('#uploadFileModal').modal("show");
//document.getElementById("#txt").innerHTML = "1 file has been Selected";
// console.log(mfile.files);
//ChangeImageHandler();
FileConfigHandler();
});
$("#Department").change(function () {
LoadDepartments();
});
function LoadDepartments() {
var collegeId = document.getElementById("Department");
var ID = collegeId.options[collegeId.selectedIndex].value;
var depatments = document.getElementById("CourseId");
console.log(ID);
$.ajax({
url: '#Url.Action("getCourses", "Home")',
type: 'GET',
dataType: "json",
data: { idString: ID },
success: function (result) {
console.log(result)
depatments.innerHTML = "";
$.each(result, function (i, result) {
var options = "<option value='" + result.Id + "' id='" + result.Id + "'>" + result.name + "</option>";
$('#CourseId').append(options);
});
},
failure: function (response) {
alert(response.responseText);
console.log(response.responseText);
},
error: function (response) {
alert(response.responseText);
console.log(response.responseText);
}
});
}
</script>
}
<!-- Debug item template -->
<script type="text/html" id="debug-template">
<li class="list-group-item text-%%color%%"><strong>%%date%%</strong>: %%message%%</li>
</script>
<!-- File item template -->
<script type="text/template" id="files-template">
<li class="uploaded_item">
<div class="item_body">
<div class="item_img_and_info_holder">
<div class="item_type_img_holder">
<img class="item_type_img" id="item_type_img" src="../../Content/images/files_types/pdf.png" />
</div>
<div class="item_info" style="width: 100%">
<h6 class="item_title" id="item_title">%%filename%% </h6>
<div class="item_details" style="margin-bottom: 10px;">
<span class="item_size" id="item_size">00.0 MB</span>
</div>
</div>
</div>
</div>
</li>
</script>
When removing AddChild() from loop it start working
also tried to do shallow copy but it did not work for me
function FileConfigHandler()
{
console.log('chal raha h')
var files1 = mfile.files;
console.log(mfile.files);
for (var i = 0; i < files1.length; i++) {
// console.log(files1[i]);
//var x= AddChild(files1[i]);
$('#files').append(x);
}
}
function AddChild(item)
{
var template = $('#files-template').html();
var parent = $(template);
var extention = item.name.split('.').pop();
// console.log(item.name.split('.').pop());
var name = item.name;
var temp_size = item.size;
var size = formatBytes(temp_size);
parent.find('#item_size').text(size)
parent.find('#item_title').text(name)
if (extention == 'pdf') {
$(parent).find('.item_type_img').attr("src", "../../Content/images/files_types/pdf.png");
}
else if (extention == 'docx') {
$(parent).find('.item_type_img').attr("src", "../../Content/images/files_types/doc.png");
}
else if (extention == 'jpg') {
$(parent).find('.item_type_img').attr("src", "../../Content/images/files_types/jpg.png");
}
else if (extention == 'png') {
$(parent).find('.item_type_img').attr("src", "../../Content/images/files_types/png.png");
}
else if (extention == 'ppt') {
$(parent).find('.item_type_img').attr("src", "../../Content/images/files_types/ppt.png");
}
else if (extention == 'txt') {
$(parent).find('.item_type_img').attr("src", "../../Content/images/files_types/txt.png");
}
else if (extention == 'xls') {
$(parent).find('.item_type_img').attr("src", "../../Content/images/files_types/xls.png");
}
else if (extention == 'csv') {
$(parent).find('.item_type_img').attr("src", "../../Content/images/files_types/csv.png");
}
return '<li class="uploaded_item">' + parent.html() + '</li>'
}

NaN or 0 shows up in sum up

In the process of summing up input values, overall is always showed up NaN or O ( sum up function below). I can't sum values up. All values are Number and their variable also Number according to the console information. Everywhere I use parseInt and Number methods.
The sum up function is also used with parseInt method. I had to add the logical operator || in the sum up function, after that, it always showed up 0.
// points declaration for rate determenation
$(function () {
$("#name_vehicle").change(function () {
var vehicle_value = $(this).val(),
vehicle_point = $("#vehicle_point").val();
vehicle_point = ( vehicle_value == "1" ) ? 1 :
( vehicle_value == "2" ) ? 1 :
( vehicle_value == "3" ) ? 1 :
( vehicle_value == "4" ) ? 1 :
( vehicle_value == "5" ) ? 1:
(vehicle_value == "6" ) ? 2 : 0;
$("#vehicle_point").val( vehicle_point );
console.log ( vehicle_point );
});// end change
}); // end ready
$(function () {
$("#term").change(function () {
var tv = $(this).val();
var tp = $("#term_point").val();
tp = ( tv == "1") ? 24:
( tv == "2") ? 36 :
( tv == "3") ? 48:
( tv == "4") ? 60 : 0;
$("#term_point").val( tp );
console.log ( tp );
}); // end change
}); // end ready
$(function () {
$("input").change(function () {
var cp = parseInt($("input[name=carPrice").val());
var d = parseInt($("input[name=deposit").val());
var ae = parseInt($("input[name=add_equip").val());
var c = parseInt ($("input[name=casco]").val());
var tp = parseInt($("input[name=term_point").val());
var result = ( ( cp + ae ) - d + c );
var pd = ((d / ( cp + ae )) * 100); // DEPOSIT IN %
$("#overall").val( result );
console.log ( result );
$("#p_deposit").val( pd );
console.log ( pd );
console.log ( typeof pd );
var cl_points = parseInt($("input[name=cl_points").val());
var bl_points = parseInt($("input[name=bl_points").val());
if ( pd >= 20 && pd < 39.99 ) {
cl_points = 1;
bl_points = 1;
}
else if ( pd > 39.99 && pd < 49.99) {
cl_points = 1;
bl_points = 5;
}
else if ( pd > 49.99 && pd <= 55 ) {
cl_points = 1;
bl_points = 5;
}
else if ( pd > 55 && pd < 99.99 ) {
cl_points = 1;
bl_points = 0;
}
$("#cl_points").val( cl_points );
$("#bl_points").val( bl_points );
console.log ( cl_points );
console.log ( bl_points );
}); // end change
}); // end ready
$(function () {
var sum = 0;
$(".points").each(function () {
sum += parseInt($(this).val()) || 0;
$("#overallPoints").val( sum ) ;
console.log (sum);
console.log ( typeof sum);
}); // end each
}); // end ready
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- first header-->
<div class="image-container">
<div class="text"></div>
</div>
<br>
<div class="container-fluid">
<div class="row">
<div class="col-lg-4">
<!-- box one-->
<i class="fa fa-car" id="v1" style="font-size:84px;color:white"><span class="w1">А</span></i>
<form>
<div class="form-group">
<label class="l1" for="name_vehicle">В</label>
<select multiple class="form-control" id="name_vehicle">
<option value="1">A</option>
<option value="2">T</option>
<option value="3">Q</option>
<option value="4">X</option>
<option value="5">M</option>
<option value="6">J</option>
</select>
<input type="text" class="points" id="vehicle_point" style="display:none">
<!-- POINT ONE-->
</div>
</form>
<form>
<div class="form-group">
<label class="l1" for="carPrice">С:</label>
<input type="text" class="form-control" id="carPrice" name="carPrice" value="0">
</div>
<div class="form-group">
<label class="l1" for="add_equip">о:</label>
<input type="text" class="form-control" id="add_equip" name="add_equip" value="0">
</div>
</form>
</div>
<div class="col-lg-4">
<!-- box two-->
<i class="fa fa-money" style="font-size:84px;color:white"><span class="w1">К</span></i>
<form>
<div class="form-group">
<label class="l1" for="deposit">П</label>
<input type="text" class="form-control" id="deposit" name="deposit" value="0">
<input type="text" id="car_loan" style="display:none" name="car_loan">
<!-- CAR LOAN SUM-->
</div>
<div class="form-group">
<label class="l1" for="term">С</label>
<select multiple class="form-control" id="term">
<option value="1">24 </option>
<option value="2">36 </option>
<option value="3">48 </option>
<option value="4">60 </option>
</select>
<input type="text" class="points" id="term_point" style="display:none" name="term_point">
<!-- POINT TWO-->
</div>
<div class="form-group">
<label class="l1" for="casco">К:</label>
<input type="text" class="form-control" id="casco" name="casco" value="0">
<input type="text" id="overall" style="display:none" name="overall">
<!--SUM UP-->
<input type="text" id="p_deposit" style="display:none">
<!-- DEPOSIT IN %-->
<input type="text" class="points" id="p_deposit_point" style="display:none" name="p_deposit_point">
<!-- POINT THREE-->
</div>
</div>
</div>

First when you have a number, you do not have to use Number() to ensure it is a number.
The logic here is wrong:
(tv == "1") ? tp = Number(24): Number(0);
(tv == "2") ? tp = Number(36): Number(0);
(tv == "3") ? tp = Number(48): Number(0);
(tv == "4") ? tp = Number(60): Number(0);
You can not use a ternary operator here for this. When you say tv=2, first one will set it to zero, second would set it to 36, third will set it back to 0.
A ternary operator would have to look like:
(tv == "1") ? tp = Number(24):
(tv == "2") ? tp = Number(36):
(tv == "3") ? tp = Number(48):
(tv == "4") ? tp = Number(60): Number(0);
But that really makes little sense to do.
You would be better off to use a switch statement of if/else if
switch (tv) {
case "1": tp = 24; break;
case "2": tp = 36; break;
case "3": tp = 48; break;
case "4": tp = 60; break;
case default: tp = 0; break;
}
Same thing applies with vehicle point.

How to Push Form Fields onto Donation Form?

I've been stuck for some time. Trying to make a quick donation widget push donation amount onto a donation form on the next page inside the "Other Amount" field.
The form is embedded in the website and hosted by Blackbaud Online Express and has actions like /?BBGiftAmount= online for fixed gift amounts. However not for custom amounts.
Below is my HTML markup of the form.
<div class="donation-wrapper">
<div class="container ">
<div class="row d-flex align-items-center">
<div class="col-lg-2 title">
<h2>Make a Gift:</h2>
<p>Give Generously</p>
</div>
<div class="col-lg-10">
<form action="https://islamic-relief.com.au/what-we-do/aid-and-development/#become-volunteers" class="form-inline ">
<label class="sr-only">Donation Type</label>
<select class="form-control my-1 mr-sm-2">
<option selected>One Time Donation</option>
<option value="1">Recurring Donation</option>
</select>
<label class="sr-only">Donation Amount</label>
<input value="" class="form-control my-1 mr-sm-2" type="number" placeholder="Donation Amount">
<label class="sr-only">Choose Fund</label>
<select name="BBFund" id="bboxdonation_designation_ddDesignations" class="form-control my-1 mr-sm-2">
<option value="103">Lebanon Disability Centre</option>
<option value="84">Water and Sanitation</option>
</select>
<button type="submit" class="btn btn-primary my-1">Donate Now</button>
</form>
</div>
</div>
</div>
</div>
Also, through Chrome console found where the hosted form is reading actions for "?BBGiftAmount=".
function i(t) {
var p = location.search.replace("?", "").split("&"),
m = BBOX.buildQuerystringObject(p),
s, q, u = false,
o = false,
l = m.hasOwnProperty("bbhideothergifts") && m.bbhideothergifts === "1",
v = m.hasOwnProperty("bbhideotherfunds") && m.bbhideotherfunds === "1",
n = !t || l,
r = !t || v;
if (n && m.hasOwnProperty("bbgiftamount")) {
q = parseFloat(m.bbgiftamount);
f.each(a.find(".BBFormRadioGivingLevelItem .BBFormRadioGivingLevelOther"), function() {
if (parseFloat(f(this).val()) === q) {
a.find(".BBDFormSectionGiftInfo input[data-giftchoice][value='1']").attr("checked", "checked").change();
f(this).attr("checked", "checked").change();
u = true;
return false
}
})
}
if (n && m.hasOwnProperty("bbpledgeamount")) {
q = parseFloat(m.bbpledgeamount);
f.each(a.find(".BBFormRadioPledgeAmountItem .BBFormRadioGivingLevel"), function() {
if (parseFloat(f(this).val()) === q) {
a.find(".BBDFormSectionGiftInfo input[data-giftchoice][value='0']").attr("checked", "checked").change();
f(this).attr("checked", "checked").change();
o = true;
return false
}
})
}
if (l) {
if (u && o) {
a.find(".BBFormRadioGivingLevelItem .BBFormRadioLabelGivingLevelNotSelected").parent().remove();
a.find(".BBFormRadioPledgeAmountItem .BBFormRadioLabelGivingLevelNotSelected").parent().remove()
} else {
if (u) {
a.find(".BBFormGiftChoice").remove();
a.find(".BBFormRadioGivingLevelItem .BBFormRadioLabelGivingLevelNotSelected").parent().remove()
} else {
if (o) {
a.find(".BBFormGiftChoice").remove();
a.find(".BBFormRadioPledgeAmountItem .BBFormRadioLabelGivingLevelNotSelected").parent().remove()
}
}
}
}
if (r && m.hasOwnProperty("bbfund")) {
s = a.find('.BBDFormSectionDesignationInfo select[id*="ddDesignations"]');
if (s.find('option[value="' + m.bbfund + '"]').length > 0) {
s.val(m.bbfund);
if (v) {
s.find('option[value!="' + m.bbfund + '"]').remove()
}
}
}
}

am trying to retain div on page exit

I am trying to retain div on exiting a page and am not very sure how to go about this, I am aware that I can achieve this using localStorage but cannot figure out how, here is the script
<script type="text/javascript">
function ShowHideDiv() {
var ddlPassport = document.getElementById("ddlPassport");
var dvPassport = document.getElementById("dvPassport");
dvPassport.style.display = ddlPassport.value == "Y" ? "block" : "none";
var ddlPassport = document.getElementById("ddlPassport");
var dvPassports = document.getElementById("dvPassports");
dvPassports.style.display = ddlPassport.value == "N" ? "block" : "none";
}
</script>
<span>Do you have Passport?</span>
<select id = "ddlPassport" onchange = "ShowHideDiv()">
<option value="N">No</option>
<option value="Y">Yes</option>
</select>
<!--<hr />-->
<div id="dvPassport" style="display: none">
Passport Number:
<input type="text" id="txtPassportNumber" />
</div>
<div id="dvPassports" style="display: none">
Other Number:
<input type="text" id="txtPassportNumbers" />
</div>
thank you very much for your help!

In the beforeunload of the window object, set whatever you like into localStorage.
Also, it's better to use CSS classes than to apply individual style properties.
window.addEventListener("DOMContentLoaded", function(){
var ddlPassport = document.getElementById("ddlPassport");
var dvPassport = document.getElementById("dvPassport");
var dvPassports = document.getElementById("dvPassports");
var passNum = document.getElementById("txtPassportNumber");
var passNums = document.getElementById("txtPassportNubmers");
ddlPassport.addEventListener("change", ShowHideDiv);
// Restore prior saved data:
if(localStorage.getItem("passportNumber")){
passNum.value = localStorage.getItem("passportNumber");
ShowHideDiv();
} else if(localStorage.getItem("passportNumbers")) {
passNums.value = localStorage.getItem("passportNumbers");
ShowHideDiv();
}
var numElement = null;
function ShowHideDiv() {
if(this.value === "y"){
dvPassport.classList.remove("hidden");
dvPassports.classList.add("hidden");
numElement = dvPassport;
} else if(this.value === "n") {
dvPassport.classList.add("hidden");
dvPassports.classList.remove("hidden");
numElement = dvPassports;
} else {
dvPassport.classList.add("hidden");
dvPassports.classList.add("hidden");
}
}
// As the user is leaving the page, store the text value:
window.addEventListener("beforeunload", function(){
if(numElement === dvPassport){
localStorage.setItem("passportNumber", passNum.value);
} else if(numElement === dvPassports) {
localStorage.setItem("passportNumbers", passNums.value);
}
});
});
.hidden { display:none; }
<span>Do you have Passport?</span>
<select id = "ddlPassport">
<option value="">--- Select ---</option>
<option value="n">No</option>
<option value="y">Yes</option>
</select>
<div id="dvPassport" class="hidden">
Passport Number:
<input type="text" id="txtPassportNumber">
</div>
<div id="dvPassports" class="hidden">
Other Number:
<input type="text" id="txtPassportNumbers">
</div>