Question

0

175

Vistas

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>

about 4 years ago · Juan Pablo Isaza

3 Respuestas

Responde la pregunta

0

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

about 4 years ago · Juan Pablo Isaza Denunciar

0

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

about 4 years ago · Juan Pablo Isaza Denunciar

0

Responde la pregunta

Encuentra empleos remotos

Accepted Answer · 2022-08-31T09:32:29.595Z

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

0

175

Add event listener after getting radio button value

3 Respuestas

0

0

0

Encuentra empleos remotos

Andres GPT