Save and reset values from drop down list - javascript

I have drop down list, after select value from it I push the button and some calculations are made. I save value from list by this:
<select name="dropDownTo" id="dropDownTo">
<option value="Yard">Yard</option>
<option value="Feet">Feet</option>
<option value="Metre">Metre</option>
</select>
<button onclick="MyFunc()">Update</button>
<script>
document.getElementById("dropDownTo").onchange = function() {
localStorage['dropDownTo'] = document.getElementById("dropDownTo").value;
}
function MyFunc(){
document.getElementById("dropDownTo").value = localStorage['dropDownTo'];
window.onload = document.getElementById("dropDownTo").value;
alert(document.getElementById("dropDownTo").value);
}
</script>
But the select value stay selected after closing the window. Is it possible restore default value after closing the page?

You should run an action before the page exits, restoring the value to its default. There is a javascript event for that. Window.onbeforeunload
window.onbeforeunload = function(){
return 'You are leaving this page';
}

Setting a value as selected will initially select that value every time the page is loaded:
<option value="value2" selected>Value 2</option>

Related

Dropdown in HTML is empty at initialization due to Javascript

I've created in an html webpage a dropdown with four options. It worked well but I realized that when the page was refreshed, the value would reset itself to the first option. Since I wanted the user's choice to be kept in memory, I added a javascript code snippet that I found somewhere.
It works very well, except that at the initialization the default value of the dropdown is an empty field.
I would need the first option to be displayed at initialization.
I guess it's easy but I don't know JavaScript at all. Could you please help?
Here is what the code looks like:
<select name="options" id='dropdown'>
<option value="1">1st Option</option>
<option value="2">2nd Option</option>
<option value="3">3rd Option</option>
<option value="4">4th Option</option>
</select>
<!-- The script below helps to keep in memory the dropdown value after the page has been refreshed -->
<script type="text/javascript">
var selectedItem = sessionStorage.getItem("SelectedItem");
$('#dropdown').val(selectedItem);
$('#dropdown').change(function() {
var dropVal = $(this).val();
sessionStorage.setItem("SelectedItem", dropVal);
});
</script>
I think you should check if SessionStorage Key exists or not.
I have created working example of your code : https://jsfiddle.net/vieckys/Lwv1n8p7/7/
Here is HTML Markup:
<select name="options" id='dropdown'>
<option value="0" selected>--- select here ---</option>
<option value="1">1st Option</option>
<option value="2">2nd Option</option>
<option value="3">3rd Option</option>
<option value="4">4th Option</option>
</select>
and JS Code
let selectedItem = sessionStorage.getItem("SelectedItem");
if (selectedItem) {
$('#dropdown').val(selectedItem);
} else {
$('#dropdown').val(0);
}
$('#dropdown').change(function() {
let dropVal = $(this).val();
sessionStorage.setItem("SelectedItem", dropVal);
});
Let me know if you face any issue with this.
Based on your scenario, you can explicitly trigger the change event after the value is set for the dropdown using trigger('change') on the select dropdown. This will run the change function and will save the initial value in the sessionStorage. So, add this line of code, $('#dropdown').trigger('change') something like:
<script type = "text/javascript" >
var selectedItem = sessionStorage.getItem("SelectedItem");
$('#dropdown').val(selectedItem);
$('#dropdown').change(function() {
var dropVal = $(this).val();
sessionStorage.setItem("SelectedItem", dropVal);
});
$('#dropdown').trigger('change'); // trigger the change explicitly
</script>

Update variable in JS based on selected option from dropdown

I have this dropdown, where I want to change the variable in my js script based on which option is selected. The variable is send to another function which updates the page.
My html file:
//My JS function that is trying to access the data from the dropdown
function updateDD(){
$(".sheetnameSelect").change(function(){
return $(this).find(":selected").text()
})
}
//I want to use that function to update another variable based on selected option
var selected = updateDD()
alert(selected)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class='sheetnameSelect'>
<option value="Cars">Cars</option>
<option value="Homes">Homes</option>
<option value="Planes">Planes</option>
</select>
However the function updateDD() is not returning the selected option (both when the pages loads or when I select different option)
You might not need to return the value, you can call the method whenever there is a change in select:
$(".sheetnameSelect").on('change', function() {
var selected = $(this).val();
createTable(selected);
});
function createTable(value) {
console.log(value);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class='sheetnameSelect'>
<option value="Cars">Cars</option>
<option value="Homes">Homes</option>
<option value="Planes">Planes</option>
</select>

how to retain selected value on refreshing page?

jquery
(function($) {
$(document).ready( function() {
$('#client-list').change(function() {
$(this).attr("selected", true);
location.reload();
});
});
});
dropdown list
<select id="client-list">
<option value="Choose-Client">Choose Client</option>
<option value="client1" >Client 1</option>
<option value="client2" >Client 2</option>
<option value="client3" >Client 3</option>
<option value="client4" >Client 4</option>
</select>
how can i retain selected value and reload the page onchange dropdown?
Store you values in localStorage
First fetch value from localStorage and set it as value of your select, if it's undefined (when run the first time), it will fall back to first element in your select.
If it is defined, then your select will have value from localStorage as selected value.
On change, update your value in localStorage
(function($) {
const selection = localStorage.getItem('selection');
$(document).ready( function() {
let $clientList = $('#client-list');
$clientList.val(selection);
$clientList.change(function() {
localStorage.setItem('selection', $(this).val());
});
});
});
You can do this using cookies in Jquery by using a plugin.
https://github.com/js-cookie/js-cookie
Download the plugin and include it in your project
<script src="/path/to/js.cookie.js"></script>
To set cookie
Cookies.set('name', 'value');
To read cookie
Cookies.get('name'); // => 'value'

get all values of dropdownlist to see if loaded value has changed using javascript

This is to check if a user is opening another div (form; there are four for the page) without having saved the entry or update for the current form.
I need to compare the current value of dropdowns to all the possible choices of the dropdowns. If there is a difference the user is shown an alert notifying of having not saved the data. There is a not a set number of dropdowns. My script has been able to correctly count the number of dropdowns for each form.
Thanks,
James
You can do this by updating a variable on change of your select and then checking that value whenever you do what it is you do to move on to the next form. Here's the code I have mocked up:
HTML -
<select id="one">
<option value=""></option>
<option>1</option>
<option>2</option>
</select>
<br />
<select id="two">
<option value=""></option>
<option>3</option>
<option>4</option>
</select>
<br />
<select id="three">
<option value=""></option>
<option>5</option>
<option>6</option>
</select>
<br />
<!-- The submit buttons -->
<input type="submit" id="submit" value="Save" />
<br />
<!-- The link that moves on to the next form -->
Move on
Javascript -
// the variable
var selectChanged = false;
// set up everything on load
window.onload = function() {
// bind handlers to submit button, link, an dselects
document.getElementById("submit").onclick = submitForm;
document.getElementById("moveOn").onclick = moveOn;
var selects = document.getElementsByTagName("select");
var numSelects = selects.length;
for (var i = 0; i < numSelects; i++) {
selects[i].onchange = noteChanged;
}
}
function submitForm() {
// set the changed variable to false
selectChanged = false;
}
function moveOn() {
// if the select has changed without save, alert the user and prevent
// link actions
if (selectChanged) {
alert("You have changed a form value but not saved it");
return false;
}
}
// update the value for each time a select changes
function noteChanged() {
selectChanged = true;
}
Here it is in action
What I would do is:
Whenever a change happens (you can attach to the onChange event for any form elements you need to track), set a flag somewhere that indicates the form (or whatever) is "dirty". (a good place to put this is in data- attributes)
When the form gets saved, the saving process can re-set the dirty flag to clean
Whatever method is used to switch forms can check first to see if the dirty flag is set, and if so, display an error (or warning) and prevent the next form from being shown.
With these 3 pieces in place, you should be able to easily detect a dirty (unsaved) form and take the appropriate actions.

Enabling and disabling fields

I have a form that has two drop down fields lets say A is one and B is another. I want the drop down box B to be disabled until one of the value in the drop down A is selected .
How should I write a Java script?
Use the onchange event of dropdown A to check it's value and change the disabled property of dropdown B:
document.getElementById("dropdown_A").onchange = function ()
{
if (this.selectedIndex == 2) // if the 3rd option is selected
document.getElementById("dropdown_B").disabled = true;
}
Note this code needs to run after the dropdown A element (or the entire document) has been parsed.
For your dropdown_b, make the disabled property = "disabled"
for your dropdown_a, make the onchange to a function that will change dropdown_b's disabled property.
<html>
<head>
window.onload = function()
{
dda = document.getElementById("dropdown_A");
ddb = document.getElementById("dropdown_b");
dda.onchange = function()
{
if(dda.options[dda.selectedIndex] != "")
ddb.disabled = "";
};
}
</head>
<body>
<select id="dropdown_A">
<option value="" selected="selected"></option>
<option value="asdf">asdf</option>
<option value="12345">12345</option>
</select>
<select id="dropdown_B">
..
</select>
</body>
</html>
Basically, until the user selects an actual option nothing will happen... so the blank option [""] won't deselect the other select.

Categories

Resources