How to make an HTML attribute change depending on which option is selected

Question

I am trying to make a button change when a certain option from a drop-down is selected.

document.getElementById("region").onchange = function() {
  document.getElementById("order-btn").product-code = this.value;
}

<select name="option" id="option" required>
  <option value="1234d1">Option 1</option>
  <option value="amdk19">Option 2</option>
  <option value="akd1sk">Option 3</option>
  <option value="19sd91">Option 4</option>
  <option value="asjd91">Option 5</option>
  <option value="129e8j">Option 6</option>
</select>

<div class="btn-checkout">
  <button id="order-btn" type="submit" product-code="">Checkout</button>
</div>

What I need to happen is when an option is chosen from the drop-down, the product code associated with that option is put into the product-code="HERE" on the button.

For example, If I chose Option 2 on the drop-down, its product code "amdk19" would then be put into the button like this:

<button id="order-btn" type="sumbit" product-code="amdk19">

I think this can be done with JavaScript, but I could not figure out how.

Thanks

What have you tried so far? Please show your attempt and tell us what exactly is broken with it. — Johannes H., May 02 '21 at 16:58
@JohannesH. Hey I have tried using this: But I dont think js understands what the product-code is? — ACT22AC, May 02 '21 at 17:00
Yep, you're on the right track! You have to use `setAttribute` and `getAttribute`, as shown in my answer! :) — Nisala, May 02 '21 at 17:04
@ACT22AC please avoid posting code in comment, it's very unreadable. You can [edit] your question and add formatted code in it as response to comments — T J, May 02 '21 at 17:09
Please note that `product-code` is not a valid custom attribute name, rendering your **HTML invalid**. Custom attribute names must start `data-`. — connexo, May 02 '21 at 17:34
Does this answer your question? [When to use setAttribute vs .attribute= in JavaScript?](https://stackoverflow.com/questions/3919291/when-to-use-setattribute-vs-attribute-in-javascript) — Heretic Monkey, May 02 '21 at 17:54

Nisala · Accepted Answer · 2021-05-02T17:45:16.560

1

Something like this should work! You can't set attributes on the object directly, like you tried -- instead, you have to use setAttribute on the button. You can use .value on the dropdown to get the value of the selected option.

document.getElementById("option").onchange = function() {
  const btn = document.getElementById("order-btn");
  // `this` refers to the dropdown, so you're getting the dropdown's selected value
  btn.setAttribute("product-code", this.value);
}

document.getElementById("order-btn").onclick = function() {
  // `this` refers to the button
  console.log(this.getAttribute("product-code"));
}

<select name="option" id="option" required>
  <option selected disabled>Select An Option</option>
  <option value="1234d1">Option 1</option>
  <option value="amdk19">Option 2</option>
  <option value="akd1sk">Option 3</option>
  <option value="19sd91">Option 4</option>
  <option value="asjd91">Option 5</option>
  <option value="129e8j">Option 6</option>
</select>

<div class="btn-checkout">
  <button id="order-btn" type="submit" product-code="">Checkout</button>
</div>

edited May 02 '21 at 17:45

answered May 02 '21 at 17:03

Nisala

1,313
1
16
30

2

While you're correct that it works, you haven't bothered to explain how, or why, it works. So how is the OP - or any future visitor with a similar problem - supposed to learn? – David Thomas May 02 '21 at 17:12
1

@DavidsaysreinstateMonica This code is relatively simple, it's just 3 self-explanatory lines -- but fair enough, I've added some explanation. I'd appreciate if y'all would remove your downvotes, though, that seems a bit harsh. – Nisala May 02 '21 at 17:15
Without any explanation I found the answer to be "not useful," therefore I down-voted it; as you've improved the answer I've removed the down-vote. As for your statement that it's "*3 self-explanatory lines*" I'd argue that they're not so self-explanatory for OP and others unfamiliar with JavaScript. – David Thomas May 02 '21 at 17:18
2

Please don't suggest using inline event listeners. It's widely considered bad practice and really a no-go for any professional developer. – connexo May 02 '21 at 17:40
1

@connexo fair enough, I've changed it to match the code that the OP updated in their post. Would appreciate a change in vote :) – Nisala May 02 '21 at 17:46

score -3 · Answer 2 · answered May 02 '21 at 17:17

-3

As there are already answer to this. I would like to recommend you Jquery for easy dealing with javascript.

Include jquery cdn like this : Adding jquery CDN in HTML
Add id to your select and button. Adding Id in HTML
Then use jquery methods like this:

$("#optionsOfSomething").on("change",function(e){

$("#order-btn").attr("product-code",$(this).val());

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
      <select name="option" id="optionsOfSomething" required>
       <option value="1234d1">Option 1</option>
        <option value="amdk19">Option 2</option>
        <option value="akd1sk">Option 3</option>
         <option value="19sd91">Option 4</option>
         <option value="asjd91">Option 5</option>
           <option value="129e8j">Option 6</option>
            </select>
    
<div class="btn-checkout">
  <button id="order-btn" type="submit" product-code="">Checkout</button>
         </div>

answered May 02 '21 at 17:17

Bishal Gautam

380
3
16

1

OP is new to JavaScript. Why are you recommending to him a library that considers Javascript a prerequisite? – Spectric May 02 '21 at 17:18
1

What benefit does jQuery offer that JavaScript - without the library - can more easily accomplish? – David Thomas May 02 '21 at 17:20
because learning javascript is always hard for begineers. jquery will make his life a lot easier. – Bishal Gautam May 02 '21 at 17:21
I will still stick to my jquery theory as it is more readable for begineers. It is essential to learn the javascript no doubt on that but i believe jquery first aids on learning the javascript much easily than learning the javascript itself. @Spectric – Bishal Gautam May 02 '21 at 17:26
2

Actually it's the other way around. People that learn jQuery first usually lack a solid understanding of what they're doing, which unnecessarily lengthens and complicates the process of learning Javascript. Also jQuery really is becoming a thing of the past that almost every serious developer tries to get rid of. – connexo May 02 '21 at 17:37

How to make an HTML attribute change depending on which option is selected

2 Answers2