noam76 icon

insert_new_appart.html

noam76 | PRO | 05/11/23 05:29:31 AM UTC (Edited) | 0 ⭐ | 1148 👁️ | Never ⏰ | []
HTML |

3.44 KB

|

None

|

0 👍

/

0 👎

<!DOCTYPE html>
<html>
<head>
    <title>Appartements</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-3">
                <div class="list-group">
                    <a href="#" class="list-group-item list-group-item-action active">Menu</a>
                    <a href="#" class="list-group-item list-group-item-action">Insertion d'appart</a>
                    <a href="#" class="list-group-item list-group-item-action">Les payements entrants</a>
                    <a href="#" class="list-group-item list-group-item-action">Les payements sortants</a>
                    <a href="#" class="list-group-item list-group-item-action">Générer des rapports</a>
                </div>
            </div>
            <div class="col-md-9">
                <h2>Insertion d'appart</h2>
                <form id="insertion_form">
                    <div class="form-group">
                        <label for="numero_appartement">Numéro d'appartement:</label>
                        <input type="text" class="form-control" id="numero_appartement" name="numero_appartement">
                    </div>
                    <div class="form-group">
                        <label for="nom_locataire">Nom du locataire:</label>
                        <input type="text" class="form-control" id="nom_locataire" name="nom_locataire">
                    </div>
                    <div class="form-group">
                        <label for="prenom_locataire">Prénom du locataire:</label>
                        <input type="text" class="form-control" id="prenom_locataire" name="prenom_locataire">
                    </div>
                <button type="submit" class="btn btn-primary">Ajouter</button>
                </form>
            </div>
        </div>
    </div>
// Ajouter ce code à la fin du fichier HTML
<div id="popup" class="modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Mise à jour d'appartement</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <p>TODO: Ajouter les champs pour la mise à jour.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success">Mettre à jour</button>
                <button type="button" class="btn btn-danger" data-dismiss="modal">Annuler</button>
            </div>
        </div>
    </div>
</div
<script>
$(document).ready(function(){
    $("#insertion_form").submit(function(event){
        event.preventDefault();
        var numero_appartement = $("#numero_appartement").val();
        var nom_locataire = $("#nom_locataire").val();
        var prenom_locataire = $("#prenom_locataire").val();
        $.ajax({
            url: "insert_appart.php",
            method: "POST",
            data: {numero_appartement: numero_appartement, nom_locataire: nom_locataire, prenom_locataire: prenom_locataire},
            success: function(response){
                if(response == "existe"){
                    if(confirm("Cet appartement existe déjà. Voulez-vous le mettre à jour ?")){
                        // TODO: Ouvrir le popup pour la mise à jour
                    }
                }
                else if(response == "succes"){
                    alert("L'appartement a été ajouté avec succès.");
                    location.reload();
                }
                else{
                    alert("Une erreur s'est produite.");
                }
            }
        });
    });
});
</script>
</body>
</html>

Comments