DEV Community

John Ellee Robado
John Ellee Robado

Posted on • Edited on

2

Drop Down List Category(Daily, Weekly, Yearly) with search box using HTML, jQuery and PHP

Drop Down List Category(Daily, Weekly, Yearly) with search box using jQuery with PHP

So today, I will teach you how you do it

HTML, first you create a drop down list and two textbox


Daily
Weekly
Monthly
Search (Slow Search)

To

jQuery code

$(document).ready(function(){
$(".category").change(function(){
if($(".category option:selected").val()=="4"){
$(".date1").fadeIn();
$(".label_to").fadeIn();
$(".date2").fadeIn();
}
else{
$(".date1").fadeOut();
$(".label_to").fadeOut();
$(".date2").fadeOut();

}
});
)};

PHP Code

<?php
//Declare variable
$date1;
$date2;

//Set Timezone
date_default_timezone_set("America/New_York");
//Daily
if($_POST['category']==1){
$date1=date("Y-m-d");
$date2=date("Y-m-d");
}
//Weekly
if($_POST['category']==2){
$days=array("Monday"=>0,"Tuesday"=>1,"Wednesday"=>2,"Thursday"=>3,"Friday"=>4);
foreach ($days as $key => $value) {
if(date("l")==$key){
$date1=date("Y-m-d",strtotime("-".$value."days"));
$date2=date("Y-m-d",strtotime("+".(4-$value)."days"));
}
}
}
//Monthly
if($_POST['category']==3){
$date1=date("Y-m-1");
$date2=date("Y-m-t");
}
//Yearly
if ($_POST['category']==4) {
$date1=date('Y-01-01');
$date2=date('Y-12-31');
}
//Search
if($_POST['category']==5){
$date1=date("Y-m-d",strtotime($_POST['date1']));
$date2=date("Y-m-d",strtotime($_POST['date2']));
}
?>

Note: You must include this jquery library

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay