Remember Combobox Value on Page Redirect

Base12 · Post by **Base12** » Wed Oct 16, 2024 7:06 pm

Is there a setting in WYSIWYG Web Builder to remember a 'Select' (Combobox) value when using window.location.href to redirect to another page?

Currently, when the page is redirected, the Select dropdown menus revert to their default values.

Thanks!

Post by **Pablo** » Wed Oct 16, 2024 7:45 pm

There is no standard option for this, this will require custom code.

Base12 · Post by **Base12** » Wed Oct 16, 2024 7:56 pm

Got it. Thanks Pablo!

BaconFries · Post by **BaconFries** » Wed Oct 16, 2024 9:29 pm

The following uses cookies to work. Is the combobox part of a form then you can try the following.
Give the form a name such as biblequotes. Add a combobox and set the 'name' property for talking sake bible Now select Events in javascript insert

Code: Select all

onchange="saveIndex()" name="bible"

Add the following between the <head></head> In the script

Code: Select all

<script>
 function saveIndex(){ var sfv=''
 var fe=document.forms['biblequotes'].elements; 
 for(i=0;i<fe.length;i++){	if(fe[i].type=='select-one' ){sfv+=''+fe[i].selectedIndex+','}}
 setCookie('formEindex',sfv,2)
 }
 function setFormSelects(){ if(getCookie('formEindex')){ sfv=getCookie('formEindex');
 sfv=sfv.split(',');
 var fe=document.forms['biblequotes'].elements; 
 for(i=0;i<fe.length;i++){fe[i].selectedIndex=sfv[i]}
 }
 else{alert(no cookie!n got script?)}
 }
 window.onload= setFormSelects;
 </script>

Please note that this is untested and should work for a combobox used in a form.

Base12 · Post by **Base12** » Wed Oct 16, 2024 10:00 pm

Wow BaconFries. I really appreciate the help!

I will get to work implementing this and report back.

Base12 · Post by **Base12** » Thu Oct 17, 2024 6:55 am

So, it looks like the Code BaconFries posted may have originated from here...

https://webdeveloper.com/community/2196 ... down-list/

As an FYI, one of the posters found an error...

Code: Select all

this line-

else{alert(no cookie!n got script?)}

should be

else{alert('no cookie!n got script?')}

Since this solution is a bit over my head, I will save it for a future time.

However...

I did find a solution that is working pretty good.

I will post the demo file tomorrow.

Base12 · Post by **Base12** » Thu Oct 17, 2024 6:13 pm

OK, as promised, I have uploaded my demo project for the expert coders to have a good laugh at.

Here is the online demo...

https://www.mostholyplace.org/misc/test ... ber_values

It does exactly what I want.

Here is the project file...

https://www.mostholyplace.org/misc/test ... values.wbs

The concept is simple. The Select Dropdown/Combobox is on the Master Page. There is an HTML file embedded that looks like this...

Code: Select all

<script>
function MenuUpdater()
{
            $("#Master_SelectBook").val(ComboboxBook);
            $("#Master_SelectBook").trigger("change");
            
            $("#Master_SelectChapter").val(ComboboxChapter);
            $("#Master_SelectChapter").trigger("change");
            
            $("#Master_SelectVerse").val(ComboboxVerse);
}
</script>

Whenever I create a new page with a verse, I embed an HTML file into that page...

Code: Select all

<script>
const ComboboxBook = "Genesis";
const ComboboxChapter = "Genesis1";
const ComboboxVerse = "Genesis1:1";
</script>

I then edit the code for each page to reflect the book, chapter and verse.

There is a trigger event on each page that runs after the page has loaded...

Event: ondocumentready
Action: Javascript
Javascript: MenuUpdater()

It runs the code on the Master Page and thus updates the dropdowns with the proper 'Const' values.

The 'secret' is to make sure that the last dropdown menu (ComboboxVerse) does not have a .trigger("change"); in it so as to not reset the menus.

Anyhow, this is the best I can do for now with my limited coding experience.

In the future I can always make this more efficient. Note that I do not plan on making a page for every verse in the Bible. This is just for discussing certain verses.

Base12 · Post by **Base12** » Sat Oct 19, 2024 1:06 am

** UPDATE **

I was able to optimize the code and automate the process a bit more.

Here is the online demo...

https://www.mostholyplace.org/misc/test ... er_values2

Here is the demo project...

https://www.mostholyplace.org/misc/test ... alues2.wbs

I no longer need JavaScript on the verse pages. I still have the Event setting however...

Event: ondocumentready
Action: Javascript
Javascript: MenuUpdater()

Both Scripts are now on the Master Page.

This one stores the menu choices before redirecting to the new page...

Code: Select all

<script>
function Menu_RememberValuesBeforeRedirect()
{

// Set const for Book selection
const SelectBookMenu = document.getElementById("Master_SelectBook");
const ComboboxBook = SelectBookMenu.value;

// Set const for Chapter selection
const SelectChapterMenu = document.getElementById("Master_SelectChapter");
const ComboboxChapter = SelectChapterMenu.value;

// Set const for Verse selection
const SelectVerseMenu = document.getElementById("Master_SelectVerse");
const ComboboxVerse = SelectVerseMenu.value;

// Store const values in Session Storage for retrieval after redirect
sessionStorage.setItem('ComboboxBook', ComboboxBook);
sessionStorage.setItem('ComboboxChapter', ComboboxChapter);
sessionStorage.setItem('ComboboxVerse', ComboboxVerse);

// Create const for beginning of redirect URL
const redirectUrl = "./";

// Add the ComboboxVerse to the rest of the URL
const targetUrl = `${redirectUrl}${ComboboxVerse}.html`;

// Redirect to the new URL
window.location.href = targetUrl;

}
</script>

Apparently, a redirect will erase the Const values, so I had to store them in session memory.

The URL is now automatically filled out by the choices made.

After the page is redirected, the Const values are retrieved from memory and the menu is updated...

Code: Select all

<script>
function MenuUpdater()
{

// Load stored const values before resetting menus
const ComboboxBook = sessionStorage.getItem('ComboboxBook');
const ComboboxChapter = sessionStorage.getItem('ComboboxChapter');
const ComboboxVerse = sessionStorage.getItem('ComboboxVerse');

// Reset the Book menu with the const values and trigger change
$("#Master_SelectBook").val(ComboboxBook);
$("#Master_SelectBook").trigger("change");

// Reset the Chapter menu with the const values and trigger change
$("#Master_SelectChapter").val(ComboboxChapter);
$("#Master_SelectChapter").trigger("change");

// Reset the Verse menu with the const values without triggering change
$("#Master_SelectVerse").val(ComboboxVerse);

}
</script>

I really did not want to get into Cookies or Ajax or whatever. I just need something simple for now.

Thanks to all who helped!

wwonderfull · Post by **wwonderfull** » Sat Oct 19, 2024 4:23 am

Though it would have been better if the code was much more concise and futureproof. Storing values in local storage or session is simple enough but for those who don't want to store it there may need the different approach. So, what might start as a solution might soon end up as a problem. But in general purpose for now it will do fine.

www.wysiwygwebbuilder.com

Remember Combobox Value on Page Redirect

Remember Combobox Value on Page Redirect

Re: Remember Combobox Value on Page Redirect

Re: Remember Combobox Value on Page Redirect

Re: Remember Combobox Value on Page Redirect

Re: Remember Combobox Value on Page Redirect

Re: Remember Combobox Value on Page Redirect

Re: Remember Combobox Value on Page Redirect

Re: Remember Combobox Value on Page Redirect

Re: Remember Combobox Value on Page Redirect