Getting radio button value by ajax

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

Answer 1

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 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

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 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;
});