Can anyone help me in redirect based on age?-CodePudding

There have a age picker.

If 18-31 y/old >Button > link to a website.......

Otherwish 32-99 y/old > same button >link to another another

Probable code:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Add your Age</title>
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css">

  
  <script>
  $( function() {
       $('#datepicker').datepicker({
        changeMonth:true,
        changeYear:true,
        yearRange:"1920:2021"

       });
        $('#datepicker').datepicker('show');

  } );

  </script>
</head>
<body>
 
<p>Date: <input type="text" id="datepicker"></p>
<button style="background: orange; border: none;padding: 10px 25px;margin-left:40px;">Ok</button>
 
 
</body>
</html>

CodePudding user response：

var link = document.getElementById('link');
var age = document.getElementById('ageInput');
var selectedAge;

age.addEventListener('change', function() {
  if (this.value === '18-31') {
    link.text = 'Foo';
    link.href = '/foo';
  } else {
    link.text = 'Bar';
    link.href = '/bar';
  }
});

a {
  display: block;
}

<label>
Select age:
<select id="ageInput">
  <option value="18-31">18-31</option>
  <option value="32-99">32-99</option>
</select>

<a id="link" href=""></a>

CodePudding user response：

Consider the following example.

$(function() {
  var dateFormat = "mm/dd/yy";
  var age = 0;
  $('#datepicker').datepicker({
    changeMonth: true,
    changeYear: true,
    yearRange: "1920:2021",
    onSelect: function(dateText, uiObject) {
      var now = new Date();
      var birth = $.datepicker.parseDate("mm/dd/yy", dateText);
      age = now.getFullYear() - birth.getFullYear();
    }
  });
  $('#datepicker').datepicker('show');
  $("button").click(function(event) {
    event.preventDefault();
    if (age > 17 && age < 32) {
      console.log("Age 1:", age);
      // Redirect to Page 1
    }
    if (age > 31) {
      console.log("Age 2:", age);
      // Redirect to Page 2
    }
  })
});

<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/ui-lightness/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>

<p>Birth Date: <input type="text" id="datepicker"></p>
<button class="ui-button ui-corner-all ui-priority-primary">Ok</button>

This sets a age variable based on the Users selection. You can then conditionally Redirect based on the age.

See more:

https://api.jqueryui.com/datepicker/#option-onSelect
https://api.jqueryui.com/datepicker/ view Utility Functions