AJAX Radio Buttons with jQuery

Question

I need help to get submission of an RSVP with radio buttons like this:

Attending: <input type="radio" />
Maybe Attending: <input type="radio" />
Not Attending: <input type="radio" />

Whenever someone RSVP the event, it should ratio the input to the selected (so just one radio button can only be selected), so when one option is selected, it should do an AJAX request with the $.ajax function.

I did this:

Attending: <input type="radio" onclick="rsvpEvent(3, 1);" />
Maybe Attending: <input type="radio" onclick="rsvpEvent(2, 1);" />
Not Attending: <input type="radio" onclick="rsvpEvent(1, 1);" />

With jQuery:

function rsvpEvent(rsvp, id)
{   
    $.ajax({
       type: "GET",
       url: "http://localhost:8888/update/test.php",
       data: "rsvp=" + rsvp + "id=" + id,
       success: function()
       {
         alert('rsvp: ' + rsvp + ' id: ' + id);
       },
       error: function()
       {
         alert('rsvp: ' + rsvp + ' id: ' + id);
       }
     });
}

That doesn't work at all... what is the problem?

Answer 1

First off I think it should be a post event and not a get and the data you are sending is a single string when the code behind method will be expecting two parameters.

       function GetDate() {
            $.ajax({
                type: "POST",
                url: "default.aspx/GetDate",
                data: "{myParam:'" + document.getElementById("txtParam").value + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(msg) {
                    $.each(msg, function(i, item) {
                        $("#dialog").fadeOut("fast", function() {
                            $("#dialog").html(item);
                            $("#dialog").fadeIn(300);
                        });

                    });
                }
            });
        }

Answer 2

There's a couple things I'd change

• I'd make it an actual form, rather than just radio buttons, so that someone without Javascript enabled can still attend your wonderful parties.
• Make the radio buttons all have the same name='whatever' so that you can only select one at a time
• If you use a form you can use serialize() from jQuery to fix the error with your data (currently you'd be sending rsvp=3id=1, which I doubt your function expects).

Answer 3

Your specific problem is the value of URL, it should be only:

url: "update/test.php",

Ajax requests to third party websites are normally not possible because of security restrictions, so you can't use http:// on url value.

In data don't forget & before id

+ “&id=” + id