For each div trigger radio button on change via juqery

I need to check which radio button list is clicked and for the clicked to send a jQuery ajax call, at the moment i have table id plan1, plan2, plan3, generated with php. each has a radio button list, with jQuery each how is it possible to make this happen?

This is what i have done,

$("input[name=\'Plan[packageId]\']:radio").change(function () { alert("changed triggered"); //calculateAmount(); });

to make it available for dynamic contents, i can do as below but its not practical since i dont know how many plans will be there.

$("#plan1 input[name=\'Plan[packageId]\']:radio").change(function () { alert("changed triggered"); //calculateAmount(); }); $("#plan2 input[name=\'Plan[packageId]\']:radio").change(function () { alert("changed triggered"); //calculateAmount(); }); $("#plan3 input[name=\'Plan[packageId]\']:radio").change(function () { alert("changed triggered"); //calculateAmount(); });

how can i make it dynamic and get current clicked radio button value please

here is the JS fiddle

<table id='plan1'> <tr> <td style="vertical-align: top;"> <input type="radio" value="1" name="Plan[packageId]"> <lable>3 Games</lable> <br> <input type="radio" value="2" name="Plan[packageId]" checked> <lable>5 Games</lable> <br> <input type="radio" value="3" name="Plan[packageId]"> <lable>10 Games</lable> <br> </td> </tr> </table> <br> <table id='plan2'> <tr> <td style="vertical-align: top;"> <input type="radio" value="1" name="Plan[packageId]"> <lable>2 Games</lable <br> <input type="radio" value="2" name="Plan[packageId]" checked> <lable>4 Games</lable> <br> <input type="radio" value="3" name="Plan[packageId]"> <lable>9 Games</lable> <br> </td> </tr> </table> <br> <table id='plan3'> <tr> <td style="vertical-align: top;"> <input type="radio" value="1" name="Plan[packageId]"> <lable>4 Games</lable> <br> <input type="radio" value="2" name="Plan[packageId]" checked> <lable>6 Games</lable> <br> <input type="radio" value="3" name="Plan[packageId]"> <lable>11 Games</lable> <br> </td> </tr> </table>

var selectedPlan = $("input[name='Plan[packageId]']:checked").val(); alert(selectedPlan);

<table id='plan1'> <tr> <td style="vertical-align: top;"> <input type="radio" value="1" name="Plan[packageId]"> <lable>3 Games</lable> <br> <input type="radio" value="2" name="Plan[packageId]" checked> <lable>5 Games</lable> <br> <input type="radio" value="3" name="Plan[packageId]"> <lable>10 Games</lable> <br> </td> </tr> </table> <br> <table id='plan2'> <tr> <td style="vertical-align: top;"> <input type="radio" value="1" name="Plan[packageId]"> <lable>2 Games</lable <br> <input type="radio" value="2" name="Plan[packageId]" checked> <lable>4 Games</lable> <br> <input type="radio" value="3" name="Plan[packageId]"> <lable>9 Games</lable> <br> </td> </tr> </table> <br> <table id='plan3'> <tr> <td style="vertical-align: top;"> <input type="radio" value="1" name="Plan[packageId]"> <lable>4 Games</lable> <br> <input type="radio" value="2" name="Plan[packageId]" checked> <lable>6 Games</lable> <br> <input type="radio" value="3" name="Plan[packageId]"> <lable>11 Games</lable> <br> </td> </tr> </table>

-------------Problems Reply------------

You can bind change event using .on() as elements created are dynamic.Use start with selector to choose table having id start with plan (like plan1, plan2...) and then input with name attribute as shown below

$(document).on('change','table[id^=plan] input[name="Plan[packageId]"]', function(){
//get clicked radio button value
alert($(this).val());
//you can find parent table id or any relevant element
var table = $(this).closest('table').attr('id');
alert(table);
});

JSFiddle Demo

Here is the working demo:

$(document.body).on('click','.radioPanle', function(){
alert($(this).val());
});

http://jsfiddle.net/2nb32s47/7/

I have applied common class name to each radio button for ease.

You will get value of radio button and pass it to ajax call.

Category:javascript Views:1 Time:2018-07-11

Related post

  • ASP.NET not seeing Radio Button value change 2008-09-24

    I have a form with some radio buttons that are disabled by default. When a value gets entered into a text box, the radio buttons are enabled via javascript. The user then selects one of the radio buttons and clicks on a submit button which posts back

  • Multiple Radio Buttons that change Submit onclick location.href-possible syntax error 2012-04-10

    I'm using http://www.somacon.com/p143.php javascript for radio buttons to change the submit onclick location.href depending on which radio button is selected. But I think I may have an issue with my syntax as the button isn't working properly (I don'

  • MFC: CButton highlighting for a group of radio buttons 2009-06-18

    I know that I can create an integer variable for a group of radio buttons, set it to an integer, and then call UpdateData(FALSE) to make the window highlight the appropriate radio button control. However, I would like to perhaps use a CButton control

  • setting Radio Button enabled/disabled via CSS 2008-09-25

    Is there a way to make a Radio Button enabled/disabled (not checked/unchecked) via CSS? I've need to toggle some radio buttons on the client so that the values can be read on the server, but setting the 'enabled' property to 'false' then changing thi

  • Radio button group - change events for buttons become deselected? 2010-07-26

    Let's say I have a group of two radio buttons: <input type="radio" name="radioButtonGroup" value="button1" checked="true"/> <input type="radio" name="radioButtonGroup" value="button2"/> It seems that clicking the second button triggers an

  • Radio button's change event doesn't fire in WebKit when using keyboard for input 2010-04-29

    Demo: http://jsfiddle.net/55ucw/1/ In any browser other than Safari or Chrome, I can tab into a set of radio buttons and select one using the arrow keys and the change event will fire. In Safari or Chrome, I can tab into a radio group, and select a r

  • JavaScript\JQuery - identifying if radio button value changed by click 2009-09-28

    I have a page that displays a list of records. The user can select the record status using radio buttons, e.g.: <div id="record_653"> <label><input type="radio" name="status_653" value="new" checked/>new</label> <label>

  • Toggle DIV when Radio Buttons are checked 2011-04-12

    I am trying to make a DIV toggle visible and not visible when a group of radio buttons say yes or no. For example I have a a list of stores in a DIV but I only want that list of stores visible when the radio button is checked as yes. Edit Script View

  • show and hide divs with radio buttons inside the hidden div 2009-04-06

    Basically I have three images (call them img1, img2, img3) with three menus associated with each. (menu1, menu2, menu3) When a user clicks img1, menu1 should pop up with three radio button selections (rad1, rad2, rad3). Say the user clicks rad2, menu

  • jQuery show hide divs on radio buttons 2010-03-15

    I have got a group of radio buttons that when clicked need to display a corresponding unordered list. I have got as far as showing the correct list according to which radio button is clicked but cannot figure out how to hide the other lists that need

  • WPF/C# - example for programmatically create & use Radio Buttons 2010-09-02

    Can someone point to an example of how to programmatically create & use Radio Buttons in C# WPF? So basically how to (a) create them programmatically, and (b) how to catch triggers when the value changes, (c) how to pick up results at a given tim

  • Creating panels with radio buttons that change text using arrays 2010-11-09

    I am currently stumped on how to use arrays to complete an assignment. I've looked through the forums and used google with little luck. I would really appreciate any advice that someone can spare. Thank you very much!: Create the arrays for my 2 sets

  • module for rating images with radio buttons, joomla/php 2010-11-23

    The form is supposed to show an image, let someone rate it then save the info. However, when I click the submit button nothing happens. if I change the rating to a text box where the user enters a number it works perfectly, with radio buttons it stop

  • jQuery toggle div with radio buttons 2011-01-12

    Simple html & jQuery <label><input id="rdb1" type="radio" name="toggler" value="1" />Money</label> <label><input id="rdb2" type="radio" name="toggler" value="2" />Interest</label> <div id="blk-1" style="disp

  • jQuery div class under div select radio button value 2011-09-02

    <div class="outer"> <div class="inner"> <input name="aa" value="aa" type="radio"/> <input name="aa" value="bb" type="radio"/> </div> </div> How do I get the select radio value in jQuery. I am using this $('.outer.i

  • Show single div when radio button is selected 2011-11-15

    Need a simple answer to this as a lot of the ones i have found have been too complex for what I need. id like some jquery to show a div depending on a radio button selection. So if value 0 is selected, display the div? Many thanks! <p class="form-

  • Jquery/Javascript radio button on change 2012-02-01

    I am using the following code to make a certain section of my form show or hide depending on the selection of the radio buttons. However, if I leave the page and come back to it (I leave the page to fill out other sections of the form that are then p

  • When radio button selection changes do not cause refresh? 2010-04-28

    When the selection of the radio buttons change I would like to show/hide the panel in the next table cell. I have it hiding and showing fine but each time it causes the page to refresh to the top. Is their a way to stop that refresh? I would like to

  • How can I set the width of radio buttons to change with regards to screen size? (android) 2010-11-23

    I have these radio buttons and they need android:width="X" and android:height"X" however, I do not know how to set these properties so that they adapt to a different screen size. Here is the code I'm using for my buttons: <RadioGroup android:layou

  • Making a div into a button that changes color when I press it 2011-04-16

    I would like to make a div into a button with a background that changes color when I mouse over and another color when I press it. What I want to do is have the button behave like a link that takes me to another page when I press it. Can you tell me

  • ASP.NET 4.0 Radio button checked changed event fires only once 2011-11-08

    I have two radio buttons both set as async triggers for an update panel and problem is that first time one is clicked the CheckedChanged event fires but then no matter which radio button is clicked the event never fires again. Markup: <asp:RadioBu

  • Call custom functions onclicking the radio buttons with changing the style(Background image OnClick function) 2011-11-25

    In my application I need to style the radio buttons with images. To do that I need to implement 'OnClick' functionality for setting the background image. I am using following code snippet to do this. element.onclick = function() { if(this.checked) {

  • jQuery - Radio button state change 2011-11-29

    I've been digging into both .attr() and .prop(), but having quite a bit of trouble getting a radio select option to work. The basic premise is I have two radio buttons, one is selected by default. When a different radio button is selected, it should

  • add a number for each div 2012-01-08

    Hi I'd like some advice with what I'm trying to achieve. I currently have this: <div class="thumbnail"> <img src="thumbnail_1.jpg" /> </div> For each .thumbnail I would like to prepend an index number with a span. Achieving this:

Copyright (C) dskims.com, All Rights Reserved.

processed in 0.107 (s). 11 q(s)