Hidden fields in user form

[Polly Fisher]

Hi all,

I'm using this handy script to show a field in a store product if the user selects a particular item from a dropdown list. In this case, if they choose "006 -Edina' a blank form field appears. It works great. However, I want to make that field appear if they choose another field also, for example if they choose either 006 - Edina or 007 - St Paul, the hidden field appears. If they choose anything else from that dropdown, the field stays hidden. 

I tried a few different things but nothing works. Do any of you have any ideas how I can alter this script to do that?

<script>

$(document).ready(function() {

$triggerSelect = $('#ctl00_cphMainContent_ucDialCustomization_Duc136020_DropDownList');

$hiddenDial = $('#Dial_136018');



dropdownTrigger($triggerSelect,$hiddenDial,"006 – Edina");

function dropdownTrigger(trigger,hidden,val) {

hidden.hide();

trigger.change(function(){

hidden.fadeOut();

if(trigger.val() == val){

                hidden.fadeIn();

            }

});

};

});

</script>

[west-digital.fr]

Hello.

Would you like to try the following code?

<script>
$(function () {
  const $trigger = $('#ctl00_cphMainContent_ucDialCustomization_Duc136020_DropDownList');
  const $hidden  = $('#Dial_136018');

  // Values which would trigger
  const showValues = new Set([
    "006 – Edina"
    , "007 - St Paul"
    , "005 - Charles"
  ]);

  function toggleHidden() {
    const current = $trigger.val();
    const shouldShow = showValues.has(current); // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/has
    $hidden.stop(true, true)[shouldShow ? 'fadeIn' : 'fadeOut'](); // https://api.jquery.com/stop/
  }

  toggleHidden();
  $trigger.on('change', toggleHidden);
});
</script>

west-digital.fr

[Polly Fisher]

Thank you so much west-digital.fr ! 

It works beautifully!! I'll be able to use this a lot!

Polly

[Chris Halt]

Newbee here. Help me understand…

Is this JQuery JavaScript being implemented through "Add JavaScript to Storefront" in uStore?
How is this code being introduced in the development of your storefront?

Thanks in advance!

Chris

[west-digital.fr]

>>  Is this JQuery JavaScript being implemented through "Add JavaScript to Storefront" in uStore?

That was indeed the purpose, as the uStore page that hosts the feature is still a "Legacy" page (ASP), including with uStore 25.3.

>>  How is this code being introduced in the development of your storefront?

Maybe I do not understand the term "introduced"?

The uStore code (from XMPie) sort of "injects" "Store JavaScript" into all Legacy pages (ASP); i.e. per instance the Login page, all pages in the "Little Man" tool, all pages that are located after the Shopping Cart (not the Shopping Cart itself in version 25.3), and the Customization Wizard page, should a Custom Legacy Dial exist.

Meaning that, all other pages (the "Welcome" page, the Shopping Cart page, etc.) are now in ReactJS (AKA "NG"), so the XMPie code does *not* "inject" "Store JavaScript" into them.

The day XMPie would release a new version of uStore, where a given Legacy page would become an NG page, then the features currently implemented as "Store JavaScript" would need to be re-developped, as part of a Widget or a Custom Theme feature, I suppose.

west-digital.fr

[Wayne]

Hi Chris,

The easiest was to implement the JavaScript code at a product level is to add an additional dial.

With a Legacy Dynamic product a variable i.e.. JS01 can be added and assigned to a Generic HTML Dial - the JavaScript code is then added.

Legacy Static you would just add an additional product property.

I am not a fan of hard coding Dial ID's and prefer obtaining the Dial ID from the Dial name.

If you duplicate a product hardcoded Dial ID's will need to be updated for the product to work properly.

With the new NG Products you can still use Generic HTML or create a Dial Widget.

NG Generic HTML lets you create functions in the JavaScript global scope meaning you can access a function from another Dial.

Regards,

Wayne