11135 sujets

JavaScript, DOM et API Web HTML5

bonjour a tous

je suis occupé a me caser la tête avec bootsraap et la fenêtre modal
le fameux pop pup ...

je souhaiterais que lorsque la personne valide sa ville dans ce formulaire que le pop up de bootstraap ne se ferme pas

j ai essaye pas mal de chose
mais étant nul en javascript rien ne fonctionne
voici mon dernier test qui ne fonctionne toujours pas

merci de l aide



<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">
Launch static backdrop modal
</button>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<?php
$duree = $_POST['duree'];
$ville=$duree;
?>
<form method="post">
<label for="browser">choisi la ville de ton choix :</label>
<input list="browsers" name="duree" id="browser">
<datalist id="browsers">
<option value="Landelies, BE">
<option value="Gilly, BE">
<option value="Hourpes, BE">
<option value="Rouvroy, BE">
<option value="Leithum, LU">
<option value="Huldange, LU">
</datalist>
<input type="submit" value="Valider" />
</form >

</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>


<script>
// Create an event listener to catch "when the form is submited"
$('.modal-body form').submit(function(event) {
// to stop the form from submitting (and the page reloading, so the modal will not close)
event.preventDefault();
// Call server manually and send form data (see Mikey's comment)
$.post('meteo.php', $(this).serialize(), function(err, result) {
if (err) {
// Display error on form
} else {
// Success... Redirect ?
window.location = 'meteo.php'
}
})
});
</script>

Modifié par flexi2202 (11 Jun 2021 - 11:22)
Salut

Tu souhaite quand même procéder à la validation du formulaire ?

à partir du moment où c'est un formulaire, la page doit se recharger

et donc ta modal se ferme (car elle est ouvert par un click).

le mieux serait donc de passer par de l'AJAX au lieu d'un formulaire de type submit.
Modifié par JENCAL (14 Jun 2021 - 16:23)