CODEWITHSUNDEEP
javascripthtml
hillary etafo
hillary etafo

Reputation: 65

Add event listener after getting radio button value

i want to loop through the radio input and after getting the selected button run a function on it to get value from the radio tag ... but im having problem attaching the a function to run on the selected radio

for(var i=0;i<removeCartItemsButtons.length; i++){
var button= removeCartItemsButtons[i]
button.addEventListener('click',removeCartItem)//**like i did here**

}

var form= document.getElementsByClassName('product-form')[0]
form.addEventListener('submit', function(e){
    e.preventDefault()

var selectedSize = document.getElementsByName('size')
for(var i=0;i<selectedSize.length; i++){
    var  size=selectedSize[i].checked
    size.addEventListener('change',addToCartClicked)   
}
}
<form class="product-form">
                <div class="product-sizes">
                <input type="radio" class="size" name="size" id="size1" value="34">
                <label for="size1">34</label>
                <input type="radio" class="size" name="size" id="size2" value="36">
                <label for="size2">36</label>
                <input type="radio" class="size" name="size" id="size3" value="38">
                <label for="size3">38</label>
                <input type="radio" class="size" name="size" id="size4" value="40">
                <label for="size4">40</label>
                <input type="radio" class="size" name="size" id="size5" value="42">
                <label for="size5">42</label>
                <input type="radio" class="size" name="size" id="size6" value="44">
                <label for="size6">44</label>
                </div>

                <button class="btn-black" type="submit" >ADD TO CART</button>
        </form>

Upvotes: 2

Views: 860

Answers (3)

Tangentially Perpendicular
Tangentially Perpendicular

Reputation: 5358

If you're running the submit event handler then there's no point then in adding an event handler to an element on the form. If you want to extract the value of a radiobutton you can do it with this one line of code:

    let size =  document.querySelector('input[name="temp"]:checked').value;

Once you have that value you can call whatever Javascript function you need:

function addToCartClicked(size) {
    console.log("Size: "+size);
    document.body.append(size);
}

var form = document.getElementsByClassName('product-form')[0];

form.addEventListener('submit', function(e){
    e.preventDefault();
    let size =  document.querySelector('input[name="temp"]:checked').value;
    addToCartClicked(size);
});

Upvotes: 1

c2devBj
c2devBj

Reputation: 66

I think you'd need to modify your JS code like below (sorry, I added semicolon to help me read better :-)

var form = document.getElementsByClassName('product-form')[0];

form.addEventListener('submit', function(e){
    e.preventDefault();

    var selectedSize = document.getElementsByName('size');
    for(var i=0; i<selectedSize.length; i++){
        var size=selectedSize[i].checked;
        if(size === true) {
          selectedSize[i].addEventListener('change', addToCartClicked);   
        }
    }
});

Upvotes: 2

JS_INF
JS_INF

Reputation: 467

  • I don't know why you want to add event after the form is already submitted but anyway you can check for selected element and add your event
  • when the index of selected element come the size result will be true so you can add your event now
  • also you was added the event to size var who it true or false not for the input element
  • i changed your change event with click

Here's your code

var form= document.getElementsByClassName('product-form')[0]
form.addEventListener('submit', function(e){
    e.preventDefault();

    var selectedSize = document.getElementsByName('size');
    for(var i=0; i<selectedSize.length; i++) {
        var size= selectedSize[i].checked;
        if(size) { 
            selectedSize[i].addEventListener('click',addToCartClicked);
        } 
    }
});

function addToCartClicked() {
    document.body.append(this.value);
}

Upvotes: 1

Related Questions