Selected Options to FoxyCart Using Dropdown Menus

Hi all,

The following code allows a sub-dropdown menu (colour selection) to appear if the selected option is 'Yes'. My question is, what if a user changes their mind and first selects Yes, color menu appears, but then does not like the colors, and decides 'No'. The Color menu is no longer displayed but on 'Add to Cart', the color option selected temporarily gets sent to FoxyCart. How does one 'reset' the option (No) so as not to send the color option to FoxyCart without refreshing the page?

(closing brackets removed for display purposes)

select id="test" name="form_select" onchange="showDiv(this)"
option value="0">No/option
option value="1">Yes/option
/select
div id="hidden_div" style="display:none;">Color Menu Options/div


var select = document.getElementById('test'),
onChange = function(event) {
var shown = this.options[this.selectedIndex].value == 1;

document.getElementById('hidden_div').style.display = shown ? 'block' : 'none';
};

// attach event handler
if (window.addEventListener) {
select.addEventListener('change', onChange, false);
} else {
// of course, IE < 9 needs special treatment
select.attachEvent('onchange', function() {
onChange.apply(select, arguments);
});
}


Paul
Comments
  • fc_adamfc_adam FoxyCart Team
    @arny987,

    Good question. If a form input has a name attribute that begins with x: - it won't be included as part of the product details when adding to the cart, instead it will just be ignored. As part of your change event - you could update your colour select element's name to either add or remove x: depending on the customers selection. Full details on add to cart options can be seen on http://wiki.foxycart.com/static/redirect/cheat_sheet
Sign In or Register to comment.