Javascript - Show alert when specific radio button is checked on ID

Question

I need to show a alert when someone clicks on a radio button with a specific ID.

This is the radio button:

<input name="shipping_method" type="radio" class="validate-one-required-by-name" value="kerst_shipping_standard" id="s_method_kerst_shipping_standard">

And when someone clicks that radio button it needs to show a alert.

That's not giving me the right answer since the inputs are generated by code, so I can't add the onclick="alert('test');" in the input tag, I need to do it by javascript. — n00bly, Nov 05 '19 at 08:50

score 1 · Answer 1 · answered Nov 05 '19 at 08:50

1

Try next code:

document.getElementById("s_method_kerst_shipping_standard").addEventListener('click',function(){
    alert('clicked');
})

<input name="shipping_method" type="radio" class="validate-one-required-by-name" value="kerst_shipping_standard" id="s_method_kerst_shipping_standard">

answered Nov 05 '19 at 08:50

Aksen P

4,564
3
14
27

Thanks for you answer, this works also! – n00bly Nov 05 '19 at 09:01

score 1 · Answer 2 · answered Nov 05 '19 at 08:50

1

Quick example :

document.getElementById("s_method_kerst_shipping_standard").onclick = function(){
  alert('Your alert')
}

Link to similar question

answered Nov 05 '19 at 08:50

Davit Mkrtchyan

449
5
15

score 1 · Answer 3 · answered Nov 05 '19 at 08:54

This could easily be done by selecting your button using the document method getElementById() and binding a function with your alert inside to its onclick.

like i did below:

document.getElementById('s_method_kerst_shipping_standard').onclick = function(){
  alert("Alert!");
};

<input name="shipping_method" type="radio" class="validate-one-required-by-name" value="kerst_shipping_standard" id="s_method_kerst_shipping_standard">

Thanks for you answer, this works also! – n00bly Nov 05 '19 at 09:02 — n00bly, Nov 05 '19 at 09:02

score 1 · Answer 4 · edited Nov 05 '19 at 08:57

1

    radioBtn = document.querySelector("#s_method_kerst_shipping_standard");
  console.log(radioBtn);

  radioBtn.addEventListener("click",function(e){
      alert("test")

  }
)

edited Nov 05 '19 at 08:57

jsadev.net

2,800
1
16
28

answered Nov 05 '19 at 08:56

Zah

106
5

Thanks for you answer, this works also! – n00bly Nov 05 '19 at 09:02
1

Welcome to Stack Overflow! While this code may answer the question, it is better to include some context, explaining how it works and when to use it. Code-only answers tend to be less useful in the long run. See [How do I write a good answer?](https://stackoverflow.com/help/how-to-answer) for some more info. – Mark Ormesher Nov 05 '19 at 09:03

score 0 · Accepted Answer · answered Nov 05 '19 at 08:50

0

Try this.

document.getElementById('s_method_kerst_shipping_standard').addEventListener('click', function() {
    alert('ok');
});

I am assuming ID is unique in the document.

answered Nov 05 '19 at 08:50

Nikhil Goyal

1,945
1
9
17

score 0 · Answer 6 · answered Nov 05 '19 at 09:03

function inputSelect(value)
      {
       if(document.getElementById("s_method_kerst_shipping_standard").checked===true)
       {
           alert("You Clicked");
       }
      }

<input name="shipping_method" type="radio" class="validate-one-required-by-name" value="kerst_shipping_standard" id="s_method_kerst_shipping_standard" onclick="inputSelect(this.value)">

You have to set an onclick listener. You can check whether it is selected or not in javascript as follow

Javascript - Show alert when specific radio button is checked on ID

6 Answers6