kukutalampakan
Reputation: 11
Sum the value of radio buttons and print it to the respected textbox using JavaScript or jQuery
I want to sum the values of radio buttons, and print that sum to the respected textbox, using JavaScript or jQuery.
The class name should be the results of each radio button
I only achieved a sum in one respected textbox.
function calcscore() {
var score = 0;
$(".rialistic:checked").each(function() {
score += parseInt($(this).val() 10);
});
$("input[name=sum]").val(score)
}
$().ready(function() {
$(".rialistic").change(function() {
calcscore()
});
}); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- The class name should be the results of each radio button -->
<body>
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">#
</th>
<th scope="col">Questions
</th>
<th scope="col">Yes
</th>
<th scope="col">No
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>
<?php echo $question1?>
</td>
<td>
<div class="radio"><label><input class="rialistic" type="radio" value = "1" name="optradio1" id="value1" ></label></div>
</td>
<td>
<div class="radio"><label><input class="rialistic" type="radio" value = "0" name="optradio1" id="no"></label></div>
</td>
</tr>
<tr>
<th scope="row">2</th>
<td>
<?php echo $question2?>
</td>
<td>
<div class="radio"><label><input class="investigative" type="radio" value = "1" name="optradio2" id="value2" ></label></div>
</td>
<td>
<div class="radio"><label><input class="investigative" type="radio" value = "0" name="optradio2" id="no"></label></div>
</td>
</tr>
<tr>
<th scope="row">3</th>
<td>
<?php echo $question3?>
</td>
<td>
<div class="radio"><label><input class="artistic" type="radio" value = "1" name="optradio3" id="value3" ></label></div>
</td>
<td>
<div class="radio"><label><input class="artistic" type="radio" value = "no" name="optradio3" id="no"></label></div>
</td>
</tr>
<tr>
<th scope="row">4</th>
<td>
<?php echo $question4?>
</td>
<td>
<div class="radio"><label><input class="social" type="radio" value = "1" name="optradio4" id="value4" ></label></div>
</td>
<td>
<div class="radio"><label><input class="social" type="radio" value = "no" name="optradio4" id="no"></label></div>
</td>
</tr>
<tr>
<th scope="row">5</th>
<td>
<?php echo $question5?>
</td>
<td>
<div class="radio"><label><input class="conventional" type="radio" value = "1" name="optradio5" id="value5" ></label></div>
</td>
<td>
<div class="radio"><label><input class="conventional" type="radio" value = "no" name="optradio5" id="no"></label></div>
</td>
</tr>
<tr>
<th scope="row">6</th>
<td>
<?php echo $question6?>
</td>
<td>
<div class="radio"><label><input class="conventional" type="radio" value = "1" name="optradio6" id="value6" ></label></div>
</td>
<td>
<div class="radio"><label><input class="Conventional" type="radio" value = "0" name="optradio6" id="no"></label></div>
</td>
</tr>
<tr>
<th scope="row">7</th>
<td>
<?php echo $question7?>
</td>
<td>
<div class="radio"><label><input class="rialistic" type="radio" value = "1" name="optradio7" id="value7" ></label></div>
</td>
<td>
<div class="radio"><label><input class="rialistic" type="radio" value = "no" name="optradio7" id="no"></label></div>
</td>
</tr>
<tr>
<th scope="row">8</th>
<td>
<?php echo $question8?>
</td>
<td>
<div class="radio"><label><input class="artistic" type="radio" value = "1" name="optradio8" id="value8" ></label></div>
</td>
<td>
<div class="radio"><label><input class="artistic" type="radio" value = "no" name="optradio8" id="no"></label></div>
</td>
</tr>
<tr>
<th scope="row">9</th>
<td>
<?php echo $question9?>
</td>
<td>
<div class="radio"><label><input class="conventional" type="radio" value = "1" name="optradio9" id="value9" ></label></div>
</td>
<td>
<div class="radio"><label><input class="conventional" type="radio" value = "no" name="optradio9" id="no"></label></div>
</td>
</tr>
<tr>
<th scope="row">10</th>
<td>
<?php echo $question10?>
</td>
<td>
<div class="radio"><label><input class="enterprising" type="radio" value = "1" name="optradio10" id="value10" ></label></div>
</td>
<td>
<div class="radio"><label><input class="enterprising" type="radio" value = "no" name="optradio10" id="no"></label></div>
</td>
</tr>
<tr>
<th scope="row">11</th>
<td>
<?php echo $question11?>
</td>
<td>
<div class="radio"><label><input class="investigative" type="radio" value = "1" name="optradio11" id="value11" ></label></div>
</td>
<td>
<div class="radio"><label><input class="investigative" type="radio" value = "0" name="optradio11" id="no"></label></div>
</td>
</tr>
<tr>
<th scope="row">12</th>
<td>
<?php echo $question12?>
</td>
<td>
<div class="radio"><label><input class="social" type="radio" value = "1" name="optradio12" id="value12" ></label></div>
</td>
<td>
<div class="radio"><label><input class="social" type="radio" value = "no" name="optradio12" id="no"></label></div>
</td>
</tr>
<tr>
<th scope="row">13</th>
<td>
<?php echo $question13?>
</td>
<td>
<div class="radio"><label><input class="social" type="radio" value = "1" name="optradio13" id="value13" ></label></div>
</td>
<td>
<div class="radio"><label><input class="social" type="radio" value = "no" name="optradio13" id="no"></label></div>
</td>
</tr>
<tr>
<th scope="row">14</th>
<td>
<?php echo $question14?>
</td>
<td>
<div class="radio"><label><input class="rialistic" type="radio" value = "1" name="optradio14" ></label></div>
</td>
<td>
<div class="radio">
<label>
<input class="rialistic" type="radio" value = "0" name="optradio14" >
</label>
</div>
</td>
</tr>
</tbody>
</table>
Rialistic:
<input type="text" name="sum" />
<br/>
Investigative:
<input type="text" name="sum2" />
<br/>
Artistic:
<input type="text" name="sum3" />
<br/>
Social:
<input type="text" name="sum4" />
<br/>
Enterprising:
<input type="text" name="sum5" />
<br/>
Conventional:
<input type="text" name="sum6" />
<br/>
</body>Upvotes: 1
Views: 88
Answers (1)
Sarfraaz talat
Reputation: 635
I just removed 10 from your code, and it works just fine.
Just so you know, you'll have to write an onChange function for each different class you want.
function calcscore(){
var score = 0;
$(".rialistic:checked").each(function(){
score += parseInt($(this).val());
});
console.log(score);
$("input[name=sum]").val(score)
}
$().ready(function(){
$(".rialistic").change(function(){
calcscore()
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">Questions</th>
<th scope="col">Yes</th>
<th scope="col">No</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td><?php echo $question1?></td>
<td><div class="radio"><label><input class="rialistic" type="radio" value = "1" name="optradio1" id="value1" ></label></div></td>
<td><div class="radio"><label><input class="rialistic" type="radio" value = "0" name="optradio1" id="no"></label></div></td>
</tr>
<tr>
<th scope="row">2</th>
<td><?php echo $question2?></td>
<td><div class="radio"><label><input class="investigative" type="radio" value = "1" name="optradio2" id="value2" ></label></div></td>
<td><div class="radio"><label><input class="investigative" type="radio" value = "0" name="optradio2" id="no"></label></div></td>
</tr>
<tr>
<th scope="row">3</th>
<td><?php echo $question3?></td>
<td><div class="radio"><label><input class="artistic" type="radio" value = "1" name="optradio3" id="value3" ></label></div></td>
<td><div class="radio"><label><input class="artistic" type="radio" value = "no" name="optradio3" id="no"></label></div></td>
</tr>
<tr>
<th scope="row">4</th>
<td><?php echo $question4?></td>
<td><div class="radio"><label><input class="social" type="radio" value = "1" name="optradio4" id="value4" ></label></div></td>
<td><div class="radio"><label><input class="social" type="radio" value = "no" name="optradio4" id="no"></label></div></td>
</tr>
<tr>
<th scope="row">5</th>
<td><?php echo $question5?></td>
<td><div class="radio"><label><input class="conventional" type="radio" value = "1" name="optradio5" id="value5" ></label></div></td>
<td><div class="radio"><label><input class="conventional" type="radio" value = "no" name="optradio5" id="no"></label></div></td>
</tr>
<tr>
<th scope="row">6</th>
<td><?php echo $question6?></td>
<td><div class="radio"><label><input class="conventional" type="radio" value = "1" name="optradio6" id="value6" ></label></div></td>
<td><div class="radio"><label><input class="Conventional" type="radio" value = "0" name="optradio6" id="no"></label></div></td>
</tr>
<tr>
<th scope="row">7</th>
<td><?php echo $question7?></td>
<td><div class="radio"><label><input class="rialistic" type="radio" value = "1" name="optradio7" id="value7" ></label></div></td>
<td><div class="radio"><label><input class="rialistic" type="radio" value = "no" name="optradio7" id="no"></label></div></td>
</tr>
<tr>
<th scope="row">8</th>
<td><?php echo $question8?></td>
<td><div class="radio"><label><input class="artistic" type="radio" value = "1" name="optradio8" id="value8" ></label></div></td>
<td><div class="radio"><label><input class="artistic" type="radio" value = "no" name="optradio8" id="no"></label></div></td>
</tr>
<tr>
<th scope="row">9</th>
<td><?php echo $question9?></td>
<td><div class="radio"><label><input class="conventional" type="radio" value = "1" name="optradio9" id="value9" ></label></div></td>
<td><div class="radio"><label><input class="conventional" type="radio" value = "no" name="optradio9" id="no"></label></div></td>
</tr>
<tr>
<th scope="row">10</th>
<td><?php echo $question10?></td>
<td><div class="radio"><label><input class="enterprising" type="radio" value = "1" name="optradio10" id="value10" ></label></div></td>
<td><div class="radio"><label><input class="enterprising" type="radio" value = "no" name="optradio10" id="no"></label></div></td>
</tr>
<tr>
<th scope="row">11</th>
<td><?php echo $question11?></td>
<td><div class="radio"><label><input class="investigative" type="radio" value = "1" name="optradio11" id="value11" ></label></div></td>
<td><div class="radio"><label><input class="investigative" type="radio" value = "0" name="optradio11" id="no"></label></div></td>
</tr>
<tr>
<th scope="row">12</th>
<td><?php echo $question12?></td>
<td><div class="radio"><label><input class="social" type="radio" value = "1" name="optradio12" id="value12" ></label></div></td>
<td><div class="radio"><label><input class="social" type="radio" value = "no" name="optradio12" id="no"></label></div></td>
</tr>
<tr>
<th scope="row">13</th>
<td><?php echo $question13?></td>
<td><div class="radio"><label><input class="social" type="radio" value = "1" name="optradio13" id="value13" ></label></div></td>
<td><div class="radio"><label><input class="social" type="radio" value = "no" name="optradio13" id="no"></label></div></td>
</tr>
<tr>
<th scope="row">14</th>
<td><?php echo $question14?></td>
<td><div class="radio"><label><input class="rialistic" type="radio" value = "1" name="optradio14" ></label></div></td>
<td><div class="radio"><label><input class="rialistic" type="radio" value = "0" name="optradio14" ></label></div></td>
</tr>
</tbody>
</table>
Rialistic:
<input type="text" name="sum"/>
<br/>
Investigative:
<input type="text" name="sum2"/>
<br/>
Artistic:
<input type="text" name="sum3"/>
<br/>
Social:
<input type="text" name="sum4"/>
<br/>
Enterprising:
<input type="text" name="sum5"/>
<br/>
Conventional:
<input type="text" name="sum6"/>
<br/>
</body>Upvotes: 1
Related Questions
- How to sum radio button values using either Javascript or jQuery?
- Sum of Radio button values printed to the user
- How to sum and subtract total of each radio values using either Javascript or jQuery
- jQuery sum radio button value and text input value?
- How to sum value of radio button and checkbox in jquery
- How to sum the values on the radio buttons using Javascript?
- How might I calculate the sum of radio button values using jQuery?
- sum value radiobuttons javascript
- values from radio buttons sum function
- Calculate sum for two values per radio button for a group of buttons with JS