Question

尝试使用radiobuttons进行切换，发布执行相应PHP代码的表单，然后更改活动类。无论我尝试什么，我都无法让它发挥作用。这是HTML：

<form id="activeform" action="inc/togglevalid.php" method="post">
<input type="hidden" name="id" value="<? echo $events["id"];?>" />
<span class="btn-group" data-toggle="buttons">
<label class="btn btn-xs btn-default <? if ($events['valid']=='yes') echo "active";?>"><input class="radiobtn" type="radio" name="valid" id="yes" value="yes"><?=ucwords($phrase['yes']);?></label>
<label class="btn btn-xs btn-default <? if ($events['valid']=='no') echo "active";?>"><input class="radiobtn" type="radio" name="valid" id="no" value="no"><?=ucwords($phrase['no']);?></label>
</span>
</form>

这是尝试各种变化后的jQuery代码：

$('#activeform .btn').on('click',(function()) {
$.post($(this).parents('form').attr('action'),formInput, function(data){
$(this).sibling.removeClass('active');
$(this).addClass('active');
});
return false;
});

一旦我添加了此代码，它就会失败并且另一个脚本停止工作。任何帮助将不胜感激。

热情的问候约翰

Answer 1

你有一些额外的parathenesis

此行$('#activeform .btn').on('click',(function()) { 1应更改为

$('#activeform .btn').on('click',function() {

还＆＃34; message＆＃34;：＆＃34;未捕获的ReferenceError：未定义formInput＆＃34;，

＆＃13;

$('#activeform .btn').on('click', function() {
  //move these 2 lines to your success function
  $('#activeform btn').removeClass('active');
  $(this).addClass('active');
  ////////////////////////////
  var form = $(this).parents('form')
  var formInput = form.serialize();
  $.post(form.attr('action'), formInput, function(data) {
    //add the lines here

  });
  //return false;
})

＆＃13;

.active {
  /*color: blue;*/
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="container">
  <form id="activeform" action="inc/togglevalid.php" method="post">
    <input type="hidden" name="id" value="" />
    <span class="btn-group" data-toggle="buttons">
      <label class="btn btn-xs btn-default">
        <input class="radiobtn" type="radio" name="valid" id="yes" value="yes">yes</label>
      <label class="btn btn-xs btn-default">
        <input class="radiobtn" type="radio" name="valid" id="no" value="no">no</label>
    </span>
  </form>
</div>

＆＃13;

单选按钮jQuery切换问题

1 个答案: