Question

0

176

Visualizações

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 Respostas

Responde à pergunta

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 Relatório

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 Relatório

0

Responde à pergunta

Encontrar trabalhos 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

176

Add event listener after getting radio button value

3 Respostas

0

0

0

Encontrar trabalhos remotos

Andres GPT