Page 1 sur 1

Traitement conjoint en js et php d'un submit formulaire : popin (js) empêche enregistrement données (php)

Posté : 02 avr. 2015, 12:57
par amdawb
Bonjour,

Au submit d'un formulaire, il y a 2 traitements:
1- coté serveur, le php enregistre les données postées dans la bdd.
2- Une popin confirme les saisies (js).

Seulement, cette popin, en s'éxécutant, empêche le traitement php.
En la désactivant, le php fait son boulot.

Quelqu'un a-t-il une idée sur la façon de faire pour que le surgissement de la popin n'empêche pas
le php d'enregistrer les données dans la bdd ?

Merci.
<?php
    require("config-db.php");
    mysql_connect($adresse,$nom,$motdepasse);
    mysql_select_db($database);
 
    if(isset($_POST['action-submit'])){
        $valid=true;
        $prenom=$_POST['prenom'];
        $email=$_POST['email'];
        if(isset($prenom) && isset($email)){
            $insertdata="INSERT into testable (prenom,email) values('$prenom','$email')";
            mysql_query($insertdata) or die(mysql_error());
            return true;
        }
    }
?>
<form id="themes"  action="" method="post" data-rel="popup_name" class="poplight">
    <input id="nom-inscr" class="foo" name="prenom" type="text"/>
    <input id="email-inscr" class="foo" name="email" type="text" />
 
    <button id="action-submit" class="action-submit" name="action-submit" type="submit"><span class="tick">JE M'INSCRIS</span></button>
 
    <div id="popup_name" class="popup_block">
        <p>
            Les données ont été correctement enregistrées.<br/>
            Vous allez recevoir un mail d'activation à :<br /><br />
            <strong id="emailtarget"></strong>
        </p>
    </div>
</form>
#fade {display: none;background: #000;position: fixed;left: 0;top: 0;
    width: 100%; height: 100%;opacity:.7;z-index: 9999;}
.popup_block{display: none;background: #fff;float: left;font-size:1.0em;position: fixed;
    top: 50%; left: 50%;z-index: 99999;}
SCRIPT popin: (désolé , j'ai pas trouvé l'éditeur javascript)

Code : Tout sélectionner

$(function(){ var formulaire = $("#themes"); formulaire.on('submit',function(event) { event.preventDefault(); var mail = formulaire.find("input[name=email]"); var email = $.trim(mail.val()); document.getElementById("emailtarget").innerHTML = email; var popID = $(this).data('rel'); var popWidth = $(this).data('width'); $('#' + popID).fadeIn("fast").css({ 'width': popWidth}).prepend('<a href="#" class="close"><img src="styles/images/close_pop.png" class="btn_close" title="Fermer la fenêtre" alt="Fermer" /></a>'); var popMargTop = ($('#' + popID).height() + 80) / 2; var popMargLeft = ($('#' + popID).width() + 80) / 2; $('#' + popID).css({ 'margin-top' : -popMargTop, 'margin-left' : -popMargLeft }); $('body').append('<div id="fade"></div>'); $('#fade').css({'filter' : 'alpha(opacity=70)'}).show(); return true; }); $('body').on('click', 'a.close, #fade', function() { $('#fade , .popup_block').fadeOut("fast",function() { $('#fade, a.close').remove(); }); return true; }); });

Re: Traitement conjoint en js et php d'un submit formulaire : popin (js) empêche enregistrement données (php)

Posté : 02 avr. 2015, 14:50
par tof73
utiliser la fonction post de jquery pour soumettre le formulaire, sans rechergament de la page, qui peut alors afficher un popin.
voir des exemples sur http://www.w3schools.com/jquery/jquery_ ... t_post.asp

Re: Traitement conjoint en js et php d'un submit formulaire : popin (js) empêche enregistrement données (php)

Posté : 02 avr. 2015, 19:58
par amdawb
C'est embêtant de poster ici un sujet relatif à l'Ajax et jQuery, surtout que l'éditeur de coloration syntaxique n'y est pas prévu, mais le forum me paraît sérieux et réactif.
Pour en revenir à notre sujet, voilà où j'en suis : Toujours pas d'enregistrement en bdd.

Code js :

Code : Tout sélectionner

<script type="text/javascript"> $(function(){ var formulaire = $("#themes"); formulaire.on('submit',function(event) { event.preventDefault(); //formulaire.on('submit',function() { var mail = formulaire.find("input[name=email]"); var email = $.trim(mail.val()); document.getElementById("emailtarget").innerHTML = email; var popID = $(this).data('rel'); var popWidth = $(this).data('width'); $('#' + popID).fadeIn("fast").css({ 'width': popWidth}).prepend('<a href="#" class="close"><img src="styles/images/close_pop.png" class="btn_close" title="Fermer la fenêtre" alt="Fermer" /></a>'); var popMargTop = ($('#' + popID).height() + 80) / 2; var popMargLeft = ($('#' + popID).width() + 80) / 2; $('#' + popID).css({ 'margin-top' : -popMargTop, 'margin-left' : -popMargLeft }); $('body').append('<div id="fade"></div>'); $('#fade').css({'filter' : 'alpha(opacity=70)'}).show(); return true; //----------------------------------------------------- var datastring ='prenom='+prenom+'email='+email; $.ajax({ type: "POST", url: "modules/insert.php", data: datastring, success: function(responseText) { if(responseText == 1) { return false; }else if(responseText == '') { return true; } } }); //-------------------------------------------------------- }); $('body').on('click', 'a.close, #fade', function() { $('#fade , .popup_block').fadeOut("fast",function() { $('#fade, a.close').remove(); }); return true; }); }); </script>
insert.php :
<?php 
	session_start();

	$prenom=$_POST['prenom'];
	$email=$_POST['email'];

	require("../config-db.php");
	mysql_connect($adresse,$nom,$motdepasse);
	mysql_select_db($database); 
	$insertdata="INSERT into testable (prenom,email) values('$prenom','$email')";
	$query = mysql_query($insertdata) or die(mysql_error());

	if(isset(mysql_error())) { 
		echo '1';
	} else {
		echo ''; 
	}

?>

Si quelqu'un peu me mettre sur début de code correct, ce serait un gain de temps énorme. Et je l'en remercie.

Re: Traitement conjoint en js et php d'un submit formulaire : popin (js) empêche enregistrement données (php)

Posté : 02 avr. 2015, 20:21
par tof73
ce qu'il y a après
return true;
n'est pas exécuté.

Re: Traitement conjoint en js et php d'un submit formulaire : popin (js) empêche enregistrement données (php)

Posté : 02 avr. 2015, 20:56
par @rthur
Bonjour et bienvenue sur PHPfrance,
C'est embêtant de poster ici un sujet relatif à l'Ajax et jQuery, surtout que l'éditeur de coloration syntaxique n'y est pas prévu, mais le forum me paraît sérieux et réactif.
Tu peux utiliser la balise

Code : Tout sélectionner

pour encadrer n'importe quel type de code sur le forum et le forum essayera de détecter automatiquement le langage utilisé pour y appliquer la bonne coloration syntaxique. Je l'ai fait pour ton message plus haut.

Re: Traitement conjoint en js et php d'un submit formulaire : popin (js) empêche enregistrement données (php)

Posté : 02 avr. 2015, 22:28
par amdawb
@ @RTHUR:

Je suis vraiment désolé de ne l'avoir pas remarqué. Mes excuses pour le jugement hâtif.
@tof73
ce qu'il y a après
return true;
n'est pas exécuté.
Ça dépend du code suivi. Pour moi, return false arrête l'exécution et return true continue.

Ces deux remarques faites, SVP, comment insérer en Ajax les données postées dans la table 'testable' ?

Je reposte mes derniers essais:
<?php
	require("config-db.php");
	mysql_connect($adresse,$nom,$motdepasse);
	mysql_select_db($database); 
	
	if(isset($_POST['action-submit'])){
		$valid=true;
		$prenom=$_POST['prenom'];
		$email=$_POST['email'];
		if(isset($prenom) && isset($email)){
			$insertdata="INSERT into testable (prenom,email) values('$prenom','$email')";
			mysql_query($insertdata) or die(mysql_error());
			return true;
		}
	}
?>
<form id="themes"  action="" method="post" data-rel="popup_name" class="poplight">
	<input id="nom-inscr" class="foo" name="prenom" type="text"/>
	<input id="email-inscr" class="foo" name="email" type="text" />
	
	<button id="action-submit" class="action-submit" name="action-submit" type="submit"><span class="tick">JE M'INSCRIS</span></button>
	
</form>
<div id="popup_name" class="popup_block">
	<p>
		Les données ont été correctement enregistrées.<br/>
		Vous allez recevoir un mail d'activation à :<br /><br />
		<strong id="emailtarget"></strong>
	</p>
</div>
insert.php :
<?php 
	session_start();
	$prenom=$_POST['prenom'];
	$email=$_POST['email'];
	
	require("../config-db.php");
	mysql_connect($adresse,$nom,$motdepasse);
	mysql_select_db($database);
	
	if(isset($prenom) && isset($email)){
		$insertdata="INSERT into testable (prenom,email) values('$prenom','$email')";
		$query = mysql_query($insertdata) or die(mysql_error());
		return true;
		echo '';
	} else {
		echo '1'; 
	}
?>

Code : Tout sélectionner

$(function(){ var formulaire = $("#themes"); formulaire.on('submit',function(event) { event.preventDefault(); //formulaire.on('submit',function() { var prenom00 = formulaire.find("input[name=prenom]"); var prenom = $.trim(prenom00.val()); var mail = formulaire.find("input[name=email]"); var email = $.trim(mail.val()); document.getElementById("emailtarget").innerHTML = email; var popID = $(this).data('rel'); var popWidth = $(this).data('width'); $('#' + popID).fadeIn("fast").css({ 'width': popWidth}).prepend('<a href="#" class="close"><img src="styles/images/close_pop.png" class="btn_close" title="Fermer la fenêtre" alt="Fermer" /></a>'); var popMargTop = ($('#' + popID).height() + 80) / 2; var popMargLeft = ($('#' + popID).width() + 80) / 2; $('#' + popID).css({ 'margin-top' : -popMargTop, 'margin-left' : -popMargLeft }); $('body').append('<div id="fade"></div>'); $('#fade').css({'filter' : 'alpha(opacity=70)'}).show(); return true; //----------------------------------------------------- var datastring = "prenom="+prenom+"&email="+email; $.ajax({ type: "POST", url: "modules/insert.php", data: datastring, success: function(responseText) { if(responseText == 1) { return false; }else if(responseText == '') { return true; } } }); //-------------------------------------------------------- }); $('body').on('click', 'a.close, #fade', function() { $('#fade , .popup_block').fadeOut("fast",function() { $('#fade, a.close').remove(); }); return true; }); });