Ufdjrw

I have a cascading dropdown menu populated by an AJAX call which works as intended. However, when I submit the form and refresh the page, the selected values reset. I'd like to be able to maintain the selected values within their drop-down boxes upon submitting the form and refreshing the page.

I've found several solutions on Stack Overflow already, but can't seem to find one that shows how to maintain the selected values from a form who's options are dynamically populated.

My HTML and JS are below.

<form method="get" class='d-print-none' id='gameForm' team-ids-url=% url 'ajax_load_teamids' % game-ids-url=% url 'ajax_load_gameids' % novalidate>
<div class="input-group">
<select class="custom-select" id="inputTeamId" name="inputteamid"></select>
<select class="custom-select" id="inputGameId" name="inputgameid"></select>
<div class="input-group-append">
 <button class="btn btn-outline-secondary" type="submit" value="submit" onclick="loading();">Run</button>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function() 
var url = $("#gameForm").attr("team-ids-url");
$.ajax(
 url: url,
 success: function(data) 
 $("#inputTeamId").html(data);
 
);
);
$("#inputTeamId").change(function() 
var url = $("#gameForm").attr("game-ids-url");
var selected_teamid = $(this).val();
localStorage.setItem("SelectedTeamId", selected_teamid);
$.ajax(
 url: url,
 data: 
 'selected_teamid':selected_teamid
 ,
 success: function (data) 
 $("#inputGameId").html(data);
 
)
)
</script>

Consider the following code: https://jsfiddle.net/Twisty/5p2yg034/

HTML

<form method="get" class="d-print-none" id="gameForm" data-team-url="./teams" gdata-game-url="./games">
 <div class="input-group">
 <select class="custom-select" id="inputTeamId" name="inputteamid">
 <option></option>
 <option value="t1">Team 1</option>
 <option value="t2">Team 2</option>
 <option value="t3">Team 3</option>
 </select>
 <select class="custom-select" id="inputGameId" name="inputgameid">
 <option></option>
 <option value="g1">Game 1</option>
 <option value="g2">Game 2</option>
 <option value="g3">Game 3</option>
 </select>
 <div class="input-group-append">
 <button class="btn btn-outline-secondary" type="submit" value="submit" onclick="loading();">Run</button>
 </div>
 </div>
</form>

One thing to look at here is using data attributes so that you can later use .data() in jQuery.

JavaScript

$(function() 
 function loadData() 
 var fd = localStorage.getItem("fd");
 if (fd != null) 
 return JSON.parse(fd);
 
 return false;
 

 function saveData(fd) 
 localStorage.setItem("fd", JSON.stringify(fd));
 

 function get(item) 
 if (item == undefined) 
 item = "team"
 
 var url;
 switch (item) 
 case "team":
 url = $("#gameForm").data("team-url");
 $.get(url, function(r) 
 $("#inputTeamId").val(r);
 );
 break;
 case "game":
 url = $("#gameForm").data("game-url");
 $.get(url, 
 'selected_teamid': $("#inputTeamId").val()
 , function(r) 
 $("#inputGameId").val(r);
 );
 
 saveData(
 'inputTeamId': $("#inputTeamId").val(),
 'inputGameId': $("#inputGameId").val()
 );
 

 function loading(e) 
 e.preventDefault();
 saveData(
 'inputTeamId': $("#inputTeamId").val(),
 'inputGameId': $("#inputGameId").val()
 );
 // Loading script
 

 function init() 
 var formData = loadData();
 if (formData) 
 $.each(formData, function(i, d) 
 $("#" + i).val(d);
 );
 else 
 get("team");
 
 

 $("#inputTeamId").change(function() 
 get("team");
 );

 $("#gameForm").submit(loading);

 init();
);

This example makes use of localStorage to quickly store the form values. The functions can easily be adjusted to use Cookies or pushing them to the server to be stored. This depends on your needs.

If the form has basic data, collecting it in to an object will be easy and helpful for storing. We can only store String data to localStorage, so we can use JSON.stringify() to convert the object into a String that we can parse later.

When the page loads, we can attempt to load the data. If there is no localStorage content, it will try to get a Team. If there is data, it will set that data in the form elements by ID.

In your script, you can collect the URLs using $("#gameForm").data('team-url') and $("#gameForm").data('game-url'). If your form gets more complex, you may consider using GET the data from one Script with a item passed to it.

Hope that helps.