Aller au contenu

HTML : Exemple page HTML pour enregistrer des astreintes

<!DOCTYPE html>
    <title>On-Call Schedule</title>
<link rel="stylesheet" href="" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
	<script src="" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
  	<header style='height:100px ; background-color:red'>
    <h1>On-Call Schedule</h1>
		<div class='container-fluid'>
		<div class='row'>
				<div class='col-6'>
					  <label for="date">Date:</label>
					  <input class='form-control' type="date" id="date" name="date"><br><br>
			<div class='row'>
				<div class='col-6'>
					  <label for="start-time">Start Time:</label>
					  <input class='form-control' type="time" id="start-time" name="start-time"><br><br>
				<div class='col-6'>
					  <label for="end-time">End Time:</label>
					  <input class='form-control' type="time" id="end-time" name="end-time"><br><br>
			<div class='row'>
				<div class='col-12'>
					  <input class='btn btn-primary' type="submit" value="Save">
    <table class='table'>
        <th>Start Time</th>
        <th>End Time</th>
        <td id="saved-date"></td>
        <td id="saved-start"></td>
        <td id="saved-end"></td>

      // Get the form
      const form = document.querySelector('form');

      // Get the table cells where we'll display the saved data
      const savedDate = document.querySelector('#saved-date');
      const savedStart = document.querySelector('#saved-start');
      const savedEnd = document.querySelector('#saved-end');

      // Add a submit event listener to the form
      form.addEventListener('submit', e => {
        // Prevent the form from submitting

        // Get the values from the form inputs
        const date = document.querySelector('#date').value;
        const start = document.querySelector('#start-time').value;
        const end = document.querySelector('#end-time').value;

        // Display the saved data in the table cells
        savedDate.textContent = date;
        savedStart.textContent = start;
        savedEnd.textContent = end;

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *