user only select one payment option(credit card) through radio button with the help of Javascript

Question

I have 4 credit card options user can select only one payment option(credit card) at a time and return value per name or some values of card. And i dnt want to any submit button after cards because these options are in form and form have already submit button.I want to do this with JavaScript.

Here is my html code:-

    <INPUT TYPE="RADIO" NAME="Ccard" VALUE="visa">Visa<BR>
    <INPUT TYPE="RADIO" NAME="Ccard" VALUE="master">Master<BR>
    <INPUT TYPE="RADIO" NAME="Ccard" VALUE="american_express">American Express<BR>
    <INPUT TYPE="RADIO" NAME="Ccard" VALUE="discover">Discover<BR>

Kindly advise me ASAP. Thanks,

share the code which u have tried n let me know the problem in it. — MANOJ GOPI, Jan 12 '15 at 11:03
If you use radio button in a form, you will be able to achieve this without using JS — Gezzasa, Jan 12 '15 at 11:08
possible duplicate of [JavaScript, How can I check whether a radio button is selected?](http://stackoverflow.com/questions/1423777/javascript-how-can-i-check-whether-a-radio-button-is-selected) — kumarharsh, Jan 12 '15 at 11:12
I have added my code and I dnt want to check value of radio button I want to return payment value through radio button .. — user3932382, Jan 13 '15 at 05:13

score 0 · Answer 1 · answered Jan 12 '15 at 11:10

0

I assume you have already the HTML of the radio buttons. the javascript needed :

 if (document.getElementById('idOfRadioButton1').checked) {
 creditCard= document.getElementById('idOfRadioButton1').value;
}

the same for radioButton2,3,4.

answered Jan 12 '15 at 11:10

Wagdi

119
6

cнŝdk · Answer 2 · 2015-01-12T11:16:45.927

Well simply use HTML radio input:

function getValue(){

    var radios = document.getElementsByName('creditcard');
    for (var i = 0, length = radios.length; i < length; i++) {
      if (radios[i].checked) {       
        alert(radios[i].value);
        break;
      }
    }
  }

        <INPUT TYPE="RADIO" NAME="creditcard" VALUE="Type1" CHECKED>Type1<BR>
        <INPUT TYPE="RADIO" NAME="creditcard" VALUE="Type2">Type2<BR>
        <INPUT TYPE="RADIO" NAME="creditcard" VALUE="Type3">Type3<BR>
        <INPUT TYPE="RADIO" NAME="creditcard" VALUE="Type4">Type4<BR>
          
        <INPUT TYPE="SUBMIT" VALUE="Get Value" onclick="getValue()">

By giving the four input elements the same name, they will be like a group of radio buttons where you can select only one of them at once.

And with this Javascript function you can get the checked element from them.

user only select one payment option(credit card) through radio button with the help of Javascript

2 Answers2