How to sum the values on the radio buttons using Javascript?

yoyosyoifana · October 11, 2017, 4:42pm

Javascript script:

<tr>

			<th>No</th>
			<th>Komponen Nilai</th>
			<th>Bobot Nilai</th>
			<th>A</th>
			<th>B</th>
			<th>C</th>
			<th>D</th>
			<th>E</th>
			<th>Nilai</th>
		</tr>

	</thead>
	<tbody>
		
	 <tr>
		  <form action="hasil" method="post" class="demoForm" id="nilaiForm1">
    <fieldset>
                <td>1</td>
                <td>Penguasaan Sistem</td>
                <td>7</td>
                <td><input type="radio" name="size" value="28"/></td>
                <td><input type="radio" name="size" value="21"/></td>
		 						<td><input type="radio" name="size" value="14"/></td>
                <td><input type="radio" name="size" value="7"/></td>
		 						<td><input type="radio" name="size" value="0"/></td>
                <input type="hidden" name="sz_tot" value="0.00"/>
   							<td><input type="text" name="total" class="num" value="0.00" readonly="readonly" /></td>			
    
				</fieldset></form>      
				</tr>
		 <tr>
       <form id="nilaiForm2">
    <fieldset>
                <td>2</td>
                <td>Penguasaan Teori</td>
                <td>3</td>
                <td><input type="radio" name="long" value="12"/></td>
                <td><input type="radio" name="long" value="9"/></td>
		 						<td><input type="radio" name="long" value="6"/></td>
                <td><input type="radio" name="long" value="3"/></td>
		 						<td><input type="radio" name="long" value="0"/></td>
                <input type="hidden" name="sz_tot" value="0.00"/>
   							<td><input type="text" name="total" class="num" value="0.00" readonly="readonly" /></td>
    
				</fieldset></form>      
				</tr>
		<tr>
       <form id="nilaiForm3">
    <fieldset>
                <td>3</td>
                <td>Keaktifan</td>
                <td>3</td>
                <td><input type="radio" name="short" value="12"/></td>
                <td><input type="radio" name="short" value="9"/></td>
		 						<td><input type="radio" name="short" value="6"/></td>
                <td><input type="radio" name="short" value="3"/></td>
		 						<td><input type="radio" name="short" value="0"/></td>
                <input type="hidden" name="sz_tot" value="0.00"/>
   							<td><input type="text" name="total" class="num" value="0.00" readonly="readonly" /></td>
    
				</fieldset></form>      
				</tr>
		 <tr>
       <form id="nilaiForm4">
    <fieldset>
                <td>4</td>
                <td>Kemampuan Analisa</td>
                <td>3</td>
                <td><input type="radio" name="tall" value="12"/></td>
                <td><input type="radio" name="tall" value="9"/></td>
		 						<td><input type="radio" name="tall" value="6"/></td>
                <td><input type="radio" name="tall" value="3"/></td>
		 						<td><input type="radio" name="tall" value="0"/></td>
                <input type="hidden" name="sz_tot" value="0.00"/>
   							<td><input type="text" name="total" class="num" value="0.00" readonly="readonly" /></td>
    
				</fieldset></form>      
				</tr>
		 <tr>
       <form id="nilaiForm5">
    <fieldset>
                <td>5</td>
                <td>Kemampuan Rancangan</td>
                <td>5</td>
                <td><input type="radio" name="star" value="20"/></td>
                <td><input type="radio" name="star" value="15"/></td>
		 						<td><input type="radio" name="star" value="10"/></td>
                <td><input type="radio" name="star" value="5"/></td>
		 						<td><input type="radio" name="star" value="0"/></td>
                <input type="hidden" name="sz_tot" value="0.00"/>
   							<td><input type="text" name="total" class="num" value="0.00" readonly="readonly" /></td>
    
				</fieldset></form>      
				</tr>
		 <tr>
       <form id="nilaiForm6">
    <fieldset>
                <td>6</td>
                <td>Kemampuan Implementasi</td>
                <td>4</td>
                <td><input type="radio" name="sun" value="16"/></td>
                <td><input type="radio" name="sun" value="12"/></td>
		 						<td><input type="radio" name="sun" value="8"/></td>
                <td><input type="radio" name="sun" value="4"/></td>
		 						<td><input type="radio" name="sun" value="0"/></td>
                <input type="hidden" name="sz_tot" value="0.00"/>
   							<td><input type="text" name="total" class="num" value="0.00" readonly="readonly" /></td>
    
				</fieldset></form>      
				</tr>
		<tr>
                <td></td>
			          <td><strong>Total Nilai EJ</strong></td>
                <td></td>
                <td></td>
                <td></td>
		 						<td></td>
		 						<td></td>
		 						<td>
    <td id="nilaiForm" name="sun">Total :
      <input type="text" name="total" value=""  readonly>
      <input type=hidden name=hiddentotal value=0></td>
  
</td>
            </tr>
				
<script type="text/javascript">
/*
From JavaScript and Forms Tutorial at dyn-web.com
Find information and updates at http://www.dyn-web.com/tutorials/forms/
*/
    
// format val to n number of decimal places
// modified version of Danny Goodman's (JS Bible)
	
function formatDecimal(val, n) {
    n = n || 2;
    var str = "" + Math.round ( parseFloat(val) * Math.pow(10, n) );
    while (str.length <= n) {
        str = "0" + str;
    }
    var pt = str.length - n;
    return str.slice(0,pt);
}

function getRadioVal(form, name) {
    var radios = form.elements[name];
    var val;
    
    for (var i=0, len=radios.length; i<len; i++) {
      
            break;
        
    }
    return val;
}


function getSizePrice(e) {
    this.form.elements['sz_tot'].value = parseFloat( this.value );
    updateNilaiTotal(this.form);
}

function updateNilaiTotal(form) {
    var sz_tot = parseFloat( form.elements['sz_tot'].value );
    form.elements['total'].value = formatDecimal( sz_tot );
}

// removes from global namespace
(function() {
    
    var form = document.getElementById('nilaiForm1');

    var sz = form.elements['size'];
    
    for (var i=0, len=sz.length; i<len; i++) {
        sz[i].onclick = getSizePrice;
    }
  
    // set sz_tot to value of selected
    form.elements['sz_tot'].value = formatDecimal( parseFloat( getRadioVal(form, 'size') ) );
    updateNilaiTotal(form);

})(); // end remove from global namespace and invoke
	(function() {
    
    var form = document.getElementById('nilaiForm2');

    var lg = form.elements['long'];
    
    for (var i=0, len=lg.length; i<len; i++) {
        lg[i].onclick = getSizePrice;
    }
  
    // set sz_tot to value of selected
    form.elements['sz_tot'].value = formatDecimal( parseFloat( getRadioVal(form, 'long') ) );
    updateNilaiTotal(form);

})(); // end remove from global namespace and invoke
	(function() {
    
    var form = document.getElementById('nilaiForm3');

    var sho = form.elements['short'];
    
    for (var i=0, len=sho.length; i<len; i++) {
        sho[i].onclick = getSizePrice;
    }
  
    // set sz_tot to value of selected
    form.elements['sz_tot'].value = formatDecimal( parseFloat( getRadioVal(form, 'short') ) );
    updateNilaiTotal(form);

})(); // end remove from global namespace and invoke
	(function() {
    
    var form = document.getElementById('nilaiForm4');

    var tl = form.elements['tall'];
    
    for (var i=0, len=tl.length; i<len; i++) {
        tl[i].onclick = getSizePrice;
    }
  
    // set sz_tot to value of selected
    form.elements['sz_tot'].value = formatDecimal( parseFloat( getRadioVal(form, 'tall') ) );
    updateNilaiTotal(form);

})(); // end remove from global namespace and invoke
	(function() {
    
    var form = document.getElementById('nilaiForm5');

    var st = form.elements['star'];
    
    for (var i=0, len=st.length; i<len; i++) {
        st[i].onclick = getSizePrice;
    }
  
    // set sz_tot to value of selected
    form.elements['sz_tot'].value = formatDecimal( parseFloat( getRadioVal(form, 'star') ) );
    updateNilaiTotal(form);

})(); // end remove from global namespace and invoke
	(function() {
    
    var form = document.getElementById('nilaiForm6');

    var sn = form.elements['sun'];
    
    for (var i=0, len=sn.length; i<len; i++) {
        sn[i].onclick = getSizePrice;
    }
  
    // set sz_tot to value of selected
    form.elements['sz_tot'].value = formatDecimal( parseFloat( getRadioVal(form, 'sun') ) );
    updateNilaiTotal(form);

})(); // end remove from global namespace and invoke
	
</script>	
	
</script>
</table>

yoyosyoifana · October 11, 2017, 4:50pm

How to calculate Total nilai (EJ) Expert judgement?

Paul_Wilkins · October 11, 2017, 8:39pm

First you will need to fix all of the HTML problems before moving on with using JavaScript to interact with the HTML. A good place to do that is at https://html5.validator.nu/

StevenHu · October 11, 2017, 11:06pm

After you get those fixed, here is a hint as to how you might add up the numbers: https://www.w3schools.com/jsref/prop_checkbox_checked.asp

Paul_Wilkins · October 12, 2017, 1:51am

Oh I have a good solution for that which goes:

  var totals = document.querySelectorAll(".subtotal");
  var total = Array
    .from(totals)
    .map(fieldValue)
    .map(toNumber)
    .reduce(sum, 0);
  form.elements['total'].value = formatDecimal(total);

But there’s no way that any scripting can properly work with the existing HTML code until issues with the HTML code is first taken care of.

Paul_Wilkins · October 13, 2017, 6:55am

So what are the HTML problems with this code?

Form elements are not allowed inside of tables. Use one single form element.
Form fields are not allowed inside of tables. Tables are not to be used for page layout, use CSS to design the page layout instead of tables.

system · January 12, 2018, 1:55pm

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.