單選按鈕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

你有一些額外parathenesis

此行$('#activeform .btn').on('click',(function()) { 1應改爲

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

也 「消息」：「未捕獲的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>