Input Value Attribute Not Changing with Variant

[metagals]

I created a product inquiry form on our product pages that autofills with the product SKU so that our admin can know which product the user is inquiry about. 

The problem I am having is that the SKU does not change when a user changes the variant selection. I realized this is because it needs to be wrapped in  <span class="variant-sku">

However, this is an input value attribute and cannot be wrapped in a <span>. I tried creating a liquid snippet and rendering it within the input value but this did not work. 

Here is my code for the input field in the form:

{% assign current_variant = product.selected_or_first_available_variant %}

<input type="text" id="contact_form_name" readonly="readonly" onfocus="this.blur();" name="contact[sku]" value= "{{ current_variant.sku }}">

Any suggestions? 

[Transcy]

Hello @metagals ,

You can try to modify the code to update the input field value dynamically when the variant selection changes like this

const variantSelector = document.getElementById('variant-select');
const skuInput = document.getElementById('contact_form_name');

variantSelector.addEventListener('change', function() {
  const selectedVariant = variantSelector.value;

  const sku = getSKUForVariant(selectedVariant); 

  skuInput.value = sku;
});

function getSKUForVariant(variant) {
}

[ZenoPageBuilder]

Hello @metagals 

You can add some Javascript code that listens to the variant select change and update the SKU in the input accordingly.

[metagals]

Do you have any idea how I would structure this? Thank you!

[ZenoPageBuilder]

It really depends on your theme structure. Can you share your store URL?

[metagals]

Live Site: thelostco.com

Shopify URL: mister-lost-bike-shop.myshopify.com 

[ZenoPageBuilder]

The rough code looks like this

{% assign current_variant = product.selected_or_first_available_variant %}

<input type="text" id="contact_form_name" readonly="readonly" onfocus="this.blur();" name="contact[sku]" value= "{{ current_variant.sku }}">

<script>
    var product = {{ product | json }}
    var variantSelect = document.querySelector('#SingleOptionSelector-0')
    var inputSKU = document.querySelector('input[contact[sku]]')

    updateSKU()
    variantSelect.addEventListener('change', updateSKU)

    function updateSKU() {
        var variant = variantSelect.value
        // TODO: You need to code this part
        // Using the product object declared above, and extract the correct SKU
        var variantSKU = ''
     
        inputSKU.value = variantSKU
    }
</script>

Please implement the TODO in the code above.

[metagals]

I am having trouble getting this to work, are you available to hire to help implement?

[metagals]

Just following up here, let me know if you are available to hire to help us complete this code!

[ZenoPageBuilder]

Hello @metagals 

Sorry for the late reply. You can reach us at [email protected] for free help at no cost.

[metagals]

Amazing, I just sent an email!