Choose date in input field and in other input field put ADULT or YOUNG

Hi,

I have question about this, I am searching on Internet but I didnt found something similar.

I want when user in form choose date from date picker in input field, in other input field automaticaly show content, confisaction ofpicked date and current date, and show value depending on result >18 or <=18  ADULT or YOUNG.

Which is the best way to make that?
So, form will write entries to MySQL database with PHP.

Thank you
Žan AnđićAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

leakim971PluritechnicianCommented:
send the birthdate to your PHP server, you can't rely on the client side because the system date can be wrong or not the same for everyone due the timezone.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date
<input type="date" id="birthdate" name="birthdate" />

Open in new window

1
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
The adult or young info should be calculated from at least a birth yeat and month or full birthdate.

From there you calculate adult or young.  On the initial form input I would use javascript in order to give instant feedback. On subsequent oages where you already stored the birth date, calculate on page load or ajax call.

I can be young today and old tomorrow, thats why you eant to calculate.
0
Žan AnđićAuthor Commented:
So, idea is when user write or pick his birthday date, in next field which will be readonly show text: ADULT or YOUNG depending on birthday.
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Yes, exactly.  That part will be done using your jquery code.

If you ever need to show that info again, you can use use your php code as it will be stored as a date.
0
Žan AnđićAuthor Commented:
Thank you

There is example picture... which way is the best to do that? how to make that?
Untitled-2.jpg
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Post the html code for just those fields. Just view the source and copy and paste the rendered html.
0
Žan AnđićAuthor Commented:
I am using bootstrap, Siminta admin template.

<div class="col-xs-6">
<p><label>Date of birth:</label><input type="date" class="form-control" name="dob" placeholder="Choose date"/></p>
</div>
<div class="col-xs-6">
<p><label>Status:</label><input type="text"  class="form-control" name="status" placeholder="Choose date before" readonly /></p>
</div>

Open in new window

0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Thanks for posting that. I will have an example for you shortly.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
http://jsbin.com/vukujumuso/edit?html,js,output

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
   
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  
</head>
<body>
  
  <div class="col-xs-6">
<p><label>Date of birth:</label><input type="date" class="form-control" name="dob"/></p>
</div>
<div class="col-xs-6">
<p><label>Status:</label><input type="text"  class="form-control" name="status" placeholder="Choose date before" readonly /></p>
</div>
  
  <div id="stuff" id="col-xs-12">
  <select id="stuff-select">
    <option data-status="young" value="1">One Young</option>
    <option data-status="old" value="2">Two Old</option>
    <option data-status="young" value="3">Three Young</option>
    <option data-status="old" value="4">Four Old</option>
    <option data-status="young" value="5">Five Young</option>
    
  </select>
  </div>
</body>
</html>

Open in new window


$(function(){
  
  //HIDE THE SELECT ON PAGE LOAD
  if(!validate($('input[name="dob"]').val())){
     hideSelect();
  }
  
  $('input[name="dob"]').change(function(){
    // LISTEN FOR CHANGE
    
    d = $('input[name="dob"]').val();
    
    if(!validate(d)){
      //MAKE SURE DATE IS VALID
       hideSelect();
      
     } else {
      
       // CALCUALTE THE AGE
       var age = calculateAge(d);
       if(age >= 18){
         
         // ONLY SHOW 'OLD'
         $('select#stuff-select>option').each(function () {
           if($(this).data('status')=='young'){
             $(this).hide();
           }
        });
       } else {
         
         //ONLY SHOW 'YOUNG'
         $('select#stuff-select>option').each(function () {
           if($(this).data('status')=='old'){
             $(this).hide();
           }
        });
       }
       
       
       showSelect();
     }
    
  });
  
 
function hideSelect(){
  $('#stuff-select').hide();

 
}
  
function showSelect(){
  $('#stuff-select').show();
 
}  
  
function validate(date){
  var validDate = !isNaN((new Date(date)).getTime());
  var status = validDate ? true : false;

  return status

}
  
function calculateAge(str) {
  //https://www.experts-exchange.com/questions/22397292/Calculate-age-based-on-date-of-birth-dd-mm-yyyy.html
  var d = new Date();
  var bits = str.split('-')
  d.setHours(0,0,0,0); //normalise
  d.setFullYear(bits[0])
  d.setMonth(bits[1]-1)
  d.setDate(bits[2])
  var now = new Date();
  now.setHours(0,0,0,0); //normalise
  var years = now.getFullYear()-d.getFullYear();
  d.setFullYear(now.getFullYear())
  var diff = now.getTime()-d.getTime()
  if ( diff <0) years--;
  return years
}



  
  
  
});

Open in new window

0
Žan AnđićAuthor Commented:
Thank you for answer, but I didnt sure about this. When I choose date no changes in field status. In status field I need to place text (young or adult depending on date) and if young show list of categories (multiple select) for young, and if adult show list of categories (multiple select) for adult.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Sorry, change the js to


http://jsbin.com/sukafuluja/edit?html,js,output
$(function(){
  
  //HIDE THE SELECT ON PAGE LOAD
  if(!validate($('input[name="dob"]').val())){
     hideSelect();
  }
  
  $('input[name="dob"]').change(function(){
    // LISTEN FOR CHANGE
    
    d = $('input[name="dob"]').val();
    
    if(!validate(d)){
      //MAKE SURE DATE IS VALID
       hideSelect();
      
     } else {
      
       // CALCUALTE THE AGE
       var age = calculateAge(d);
       if(age >= 18){
         
         // CHANGE STATUS TO OLD
         $('input[name="status"]').val('Old');
         
         // ONLY SHOW 'OLD'
         $('select#stuff-select>option').each(function () {
           if($(this).data('status')=='young'){
             $(this).hide();
           }
        });
       } else {
         
         
          // CHANGE STATUS TO YOUNG
         $('input[name="status"]').val('Young');
         
         //ONLY SHOW 'YOUNG'
         $('select#stuff-select>option').each(function () {
           if($(this).data('status')=='old'){
             $(this).hide();
           }
        });
       }
       
       
       showSelect();
     }
    
  });
  
 
function hideSelect(){
  $('#stuff-select').hide();

 
}
  
function showSelect(){
  $('#stuff-select').show();
 
}  
  
function validate(date){
  var validDate = !isNaN((new Date(date)).getTime());
  var status = validDate ? true : false;

  return status

}
  
function calculateAge(str) {
  //https://www.experts-exchange.com/questions/22397292/Calculate-age-based-on-date-of-birth-dd-mm-yyyy.html
  var d = new Date();
  var bits = str.split('-')
  d.setHours(0,0,0,0); //normalise
  d.setFullYear(bits[0])
  d.setMonth(bits[1]-1)
  d.setDate(bits[2])
  var now = new Date();
  now.setHours(0,0,0,0); //normalise
  var years = now.getFullYear()-d.getFullYear();
  d.setFullYear(now.getFullYear())
  var diff = now.getTime()-d.getTime()
  if ( diff <0) years--;
  return years
}
});

Open in new window


If you look at the drop down, the values change based on the age.  The drop down is not there  until there is data in the date field. Then if old, only the options with data-status="old" will show up and same for young.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Žan AnđićAuthor Commented:
I tryed this, and that works perfect. I see the data-status is under select field - option, can I make hidden divs, and when is young show div id for young, or when is old show div id for old?

Untitled-2.jpg
Untitled-3.jpgBecause categories will be in seperated divs (young and adult)

Thank you
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
>  can I make hidden divs, and when is young show div id for young, or when is old show div id for old?

Yes.

In jquery it is $('#div_id').show(); or $('#div_id').hide();
0
Žan AnđićAuthor Commented:
I try but unsuccessfull. Little confused about data-status, and select field.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
That example is only if you are going to put all the select options in one place. If you choose to use separate selects and hide one, then  just remove that.

If you have <div id="oldselect"> and <div id="youngselect"> each with their own select/option then you can use

// For old
$('#oldselect').show();
$('#youngselect').hide();

// for young
$('#youngselect').show();
$('#oldselect').hide();

Open in new window

0
Žan AnđićAuthor Commented:
I will try now, so i need replace this
 $('select#stuff-select>option').each(function () {
           if($(this).data('status')=='old'){
             $(this).hide();
           }
        });

Open in new window


with this:
$('#youngselect').show();
$('#oldselect').hide();

Open in new window

1
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Yes
0
Žan AnđićAuthor Commented:
Not work, I remove function for stuff-select too.
0
Žan AnđićAuthor Commented:
Successfull, now works,

there is code:

$(function(){
  
  //HIDE THE SELECT ON PAGE LOAD
  if(!validate($('input[name="dob"]').val())){
     hideSelect();
  }
  
  $('input[name="dob"]').change(function(){
    // LISTEN FOR CHANGE
    
    d = $('input[name="dob"]').val();
    
    if(!validate(d)){
      //MAKE SURE DATE IS VALID
       hideSelect();
      
     } else {
      
       // CALCUALTE THE AGE
       var age = calculateAge(d);
       if(age >= 18){
         
         // CHANGE STATUS TO OLD
         $('input[name="status"]').val('Old');
         
         // ONLY SHOW 'OLD'
         $('#oldselect').show();
$('#youngselect').hide();
       } else {
         
         
          // CHANGE STATUS TO YOUNG
         $('input[name="status"]').val('Young');
         
         //ONLY SHOW 'YOUNG'
                  $('#youngselect').show();
$('#oldselect').hide();
       }
       

     }
    
  });
  
 
function hideSelect(){
  $('#youngselect,#oldselect').hide();

 
}
  

  
function validate(date){
  var validDate = !isNaN((new Date(date)).getTime());
  var status = validDate ? true : false;

  return status

}
  
function calculateAge(str) {
  //https://www.experts-exchange.com/questions/22397292/Calculate-age-based-on-date-of-birth-dd-mm-yyyy.html
  var d = new Date();
  var bits = str.split('-')
  d.setHours(0,0,0,0); //normalise
  d.setFullYear(bits[0])
  d.setMonth(bits[1]-1)
  d.setDate(bits[2])
  var now = new Date();
  now.setHours(0,0,0,0); //normalise
  var years = now.getFullYear()-d.getFullYear();
  d.setFullYear(now.getFullYear())
  var diff = now.getTime()-d.getTime()
  if ( diff <0) years--;
  return years
}



  
  
  
});

Open in new window


Thank you very much!
1
Žan AnđićAuthor Commented:
Thank you Scott Fell for help :)
1
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.