Auto-fill Gravity Forms field when a WooCommerce variation dropdown is selected

				
					Note: Replace the Gravity form field ID

<script>
	document.addEventListener('DOMContentLoaded', function () {
		const productNameField = document.getElementById('input_1_20'); // Product name
		const attributesField = document.getElementById('input_1_21'); // Selected attributes

		// Make fields read-only so they can't be manually edited
		if (productNameField) productNameField.readOnly = true;
		if (attributesField) attributesField.readOnly = true;

		// Get product title from WooCommerce product page
		const productTitleEl = document.querySelector('.product_title');
		const productTitle = productTitleEl ? productTitleEl.textContent.trim() : '';

		// Set product name into input_1_20
		if (productNameField && productTitle) {
			productNameField.value = productTitle;
		}

		// Get all variation select elements
		const variationSelects = document.querySelectorAll('form.variations_form select[name^="attribute_"]');

		// Update variation values in input_1_21
		function updateAttributesField() {
			const selectedValues = [];

			variationSelects.forEach(function(select) {
				if (select.value) {
					selectedValues.push(select.value);
				}
			});

			if (attributesField) {
				attributesField.value = selectedValues.join(' | ');
			}
		}

		// Listen to changes on each variation select
		variationSelects.forEach(function(select) {
			select.addEventListener('change', updateAttributesField);
		});

		// Clear attributes field when "Clear" link is clicked
		const resetLink = document.querySelector('.reset_variations');
		if (resetLink && attributesField) {
			resetLink.addEventListener('click', function () {
				attributesField.value = '';
			});
		}

		// Run once on page load to pre-fill if already selected
		updateAttributesField();
	});
</script>