Saturday, May 30, 2015

Addition of Five Numbers Using JQuery with Data Validation

A simple program that I wrote using JQuery that will ask the user to enter five number with data validation that I include in this program. I hope you will find this simple program useful in learning how to program in JQuery.

If you have some questions please send me at email at jakerpomperada@yahoo.com and jakerpomperada@gmail.com. People here in the Philippines can reach me in this number 09173084360.

Thank you very much and Happy Computing.





Sample Program Output

Program Listing

<html>
<title> Additon of Five Numbers in JQuery</title>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script>
$(document).ready(function(){
    
    // auto text field focus upon loading of our
    // webpage
    
    $("#item1").focus();
    
    // function to add all the five values in our text field
    
    $("#sum").click(function(){
        
        var sum = 0;               
    
        var item_no1 = $("#item1").val();
        var item_no2 = $("#item2").val();
        var item_no3 = $("#item3").val();
        var item_no4 = $("#item4").val();
        var item_no5 = $("#item5").val();
    
    // text field validation conditions checks if the text field
   //  does not have a value to sum up
        if (item_no1==0) {
            alert("Item No. 1 Cannot be empty.");
            $("#item1").focus();
        }
  
        else  if (/^[a-zA-Z0-9- ]*$/.test(item_no1) == false) {

          alert('Value in Item No. 1 Contains illegal Characters.');
          $("#item1").focus();    
    }    
  
        else if (isNaN(item_no1))
        {
           alert("Value in Item No. 1 is not a number but a letter.");
          $("#item1").focus();    
            }
        
    else if (item_no2==0) {
            alert("Item No. 2 Cannot be empty.");
            $("#item2").focus();
           }
  else  if (/^[a-zA-Z0-9- ]*$/.test(item_no1) == false) {
          alert('Value in Item No. 2 Contains illegal Characters.');
          $("#item2").focus();    
    }    
      
    else if (isNaN(item_no2))
         {
             alert("Value in Item No. 2 is not a number but a letter.");
            $("#item2").focus();    
            }    
    else if (item_no3==0) {
            alert("Item No. 3 Cannot be empty.");
            $("#item3").focus();
           }
    
     else  if (/^[a-zA-Z0-9- ]*$/.test(item_no3) == false) {

          alert('Value in Item No. 3 Contains illegal Characters.');
          $("#item3").focus();    
    }    
          
    else if (isNaN(item_no3))
         {
             alert("Value in Item No. 3 is not a number but a letter.");
            $("#item3").focus();    
            }        
    else if (item_no4==0) {
            alert("Item No. 4 Cannot be empty.");
            $("#item4").focus();
           }
   else  if (/^[a-zA-Z0-9- ]*$/.test(item_no4) == false) {

          alert('Value in Item No. 4 Contains illegal Characters.');
          $("#item4").focus();    
    }        
    else if (isNaN(item_no4))
         {
             alert("Value in Item No. 4 is not a number but a letter.");
            $("#item4").focus();    
            }        
    else if (item_no5==0) {
            alert("Item No. 5 Cannot be empty.");
            $("#item5").focus();
           }
    else  if (/^[a-zA-Z0-9- ]*$/.test(item_no5) == false) {

          alert('Value in Item No. 5 Contains illegal Characters.');
          $("#item5").focus();    
    }            
    else if (isNaN(item_no5))
         {
          alert("Value in Item No. 5 is not a number but a letter.");
            $("#item5").focus();    
            }        
    else {              
        $(".total_sum").each(function() {             
            sum+= Number($(this).val());         
        });
        
      $('.display').html("The total sum is " + sum + ".");
    }

});

// function to clear all the content of the text field

   $("#clear").click(function(){
          
         $(".total_sum").each(function() {             
            ($(this).val(""));         
           $(".display").html("");    
           $("#item1").focus();
         });
            
            
    });

});

</script>

<style>

body {  
        background:lightgreen;
        color: blue ;
        font-family:arial;
        font-weight:bold;
        size:12;
     }
</style>


</head>
<body>
    <hr size="3" color="red">
<h2> Addition of Five Numbers in JQuery </h2>
    <hr size="3" color="red">
<br><br>
Enter Item No. 1 :
<input type="text" id="item1" class="total_sum" name="item1" maxlength="5" size="5">
<br>
Enter Item No. 2 :
<input type="text" id="item2" class="total_sum" name="item2" maxlength="5" size="5">
<br>
Enter Item No. 3 :
<input type="text" id="item3" class="total_sum" name="item3" maxlength="5" size="5">
<br>
Enter Item No. 4 :
<input type="text" id="item4" class="total_sum" name="item4" maxlength="5" size="5">
<br>
Enter Item No. 5 :
<input type="text" id="item5" class="total_sum" name="item5" maxlength="5" size="5">
<br><br>
<button id="sum" type="button" title="Click here to find the sum of the five numbers."> COMPUTE </button>
&nbsp;&nbsp;&nbsp;
<button id="clear" type="button" title="Click clear text box"> CLEAR </button>
<br><br><br>
<div class="display"></div>
</body>
</html>


No comments:

Post a Comment