Show and Hide Custom Attribute based on Select

General HivePress
1

My site is www.out4biz.ca

I would like to get these custom attributes working on Listings - when transaction_type “barter” or “both” is selected, show “barter_details” and hide “price” and “hourly_rate”. When transaction_type “paid” is selected, hide “barter_details”.

I am using this code snippet but it’s not working:

add_action('wp_footer', function () {
    ?>
    <script>
    document.addEventListener('DOMContentLoaded', function () {
        function toggleTransactionFields(form) {
            const typeField = form.querySelector('[name*="transaction_type"]');
            const barterField = form.querySelector('[name*="barter_details"]')?.closest('.hp-field') || form.querySelector('.hp-field--barter-details');
            const priceField = form.querySelector('[name*="price"]')?.closest('.hp-field') || form.querySelector('.hp-field--price');
            const rateField = form.querySelector('[name*="hourly_rate"]')?.closest('.hp-field') || form.querySelector('.hp-field--hourly-rate');

            if (!typeField) return;

            const selected = typeField.value.toLowerCase();

            if (selected === 'barter' || selected === 'both') {
                if (barterField) barterField.style.display = '';
                if (priceField) priceField.style.display = 'none';
                if (rateField) rateField.style.display = 'none';
            } else if (selected === 'paid') {
                if (barterField) barterField.style.display = 'none';
                if (priceField) priceField.style.display = '';
                if (rateField) rateField.style.display = '';
            } else {
                if (barterField) barterField.style.display = '';
                if (priceField) priceField.style.display = '';
                if (rateField) rateField.style.display = '';
            }
        }

        function initAllForms() {
            const allForms = document.querySelectorAll('form');
            allForms.forEach(form => {
                const typeField = form.querySelector('[name*="transaction_type"]');
                if (typeField) {
                    toggleTransactionFields(form);
                    typeField.addEventListener('change', function () {
                        toggleTransactionFields(form);
                    });
                }
            });
        }

        initAllForms();
    });
    </script>
    <?php
});
3

Hi,

Please try using this code snippet as a sample, replace 123 with the option ID that should hide the Barter Details (you can check option ID when you edit this option via Edit Options on the corresponding attribute page, it looks like “…tag_ID=123…” in the page URL when you edit an option).

add_action(
	'wp_enqueue_scripts',
	function () {
		wp_add_inline_script(
			'hivepress-core-frontend',
			'
			jQuery(document).ready(function($) {
				var form=$(".hp-form--listing-update");

				if(form.length) {
					form.find("select[name=transaction_type]").on("change", function() {
						if($(this).val()==="123") {
							form.find("input[name=barter_details]").hide();
						} else {
							form.find("input[name=barter_details]").show();
						}
					});
				}
			});
			'
		);
	},
	1000
);

Unfortunately I can’t say for sure what’s wrong with the snippet you shared, it would require further debugging, but please check if you also compare selected options in the same way – not with the option label, but with the ID (option values are IDs).

Hope this helps