0

I'm writing a small PHP system to register groups, the groups are of four category, namely men, women, youth and both(men and women) category, i'm not good in javascript but i have tried to write small javascript code which invoke a text box when a user choose men category. What i want is when i register a group i should also be able to capture the number of people in that category, let's say i have selected men category, then i should also be able to capture number of men, it should be like this, selected group category is men, number is 30, the same apply for youth and women category, but for both(men and women) category i have to capture number of men and women, example group category is both, number of men is 23, and number of women is 27, total is 50. ANY HELP PLEASE OR OTHER WAY TO ACHIEVE THIS PROBLEM.

<html> <head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript">   
$(document).ready(function() {   
$('#category').change(function(){   
if($('#category').val() === 'men')   
   {   
   $('#men').show();    
   }   
else 
   {   
   $('#men').hide();      
   }   
});   
});   
</script> </head> <body> <select id="category" name="category" > <option value="men">Men</option> <option value="women">Women</option> <option value="youth">Youth</option> <option value="both">Both</option> </select> <input type="text" id="men" name="men" style="display: none;"/> </body> 
2
Contributors
1
Reply
44
Views
9 Months
Discussion Span
Last Post by vsmash
1

https://jsfiddle.net/z58cnmh8/

 <html><head>
    <script
      src="https://code.jquery.com/jquery-3.1.1.min.js"
      integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
      crossorigin="anonymous"></script>
    </head>

    <body>
      <select id="category" name="category">
        <option value="men">Men</option>
        <option value="women">Women</option>
        <option value="youth">Youth</option>
        <option value="both">Both</option>
      </select>
      <input type="text" id="display" name="display" value="" />
    </body>

    <script type="text/javascript"> 
    var clection = {
  'men': 27,
  'women': 23,
  'youth': 30,
  'both': function() {
    return parseInt(clection.men) + parseInt(clection.women);
  }
}
$(document).ready(function() {
 $("#display").val(clection.men);
  $('#category').change(function() {
        $("#display").val(eval('clection.'+$("#category").val()));
  });

  $("#display").keyup(function(){
                    if(isInteger($(this).val())){
                            if($("#category").val()=='both'){
                $("#display").val(clection['both']);
              }else{
                              clection[$("#category").val()]=$(this).val();
              }
          }     
  });  
});

function isInteger(n) {
        return /^[0-9]+$/.test(n);
    }

    </script>
    </html>

Edited by vsmash

Votes + Comments
tidy :)
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.