0

I want to perform something with the help of jquery when a radio button is selected.

Suppose the page has n number of radio button groups

<input type="radio" name="group1" value="1" onSelect="jquery ajax" /><br>
<input type="radio" name="group1" value="2" onSelect="jquery ajax" /><br>


<input type="radio" name="group2" value="1" onSelect="jquery ajax"/><br>
<input type="radio" name="group2" value="2" onSelect="jquery ajax" /><br>

and so on ...

Each onSelect calls the same js function(suppose, jsForAjaxCall(args)) which initiates the jquery ajax call.

When ever a radio button is selected or deselected I want have a jquery ajax call. I showed it for selection.

1) what is the way to have such a javascript call for unselecting a radio button? is it onUnselect? if yes, will it be compatible with all browsers? i did not find the answer.

2)Suppose user selects one after another radio buttons (one button from a group) and the corresponding ajax calls are made.

But I want the ajax calls to be completed one after another. Ajax call 1 completes, call2 begins, call2 completes , call3 begins and so on.

But this might not happen in the situation i described because of the asynchronous nature of ajax.

So I would need to have the succeeding calls stay in the callback function of the preceding jquery ajax calls. I found no way to do it

How can I achieve my goal?

my scripting language is php

EDIT:

suppose the user clicks n radio buttons one after another (one button from a group). For each button selection, a synchronous ajax call is made to make a 2-dimensional session array hold the values of the selected radio buttons so that after the page refresh , those values can be used to retain the selection of the radio buttons. The html radio button code written in the first place should be changed in that case.

My question is:

The user finishes clicking n buttons(i.e n=10) and then s/he refreshes the page. 5 synchronous ajax calls are made and the remaining r yet to be made. Then after page refresh, will the values of the last 5 radio button selections be retained? If not how to retain those in the said situation.

Istiaque Ahmed
  • 6,072
  • 24
  • 75
  • 141
  • 1
    1) you can call up radiobutton.checked = false. 2) http://stackoverflow.com/questions/133310/how-can-i-get-jquery-to-perform-a-synchronous-rather-than-asynchronous-ajax-re – Matt Nov 13 '11 at 10:48
  • 3) You can set query ajax calls to synchrony etc. Or search this forum for ajax queue – Dennis Hunink Nov 13 '11 at 10:53
  • There not retained; you will have to make all the calls again. – Dennis Hunink Nov 15 '11 at 18:46
  • @Dennis Hunink, that is about an online php MCQ (multiple choice question)exam script.. i think, the user should not be instructed to select the radio buttons again after the page refresh. What is the solution then? – Istiaque Ahmed Nov 16 '11 at 06:38

2 Answers2

0
$(function(){
    $("input[name*='group1']").click(function(){
        alert("Clicked");
    });

});

Try this and don't forget to call the jquery file in the head section.

Bo Persson
  • 90,663
  • 31
  • 146
  • 203
nyfer
  • 95
  • 2
  • 3
  • 11
0

Building on nyfer's answer, you could chain the ajax-calls in the success-callback of $.ajax:

$("input[name*='group1']").click(function(){
    $.ajax({

    success: function(){
        $.ajax({
            success:function(){
                $.ajax({});
            }
        });
    }
    });
});

It's sort of messy code, so I'd probably put the success-callbacks in named functions as opposed to anonymous functions as displayed above. Now, if you want one ajax call per button clicked as hinted in the question, I would implement a queue to enqueue and dequeue ajax calls. Enqueue items in the click event, and revisit the queue in the success-callback of every ajax-call to see if there are items left to process.

nillls
  • 625
  • 4
  • 11