ラジオボタンjQueryの切り替えの問題

Question

ラジオボタンを切り替えて、適切な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のコードは、バリエーションのすべての種類を試した後SOFARです：

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

あなたは$('#activeform .btn').on('click',(function()) { 1は

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

も ​​"メッセージ" に変更する必要がありますいくつかの余分なparathenesis

にこのラインを持っている：「キャッチされないにReferenceError：formInputではありません定義済み "、

$('#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; 
 
})

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

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