How to parse value of option into input value

I'm sorry this question is kind of a duplicate of this question: Parse value of option into html attribute but I don't know how to change the answer there to my problem. I am trying to do the same thing just I'm trying to not parse it into a "data-selly-product" I'm trying to put it into "value".

This is the code for the button where the values should be inserted to:

<form class="flex-c-m stext-101 cl0 size-101 bg1 bor1 hov-btn1 p-lr-15 trans-04" name="PrePage" method = "post" action = "https://scotest.authorize.net/payment/CatalogPayment.aspx"> <input class="js-addcart-detail" type = "hidden" name = "LinkId" value ="" /> <input type = "image" src ="//testcontent.authorize.net/images/buy-now-gold.gif" /> </form> 

The rest is exactly the same as with the other problem

I've tried changing this code:

<script type="text/javascript">
function getComboA(selectObject) {
const button = document.querySelector('button.js-addcart-detail');
button.dataset.sellyProduct = selectObject.value;
console.log(button);
}
</script>

To this:

<script type="text/javascript">
function getComboA(selectObject) {
const button = document.querySelector('form.js-addcart-detail');
form.value = selectObject.value;
console.log(button);
}
</script>

Error message in Developer Console:

ReferenceError: form is not defined

But that doesnt work.

2 answers

  • answered 2019-07-18 15:44 Always Sunny

    If I don't misunderstood your question, then this is what you want to achieve. You basically want to set the selected option's value on a hidden input fields value.

    function getComboA(selectObject) {
      const input = document.querySelector('input.js-addcart-detail');
      input.value = selectObject.value;
      console.log(input);
    }
    <select class="js-select2" name="time" id="comboA" onchange="getComboA(this)">
      <option value="">Choose an option</option>
      <option value="3cffe13b">Size S</option>
      <option value="M">Size M</option>
      <option value="L">Size L</option>
      <option value="XL">Size XL</option>
    </select>
    
    <input class="js-addcart-detail" type="hidden" name="LinkId" value="" />
    <button class="flex-c-m stext-101 cl0 size-101 bg1 bor1 hov-btn1 p-lr-15 trans-04 js-addcart-detail">Add to cart</button>

  • answered 2019-07-18 15:55 wael zamouri

    You use :

         `<input class="js-addcart-detail" type = "hidden" .....`
    

    So your code should be :

         `const input = document.querySelector('input.js-addcart-detail');`
    

    Or you can give an id to you element and get it like that:

         `<input id="myId" class="js-addcart-detail" type = "hidden" .....`
    

    then JS should be :

         `const button = document.querySelector('#myId');`
    

    For mode details https://developer.mozilla.org/fr/docs/Web/API/Document/querySelector

    Hopes help you !