javascript script on select menu event problem j

Question

Venance_1 0 Newbie Poster

7 Years Ago

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>

javascript jquery

2 Contributors
1 Reply
362 Views
1 Week Discussion Span
Latest Post 7 Years Ago Latest Post by vsmash

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

vsmash 14 Dinosaur · Answer 1 · 2017-02-08T02:32:41+00:00

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>