CODEWITHSUNDEEP
javascripthtmlcss
fiterpilot
fiterpilot

Reputation: 27

Good and CLEAN way to check this? (JS + HTML)

I am trying to make a system that will check what radio button is pushed. (Side note there WILL always be 1 checked.) The code I have so far is rather lacking and I'm not entirely sure how to improve. Any help??

NOTE: I have multiple 'systems' that look just like this, so I'll give you just 1 chunk. That being said, there are multiple chunks like this. I need a way to make this easy on my end.

HTML:

<div class="panel">
            <div class="panel-header">Storage</div>
            <div class="panel-body">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-sm-4 col-md-2">
                            <input name="STORAGE" type="radio" id="STORAGE" checked>
                            <label class="radio" for="STORAGE">
                                <center>
                                <img src="../images/Parts/Western_Digital_Caviar_Blue_320GB.png" class="comp-img"><br><br>
                                <p>320GB Western Digital Caviar Blue 3.5" 7200RPM HDD</p>
                                </center>
                            </label>
                        </div>

                        <div class="col-sm-4 col-md-2">
                            <input name="STORAGE" type="radio" id="STORAGE2">
                            <label class="radio" for="STORAGE2">
                                <center>
                                <img src="../images/Parts/Western_Digital_Caviar_Blue_320GB.png" class="comp-img"><br><br>
                                <p>500GB Western Digital WD5000AAKX 3.5" 7200RPM HDD</p>
                                <p class="money">+$55</p>
                                </center>
                            </label>
                        </div>

                        <div class="col-sm-4 col-md-2">
                            <input name="STORAGE" type="radio" id="STORAGE3">
                            <label class="radio" for="STORAGE3">
                                <center>
                                <img src="../images/Parts/Western_Digital_Caviar_Blue_320GB.png" class="comp-img"><br><br>
                                <p>1TB Western Digital WD10EZEX 3.5" 7200RPM HDD</p>
                                <p class="money">+$55</p>
                                </center>
                            </label>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-sm-4 col-md-2">
                            <input name="SSD" type="radio" id="SSD" checked>
                            <label class="radio" for="SSD">
                                <center>
                                <img src="../images/Parts/None.png" class="comp-img"><br><br>
                                </center>
                            </label>
                        </div>

                        <div class="col-sm-4 col-md-2">
                            <input name="SSD" type="radio" id="SSD2">
                            <label class="radio" for="SSD2">
                                <center>
                                <img src="../images/Parts/A-DATA_SSD.png" class="comp-img"><br><br>
                                <p>120GB A-Data ASP550SS3-120GM-C SSD</p>
                                <p class="money">+$40</p>
                                </center>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>

JS:

    function Check(){
    if(document.getElementById('STORAGE3').checked & HDD3Clicked==0){
        if (HDD2Clicked>0) {
            HDD2Clicked = 0;
            HDD3Clicked = 1;
        }else{
            HDD3Clicked = 1;
            Adding(+55);
            console.log("Adding");
        }
    }else if (document.getElementById('STORAGE2').checked & HDD2Clicked==0) {
        if (HDD3Clicked>0) {
            HDD2Clicked = 1;
            HDD3Clicked = 0;
        }else{
            HDD2Clicked = 1;
            Adding(+55);
            console.log("Adding");
        }
    }else if (document.getElementById('STORAGE').checked & HDD3Clicked>0) {
        HDD3Clicked = 0;
        Adding(-55);
        console.log("Subtracting");
    }else if(document.getElementById('STORAGE').checked & HDD2Clicked>0){
        HDD2Clicked = 0;
        Adding(-55);
        console.log("Subtracting");
    }

    setTimeout(function() {Check()}, 5000);
}

Upvotes: 0

Views: 57

Answers (3)

Franc
Franc

Reputation: 5496

If you don't want to use jQuery, this is a pure javascript solution:

<input type="radio" name="radioGroup" onclick="handleClick(this);" value="1"/>
<input type="radio" name="radioGroup" onclick="handleClick(this);" value="2" />

<script> 
    var handleClick = function(e){
      alert(e.value);
    }
</script>

Upvotes: 1

TheValyreanGroup
TheValyreanGroup

Reputation: 3599

If you can use jQuery it's fairly simple...

var clickedID;
$(document).ready(function(){
  $('radio').on('click'),function(){
    clickedID = $(this).attr("id");
  });
});

That will give you the id of whichever radio element has been clicked. Then you can do with it what you'd like.

Upvotes: 2

user6269864
user6269864

Reputation: 

var radioButtons = selectorQueryAll("input[type=radio]:checked");

for (button in radioButtons) {
    console.log(button.id);
}

1) Return all checked radio buttons

2) Output their ID to console.

Upvotes: 1

Related Questions