Popup (Jquery Ui) après envoi de formulaire (POST)

Bonjour à tous,

Voilà je tourne un peu en rond (ok je suis débutant) sur un le mariage de deux éléments depuis plusieurs heures.

Mon souci est le suivant lorsque ma page se charge
- pas de souci la boite #dialog ne se charge grace à l'option autoOpen: false

Une fois que je valide mon formulaire avec le bouton (Input) #opener, la boite de dialogue #dialog apparait bien, puis disparait aussitôt sans laisser le temps de cliquer sur le bouton ok

J'ai bien vu des tas de solutions qui empêchent l'envoi de la méthode POST tant que le formulaire n'est pas correctement rempli (mais je n'en suis pas encore). Je voudrais juste remercier le participant par un popup.

Mais "je suppose que" le rechargement de la page lors de l'envoi des datas inhibe le maintient de la boite.

Ci-dessous ma prose :

Le Html et le Php

<?php
	$data = $_POST;
	$firstname='';
	$name='';
	$mail='';
	$niveau=5;
	$txtBtn='Envoyer';
	$alerte="Vous avez oubliez de remplir votre ";
	include 'acces_db.php';
	$name=isset($data['name'])? $data['name']:'';
	$firstname=isset($data['firstname'])? $data['firstname']:'';
	$mail=isset($data['mail'])? $data['mail']:'';
	$niveau=isset($data['niveau'])? $data['niveau']:5;
	$connexion = new mysqli(HOST,USER,PWD,DB);
	echo sprintf('<h3>Monsieur%s %s votre e-mail %s</h3>', $name, $firstname, $mail);
		if ($connexion->error){
			echo "Connection échoué";
			die ('Error connecton base : '.$connexion->error);
		}
		if ($name && $firstname && $mail && $niveau) {
			echo sprintf('<h3> %2$s %1$s votre e-mail %3$s et vous estimez avoir un niveau de %4$s </h3>', $name, $firstname, $mail, $niveau);
			$txtBtn="Corriger";
			$sql = "INSERT INTO users (name, firstname, mail, niveau) VALUES ('$name', '$firstname','$mail','$niveau') ON DUPLICATE KEY UPDATE name='$name',firstname='$firstname',niveau='$niveau'";
				if ($connexion->query($sql)){
					echo '<div id="dialog" title="Confirmation"<p>Merci pour votre participation</p></div>';
				}else {
					echo "<p>Requete planté</p>";
				}		
		}
		$connexion->close();
?>
<p><form method="post">
	<label>Votre nom : <input type="text" name="name" placeholder="Nom" value="<?php echo $name ?>"/></label>
	<?php
		if (!$name && count($_POST)){
			echo sprintf('<span>%s nom</span>',$alerte);
		}
	?>

<br />
			
	<label>Votre pénom : <input type="text" name="firstname" placeholder="Prénom" value="<?php echo $firstname ?>"/></label>
	<?php
		if (!$firstname && count($_POST)){
			echo sprintf('<span>%s prénom</span>',$alerte);
		}
	?><br />
	<label>Votre e-mail : <input type="email" name="mail" placeholder="e-mail" value="<?php echo $mail ?>"/></label>
	<?php
		if (!$mail && count($_POST)){
			echo sprintf('<span>%s mail</span>',$alerte);
		}
	?><br />	
	<label>Votre niveau : <input type="range" name="niveau" min="0" max="10" step="1" value="<?php echo $niveau ?>"/></label><br />	
	<!--p><input type="submit" value="<?php echo $txtBtn ?>"/></p> -- > ancien input-->
	<div class="widget">		
  		<button id="opener" class="ui-button ui-widget ui-corner-all" type="submit"><?php echo $txtBtn ?></button>
	</div>
</form></p>

Puis le Javascript issu (en parti) de Jquery UI pour marier le bouton à la boite de dialogue.

/*Définit la Boite de dialogue*/
  $( function() {
      //result=false;
    $("#dialog").dialog({autoOpen: false});
    $( "#dialog" ).dialog({ //options de la boite dialog       
        title:"un titre", resizable:false, modal:true,              
              hide: {
                effect: "drop",
                direction:"down",
                duration: 1000
              },
               buttons:[//Fermeture par ok
                { text:"ok",
                    click:function(){
                    $(this).dialog("close");
                    return false; 
                    //return result;   
                    }
                }]
    });
    $( "#opener" ).button();   //Ouverture de la boite #dialog 
    $( "#opener" ).click(function( event ) {     
        $("#dialog").dialog("open");
    });  
  });

Ps : J'ai pas encore abordé Ajax donc c'est normal que la page se reload. Je pense qu'il me manque une option dans l’exécution de la boite de dialogue du type open( event, ui ). Et la je seche

Merci de votre d'avance pour votre éclairage aguerri.
Modifié par Liverdan (07 Jun 2018 - 17:28)

a viens du code car rien ne se passe le pop-up reste lors de l'appui sur le bouton et lorsque je debug avec la console javascript elle me donne cette erreur lorsque j’appuie sur le bouton de la pop-up: Uncaught TypeError: Object #<HTMLCollection> has no method 'submit' Qu'est-ce que cela veut dire ? comment remédier à ce problème ?
see: https://luckypatcher.pro/
https://kodi.software/
https://plex.software/
Modifié par athman88 (11 Jun 2018 - 00:08)