Optionsfeld jQuery toggle issue

Question

Versuchen Sie, Radiobuttons umzuschalten, geben Sie das Formular ein, das den entsprechenden PHP-Code ausführt, und ändern Sie die aktive Klasse. Egal was ich versuchte, ich kann es nicht zur Arbeit bringen. Hier ist der 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> 

Und hier ist die jQuery-Code sofar nach alle Arten von Variationen versuchen:

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

Es wird einfach nicht funktionieren und ein anderes Skript nicht mehr funktioniert, wenn füge ich diesen Code. Jede Hilfe würde sehr geschätzt werden.

warme Grüße John

Answer 1

Sie haben einige zusätzliche parathenesis

diese Linie $('#activeform .btn').on('click',(function()) { 1 sollte

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

auch "message" geändert werden: „Nicht abgefangene Reference: formInput ist nicht definiert ",

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