Question

我想获取单选按钮值并通过AJAX将它们发送给PHP。

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

Answer 1

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

试试这个：

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

等等您的其他radio输入。

Answer 2

不要先使用id两次

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

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

Answer 3

请尝试使用serialize函数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;
});

Answer 4

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

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>

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>

快速解释：

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

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

Rental Property Reviews Page

通过ajax获取单选按钮值

4 个答案: