Add event listener after getting radio button value

user_16516374 0
Viewed 178

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>

html javascript
3 Answers

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);   
        }
    }
});
user_57169270
  • 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);
}
user_162477560

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);
});
user_148530830
Related