CODEWITHSUNDEEP
javascriptjqueryajaxforms
gator
gator

Reputation: 3523

JQuery not able to read value from radio button

I have a form that has image-based radio buttons. I'm trying to make an AJAX call based on the selected value (either 10, 30, or 100), but despite selecting something other than 10, it tries to use 10 instead.

$(document).ready(function() {
    $('#prodadd').submit(function(e) {
        e.preventDefault();
        var $form = $(this);
        alert($('input[name="size"]').val());
        /* $.ajax({
            url: $form.attr('action'),
            method: $form.attr('method'),
            dataType: 'json',
            data: {
                size: $('input[name="size"]').val(),
                qty: $('input[name="qty"]').val()
            }
        }).done(function(result) {
            $('.cartmess').append(result.message);
        }); */
    });
});
label.prodbutt > input[type="radio"] {
    visibility: hidden;
    position: absolute;
}
label.prodbutt > input[type="radio"]:checked ~ .productbutton {
    visibility: hidden;
}
label.prodbutt > input[type="radio"]:checked ~ .productbuttons {
    visibility: visible;
}
label.prodbutt {
    position: relative;
}
.productbutton {
    height: 25px;
    visibility: visible;
    cursor: pointer;
}
.productbuttons {
    height: 25px;
    visibility: hidden;
    position: absolute;
    left: 0;
    cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="./common/addcart.php" id="prodadd" method="post">
	<strong>Bottle Size</strong><br/>
	<label class="prodbutt">
		<input type="radio" value="10" class="size" name="size" required="required"/>
		<img src="http://i.imgur.com/ODWmTVb.png" class="productbutton"/>
		<img src="http://i.imgur.com/EVx8z9D.png" class="productbuttons"/>
	</label>
	<label class="prodbutt">
		<input type="radio" class="size" value="30" name="size" required="required"/>
		<img src="http://i.imgur.com/lt2KGvA.png" class="productbutton"/>
		<img src="http://i.imgur.com/Fg2rnIU.png" class="productbuttons"/>
	</label> <label class="prodbutt">
		<input type="radio" class="size" value="100" name="size" required="required"/>
		<img src="http://i.imgur.com/1ynBmyJ.png" class="productbutton"/>
		<img src="http://i.imgur.com/YP6PWFP.png" class="productbuttons"/>
	</label> <br/><br/>
	Qty: <input type="text" size="2" maxlength="2" value="1" name="qty" required="required"/><br/><br/>
	<input type="submit" value="Add to Cart"/>
	<div class="cartmess"></div><br/><br/>
</form>

I've commented out the AJAX call I'm making and put an alert in its place to echo the value in size. Selecting 30, for example, will alert 10 instead of 30.

Why is this happening?

Upvotes: 0

Views: 133

Answers (2)

Domain
Domain

Reputation: 11808

you can get checked value of radio button in an array

function chk_check() { $('input[name="e_radio"]:checked').each(function() { chk.push($(this).val()); }) }

this function will get you an array "chk"

Upvotes: 1

Graham Charles
Graham Charles

Reputation: 9632

The selector $('input[name="size"]').val(); will return the first element that matches, not necessarily the first checked one. Your easiest solution is to use:

$('input[name="size"]:checked').val();

Ref: https://api.jquery.com/checked-selector/

Upvotes: 2

Related Questions