I need to create a dropdown in an HTML form that lists the next four or five upcoming Saturdays - PHP

Ben
November 8, 2022
232 views
3 votes
3 Answers

I’d like to create a dropdown in an html form that will dynamically list the next four upcoming Saturdays. The idea is that when someone is signing up they can choose which of the four upcoming Saturdays they’d like to come in to visit our space, so we can keep track and send automated email responses. The time is the same every week so that’s not an issue.

Been trying to do this through WordPress plugins but that’s proving complicated to integrate with email software… I think it must be easier and cleaner to do it in html/javascript/php.

Answers

Here is an example

Note the generic nearestDay to get any day of the week from today until today next week

const nearestDay = dayOfWeek => {
  let now = new Date();
  now.setDate(now.getDate() + (((dayOfWeek + 7 - now.getDay()) % 7) || 7));
  return now;
};

const dates = () => {
  let date = nearestDay(6); // Saturday
  const arr = [];
  while (arr.length < 4) {
    arr.push(date.toISOString().split("T")[0])
    date.setDate(date.getDate() + 7)
  }
  return arr;
}
const dateArr = dates();
document.getElementById("saturdays").innerHTML += dateArr.map(date => `<option value="${date}">${date}</option>`).join("");

<select id="saturdays">
  <option value="">Please select</option>
</select>

<?
echo '<label for="saturday">Choose which Saturday:</label>';
echo "<select id="saturday" >n";
$saturday = (6 - date('w',time())) ;  // how many days to Saturday 
$saturday = time() + ($saturday * 86400);   // number of seconds to Saturday
$value = date('Y-m-d',$saturday);  // Get proper form date format
$text = date('D M jS',$saturday);  // Get human readable format
echo "<option value="$option">$text</option>n";

for ($x = 1; $x < 4 ; $x++) {
  $saturday += 604800;
  $option =  date('m-d-y',$saturday) ;
  $text = date('D M jS',$saturday);
  echo "<option value="$option">$text</option>:n";
}
echo '</select>';
?>

Please check if below example can be used in your requirement. I used a button so you can see what happens and you would probably use a different event such as onload for your application.

function myFunction() {

  let dateToday = new Date();
  let dateCopy = new Date(dateToday.getTime());

  let mySelectID = document.getElementById("mySaturdays");


  for (let x = 1; x < 5; x++) {

    const nextSaturday = new Date(
      dateCopy.setDate(
        dateCopy.getDate() + ((7 - dateCopy.getDay() + 6) % 7 || 7),
      ),
    );

    let option = document.createElement("option");
    option.value = x;
    option.text = nextSaturday;
    mySelectID.add(option);
  }

}

<form>
  <select id="mySaturdays" size="5">
  </select>
</form>
<br>

<button type="button" onclick="myFunction()">Insert option</button>

Please signup or login to give your own answer.

Click here to cancel reply.

I need to create a dropdown in an HTML form that lists the next four or five upcoming Saturdays – PHP

Answers