|
| 1 | +/** |
| 2 | + * Addressbook checkout component |
| 3 | + * This handles a dropdown or radio buttons containing existing addresses or payment methods, |
| 4 | + * with one of the options being "create a new ____". When that last option is selected, the |
| 5 | + * other fields need to be shown, otherwise they need to be hidden. |
| 6 | + */ |
| 7 | +function onExistingValueChange() { |
| 8 | + let existingValues = document.querySelectorAll('.hasExistingValues'); |
| 9 | + if(!existingValues) return; |
| 10 | + |
| 11 | + existingValues.forEach(function (container, idx) { |
| 12 | + let toggle = document.querySelector('.existingValues select, .existingValues input:checked'); |
| 13 | + |
| 14 | + // visible if the value is not an ID (numeric) |
| 15 | + let toggleState = Number.isNaN(parseInt(toggle.value)); |
| 16 | + let toggleFields = container.querySelectorAll(".field:not(.existingValues)"); |
| 17 | + |
| 18 | + // animate the fields - hide or show |
| 19 | + if (toggleFields && toggleFields.length > 0) { |
| 20 | + toggleFields.forEach(field => { |
| 21 | + field.style.display = toggleState ? '' : 'none'; |
| 22 | + }) |
| 23 | + } |
| 24 | + |
| 25 | + // clear them out |
| 26 | + toggleFields.forEach(field => { |
| 27 | + field.querySelectorAll('input, select, textarea').forEach(f => { |
| 28 | + f.value = ''; |
| 29 | + f.disabled = toggleState ? '' : 'disabled'; |
| 30 | + }); |
| 31 | + }); |
| 32 | + }); |
| 33 | +} |
| 34 | + |
| 35 | +let selectors = document.querySelectorAll('.existingValues select'); |
| 36 | +if(selectors) selectors.forEach(selector => selector.addEventListener('change', onExistingValueChange)); |
| 37 | + |
| 38 | +let inputs = document.querySelectorAll('.existingValues input[type=radio]') |
| 39 | +if(inputs) inputs.forEach(input => input.addEventListener('click', onExistingValueChange)); |
| 40 | + |
| 41 | +onExistingValueChange(); // handle initial state |
0 commit comments