Getting radio button value by ajax - php

Question

I want to get radio button values and send them through AJAX to PHP.
My AJAX is running but is currently inserting a 0 in each row, so it's not picking up the value from the radio button. Any help would be appreciated.
$("#save_privacy").submit(function() {
var message_pri = $("#message_pri").val();
var follow_pri = $("#follow_pri").val();
var post_pri = $("#post_pri").val();
var check7 = $("#check7").val();
var s = {
"message_pri": message_pri,
"follow_pri": follow_pri,
"post_pri": post_pri,
"check": check7
}
$.ajax({
url: 'edit_check.php',
type: 'POST',
data: s,
beforeSend: function() {
$(".privacy_info").html("<img src=\"style/img/ajax/load2.gif\" alt=\"Loading ....\" />");
},
success: function(data) {
$(".privacy_info").html(data);
}
});
return false;
});
<form id="save_privacy">
<table align="center" width="70%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="padding: 5px;">
<b>Message Buttun: </b>
</td>
<td style="padding: 5px;">
<input type="radio" id="message_pri" name="message_pri" value="1" /> ON
<input type="radio" id="message_pri" name="message_pri" value="2" /> OFF
<input type="radio" id="message_pri" name="message_pri" value="3" /> FOLLOWERS
</td>
</tr>
<tr>
<td style="padding: 5px;">
<b>Follow Buttun: </b>
</td>
<td style="padding: 5px;">
<input type="radio" id="follow_pri" name="follow_pri" value="1" /> ON
<input type="radio" id="follow_pri" name="follow_pri" value="2" /> OFF
</td>
</tr>
<tr>
<td style="padding: 5px;">
<b>Who Can Post On Your Profile: </b>
</td>
<td style="padding: 5px;">
<input type="radio" id="post_pri" name="post_pri" value="1" /> Evry one
<input type="radio" id="post_pri" name="post_pri" value="2" /> Followers
</td>
</tr>
<tr>
<td colspan="2" style="padding: 5px;">
<input type="hidden" id="check7" value="save_privacy" name="check7" />
<input class="small color blue button" type="submit" value="Save" />
</td>
</tr>
</table>
<div class="privacy_info"></div>
</form>

Answer 1

Firstly you have a lot of duplicated id attributes, which is incorrect. Use classes instead, then use the :checked selector to get the specific instance of the radio which was selected.
Try this:
<input type="radio" class="message_pri" name="message_pri" value="1" /> ON
<input type="radio" class="message_pri" name="message_pri" value="2" /> OFF
<input type="radio" class="message_pri" name="message_pri" value="3" /> FOLLOWERS
var message_pri = $(".message_pri:checked").val();
And so on for your other radio inputs.

Answer 2

dont use id two time first thing
now for selected value of radio box use
$("input:radio[name=post_pri] :selected").val();

Answer 3

I would like to add that it is best to use the onChange event instead of the onClick event on the radio fieldset button call to the AJAX function. I am not sure why, but in this case it posts the correct value every time. When using the onClick event it sometimes posts a value different from the checked value. It is not much but it will definitely save somebody somewhere from a slight headache.
Example of the radion button group:
<fieldset **onChange="return rating_score()"** id="rating_selectors" data-
role="controlgroup" data-type="horizontal">
<input <?php if (!(strcmp($row_rs_new_rating['rating_value'],"1"))) {echo
"checked=\"checked\"";} ?> type="radio" name="rating" id="ratings_0"
value="1" />
<label title="1" for="ratings_0"></label>
<input <?php if (!(strcmp($row_rs_new_rating['rating_value'],"2"))) {echo
"checked=\"checked\"";} ?> type="radio" name="rating" id="ratings_1"
value="2" />
<label title="2" for="ratings_1"></label>
<input <?php if (!(strcmp($row_rs_new_rating['rating_value'],"3"))) {echo
"checked=\"checked\"";} ?> type="radio" name="rating" id="ratings_2"
value="3" />
<label title="3" for="ratings_2"></label>
<input <?php if (!(strcmp($row_rs_new_rating['rating_value'],"4"))) {echo
"checked=\"checked\"";} ?> type="radio" name="rating" id="ratings_3"
value="4" />
<label title="4" for="ratings_3"></label>
<input <?php if (!(strcmp($row_rs_new_rating['rating_value'],"5"))) {echo
"checked=\"checked\"";} ?> type="radio" name="rating" id="ratings_4"
value="5" />
<label title="5" for="ratings_4"></label>
</fieldset>
Example of the AJAX function:
<script type="text/javascript">
function rating_score ( txt_rating )
{ $.ajax( { type : "POST",
data: {"txt_captcha" : $("#txt_captcha").val(), "txt_rating" :
$("input[name=rating]:checked").val()},
url : "functions/reviewrater.php",
success : function (txt_rating)
{
$('#rating-container').load(document.URL + ' #rating-container');
$('span.stars').stars();
},
error : function ( xhr )
{ alert( "error" );
}
} );
return false;
}
</script>
Quick explanation:
The onChange event in the fieldset sends the value of the checked radio button to the AJAX function. I have added validation for the rest of the elements on the page, so the <?php if (!(strcmp($row_rs_new_rating['rating_value'],"3"))) {echo "checked=\"checked\"";} ?> compares the value stored in the rating session and retrieves the value again, so the user does not have to click on the rating again once they are warned that some of the other elements are empty. It looks much more complicated than it is, but all I actually wanted to say was to use the onChange instead of the onCLick event. :-)
You can visit this page to see the above code in action:
Rental Property Reviews Page

Answer 4

Try this use serialize function check serialize here
$("#save_privacy").submit(function(){
var serialise = $("#save_privacy").serialize();
$.ajax({
url:'edit_check.php',
type:'POST',
data:serialise,
beforeSend: function (){
$(".privacy_info") .html("<img src=\"style/img/ajax/load2.gif\" alt=\"Loading ....\" />");
},
success:function(data){
$(".privacy_info") .html(data);
}
});
return false;
});