通过ajax获取单选按钮值

I want to get radio button values and send them through AJAX to PHP.

我想获取单选按钮值并通过AJAX将它们发送到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.

我的AJAX正在运行，但是当前每行都插入一个0，所以它没有从单选按钮中获取值。任何帮助，将不胜感激。

$("#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>

4 个解决方案

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

首先，你有很多重复的id属性，这是不正确的。改为使用类，然后使用：checked选择器来获取所选的无线电的特定实例。

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.

等等你的其他无线电输入。

#2

dont use id two time first thing

首先不要使用id两次

now for selected value of radio box use

现在用于选择无线电盒使用价值

$("input:radio[name=post_pri] :selected").val();

#3

Try this use serialize function check serialize here

试试这个使用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;
});

#4

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.

我想补充一点，最好在无线电字段集按钮调用AJAX函数时使用onChange事件而不是onClick事件。我不知道为什么，但在这种情况下，它每次都会发布正确的值。使用onClick事件时，它有时会发布与已检查值不同的值。它并不多，但它肯定会让某些人从轻微的头痛中拯救出来。

Example of the radion button group:

radion按钮组的示例：

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

AJAX函数示例：

<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. :-)

fieldset中的onChange事件将选中的单选按钮的值发送到AJAX函数。我已经为页面上的其他元素添加了验证，所以<？php if（！（strcmp（$ row_rs_new_rating ['rating_value']，“3”）））{echo“checked = \”checked \“”比较存储在评级会话中的值并再次检索该值，因此一旦警告某些其他元素为空，用户就不必再次点击评级。它看起来要复杂得多，但我真正想说的是使用onChange而不是onCLick事件。 :-)

You can visit this page to see the above code in action:

您可以访问此页面以查看上面的代码：

Rental Property Reviews Page

出租物业评论页面