apa1 apa1 - 3 years ago 94
HTML Question

Html and Java script

I am working on a new security assessment webpage in which I am using HTML and Java Script. For some reason, the code is not working properly and not getting the desired results. The way the page supposed to work is by having the user answer Yes or No questions, and when the user is done they can click submit. Then the page would display the number of questions answered yes, however when I click submit the only result I get is 0.

Any help would be appreciated it.

Thanks,



<script>
function calcscore()
{
var score = 0;
$(".calc:checked").each(function()
{
score+=parseInt($(this).val(),10);
} );
$("input[name=sum]").val(score)
}
$().ready(function()
{
$(".calc").change(function()
{
calcscore()

} );
} );


window.sumInputs = function() {
var inputs = document.getElementsByTagName('calc'),
result = document.getElementById('total'),
sum = 0;

for(var i=0; i<inputs.length; i++) {
var ip = inputs[i];

if (ip.class && ip.class.indexOf("total") < 0) {
sum += parseInt(ip.value) || 0;
}

}

result.value = sum;
}


</script>

<!DOCTYPE html>
<html>
<body>

<h1>Security Assessment </h1>

<table>
<tr>
<th>PERSONNEL SECURITY</th>

</tr>
<tr>
<td>1. Does your staff wear ID badges?

<form>
Yes
<input class="calc" type="radio" name="radio1" value="1" />
No
<input class="calc" type="radio" name="radio1" value="0" /><br />

</form>


</td>


</tr>
<tr>
<td>2. Is a current picture part of the ID badge?


<form>
Yes
<input class="calc" type="radio" name="radio2" value="1" />
No
<input class="calc" type="radio" name="radio2" value="0" /><br />

</form>


</td>


</tr>
<tr>
<td>3. Are authorized access levels and type (employee, contractor, visitor) identified
on the Badge?

<form>
Yes
<input class="calc" type="radio" name="radio3" value="1" />
No
<input class="calc" type="radio" name="radio3" value="0" /><br />

</form>

</td>

</tr>


</table>

Total : <input type="text" name="total" id="total"/>


<a href="javascript:sumInputs()"><input type="Submit" value="Submit"</a>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

</body>
</html>




Dij Dij
Answer Source

You need to fix a few things in code. Don't wrap submit input inside an . Then if you want to select using class 'calc' you need to use '.calc'. Then you can call sumInputs() from onclick event of submit button. To change value in text input you can use $('#total').val(sum)

    function calcscore()
{
    var score = 0;
    $(".calc:checked").each(function()
{
        score+=parseInt($(this).val(),10);
}    );
    $("input[name=sum]").val(score)
}
	$().ready(function()
{
    $(".calc").change(function()
{
        calcscore()

}    );
}    );


   window.sumInputs = function() {
    var inputs = $('.calc:checked'),
        result = document.getElementById('total'),
        sum = 0;            

    for(var i=0; i<inputs.length; i++) {
        sum += parseInt(inputs[i].value);
    }
    
    $('#total').val(sum);
}
<!DOCTYPE html>
<html>
		<body>

		<h1>Security Assessment </h1>

	<table>
  <tr>
    <th>PERSONNEL SECURITY</th>
   
  </tr>
  <tr>
    <td>1. Does your staff wear ID badges? 

<form>
Yes
<input class="calc" type="radio" name="radio1" value="1" />
No
<input class="calc" type="radio" name="radio1" value="0" /><br />

</form> 


 </td>

   
  </tr>
  <tr>
    <td>2. Is a current picture part of the ID badge? 


<form>
Yes
<input class="calc" type="radio" name="radio2" value="1" />
No
<input class="calc" type="radio" name="radio2" value="0" /><br />

</form> 


</td>
    
    
  </tr>
  <tr>
    <td>3. Are authorized access levels and type (employee, contractor, visitor) identified
on the Badge?

<form>
 Yes
<input class="calc" type="radio" name="radio3" value="1" />
No
<input class="calc" type="radio" name="radio3" value="0" /><br />

</form> 

</td>
      
  </tr>
 
 
</table>

Total : <input type="text" name="total" id="total"/>


<input type="Submit" value="Submit" onclick="sumInputs()">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

</body>
</html>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download