Valeur de l'input non remontée

Version imprimable

Bonjour,

j'ai un souci pour la remontée de la valeur dans l'input "name_fichier2" :

html :

Code:

1
2
3
4
5
<form method="post" action="">
<input type="text" name="name_fichier2" value="130.jpeg" />
<a class="bouton" id="ajax_supp">Suppression ?</a>
</form>
<textarea id="reponse"></textarea>

jquery associé :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<script type="text/javascript">
$(document).ready(function(){
     $('#ajax_supp').click(function(){
		$.ajax({
			type: "POST",
			url: "supp_essai.php",
			msg: 'objet',
			success: function(msg){
				$('#reponse').val(msg);	}
			});
		});
});
</script>

Code de suppression : supp_essai.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
require ('configuration.php');
$upload_chemin = 'upload/';				// Chemin de l'upload
if (isset($_POST["name_fichier2"]))
	{	$nomfichier = $_POST["name_fichier2"];
		$fichier = $upload_chemin.$nomfichier;
		if( file_exists ( $fichier ) )
			{
				if(unlink($fichier))		// message de succes
					{	echo 'Votre fichier a bien &eacute;t&eacute; supprim&eacute; !';	}
				else
					{	echo 'Echec de suppression  le fichier n\'existe pas !  '.$nomfichier.'  !! ';	}
			}
		else
			{	echo 'Echec de suppression : le fichier n\'existe pas !  '.$nomfichier.'  !! ';	}
	}
else
	{	echo 'Rien envoy&eacute; !';	}
?>

Voici le résultat dans le "textarea" :
Rien envoyé !

Avec le html suivant :

Code:

1
2
3
4
<form method="post" action="supp_essai.php">
<input type="text" name="name_fichier2" value="130.jpeg" />
<input type="submit" value="Supprimer" />
</form>

=> le résultat est CORRECT dans le "textarea" :
Votre fichier a bien été supprimé !

Je ne vois pas ce qui coince dans l'input du premier html ?
Merci !

04/05/2012, 12h09
stealth35

faut un name

Je pense surtout qu'il faut transmettre via ajax la valeur de l'input "name_fichier2"
(avec un id="id_fichier2", ca irait bien...)

Code:

1
2
3
4
5
<form method="post" action="supp_essai.php">
	<input type="text" id="id_fichier2" name="name_fichier2" value="130.jpeg" />
	<input type="submit" value="Supprimer" />
</form>
<div id="reponse"></div>

Il manque "des bouts" dans ta fonction ajax...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type="text/javascript">
$(document).ready(function(){
     $('#ajax_supp').click(function(){
		var valeur2 = $('#id_fichier2').val();
		$.ajax({
			type: "POST",
			url: "supp_essai.php",
			 data: 'name_fichier2='+valeur2,
			 dataType: 'html',
			 cache: false,
			 msg: 'objet',
			success: function(msg){
				$('#reponse').val(msg);	}
			});
		});
});
</script>

Merci jreaux62,
effectivement il faut passer les infos à jquery... et la suppression se fait bien !

jquery :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <script type="text/javascript"> $(document).ready(function(){ $('#ajax_supp').click(function(){ var valeur2 = $('#id_fichier2').val(); $.ajax({ type: "POST", url: "supp_essai.php", data: 'name_fichier2='+valeur2, dataType: 'html', cache: false, msg: 'objet', success: function(msg){ $('#reponse').val(msg); } }); }); }); </script>
html :
Code:

1 2 3 4 5 6 7 <tr> <td> <input style="display:none" type="text" id="id_fichier2" name="name_fichier2" value="130.jpeg" /> <input type="submit" id="ajax_supp" value="Supprimer ?" /> </td> <textarea id="reponse"></textarea> </tr>
Par contre je n'ai plus de message de succès ou d'erreur dans le "textarea"
quand je clique sur le bouton "supprimer" et il réinitialise la page...

04/05/2012, 15h36
RunCodePhp
Salut

A mon sens il faudrait plutôt faire ceci coté jQuery : (submit au lieu de clic)

Code:

$("#ajax_supp").submit(function() {

Car ce serait un évènement à déclencher lors de la soumission du formulaire.

Puis faudrait faire un return false pour que le formulaire ne soit pas soumis, c'est jQuery qui ici s'occuperait à réaliser l'opération.
(donc empêcher le rechargement).
Code:

1 2 3 4 5 6 7 $('#ajax_supp').submit(function() { var valeur2 = $('#id_fichier2').val(); // ... Ajax etc ... return false; });
Si j'ai bien compris. ;)
04/05/2012, 15h45
fazpedro

@ RunCodePhp :

j'ai essayé :

Code:

$("#ajax_supp").submit(function() {

mais cela ne change pas :
- pas de message de succès ou d'erreur dans "reponse"...

Citation:

mais cela ne change pas

Ce n'était pas le but non plus de tenter de résoudre ce problème, mais juste suggérer de faire un code jQuery qui me semble plus logique.

Par contre tu ne dis si la page est toujours rechargée ou pas.

Mise à part ça, change tes messages de retour (les echo) dans supp_essai.php par du contenu basique, genre :
etape : A
etape : B
... etc ...
Les entités tout comme les quotes pourraient provoquer des erreurs.

Puis si tu remplace provisoirement par un alert() dans le "success", est-ce que la boite d'alerte s'affiche ?
Exemple :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <script type="text/javascript"> $(document).ready(function() { $('#ajax_supp').submit(function() { var valeur2 = $('#id_fichier2').val(); $.ajax({ // ... etc ... success: function(msg) { alert("Ok"); } }); return false; }); }); </script>

04/05/2012, 17h00
Invité

+1 RunCodePhp.

Et en enlevant :

Code:

msg: 'objet',

?
04/05/2012, 21h35
fazpedro
cela ne fonctionne pas :
- pas de message...
- la page se recharge

en enlevant le :

Code:

msg: 'objet',

=> identique..pas de message :calim2:

ou en indiquant :
Code:

1 2 success: function(msg){ alert("Ok");
=> pas de message d'alerte... :cry:

J'ai pas fais gaffe, mais j'ai dis (partiellement) une bêtise avec ce submit coté jQuery.
Que ce soit un évènement submit ça me semble toujours plus logique, donc mieux.

Cependant j'avais pas fais attention que l'ID (le #ajax_supp) vient du bouton submit.
Or, si on utilise "submit" cote jQuery il faut que ça soit au niveau du formulaire, donc de mettre un ID au formulaire et utiliser celui dans le jQuery.

Exemple :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20  <script type="text/javascript"> $(document).ready(function() { $('#ajax_form_supp').submit(function() { var valeur2 = $('#id_fichier2').val(); $.ajax({ // ... etc ... success: function(msg) { alert("Ok"); } }); return false; }); }); </script>  <form id="ajax_form_supp" ... etc ...> </form>
Si même avec ces corrections il n'y a pas d'amélioration, alors faudrait au moins vérifier si le code JS se déclenche bien lors de la validation.
Le plus simple est de supprimer provisoirement la partie Ajax, garder juste le code JS.
Exemple :
Code:

1 2 3 4 5 6 7 8  <script type="text/javascript"> $(document).ready(function() { $('#ajax_form_supp').submit(function() { alert("Ok"); }); }); </script>
Si même avec ça il n'y a pas de boite d'alerte alors il y aurait un conflit en JS par là ou un code HTML douteux par là.

04/05/2012, 22h39
fazpedro
Merci RunCodePhp,

effectivement il doit y avoir un conflit avec mes scripts car quand j'indique uniquement
Code:

1 2 3 4 5 6 7 <script type="text/javascript"> $(document).ready(function() { $('#ajax_form_supp').submit(function() { alert("Ok"); }); }); </script>
=> je n'ai pas d'alerte !

Je continue à creuser dans ce sens !
dès que j'ai trouvé, je vous redis ça ..
encore merci pour l'aide précieuse ! :ccool:
05/05/2012, 07h59
RunCodePhp

Citation:

effectivement il faut passer les infos à jquery... et la suppression se fait bien !

Je reste quand même assez étonné, car (ci-dessus) tu disais que le fichier était bien supprimé, et donc que c'était juste le message de retour (le success) qui ne se faisait pas.

Si le fichier était bien supprimé c'est qu'en bonne partie le code JS/jQuery/Ajax s'exécutait.
Donc à ce moment tu n'aurais pas autant de conflit que ça.

Du coup essai de mettre de coté mon histoire de "submit" pour revenir comme ça l'était au début (évènement click déclenché via le bouton submit #ajax_supp).
La logique veut que le fichier soit à nouveau bien supprimé, donc que ton code re-fonctionne en partie.

Il resterait à voir pourquoi tu n'a pas de retour (success).

Hello,
voici la syntaxe qui fonctionne :
Le script jQuery :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!-- Script initialisation jquery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#ajax_supp').click(function(){
		var valeur2 = $('#id_fichier2').val();
		// alert(valeur2);
		var texthtml = '';
		$.ajax({	/* Ajax avec Jquery */
			type: 'POST',
			url: 'supp_essai.php',
			data: 'name_fichier2='+valeur2,
			dataType: 'html',
			cache: false,
			success: function(texthtml) {
				// alert(texthtml);
				// affichage du résultat dans un textarea :
				$('#reponse').html(texthtml);
			}
		});
		return false;
	});
});
</script>

Le formulaire :

Code:

1
2
3
4
5
<form method="post" action="">
	<input type="text" id="id_fichier2" name="name_fichier2" value="130.jpeg" />
	<input type="submit" id="ajax_supp" value="Supprimer ?" />
</form>
<textarea id="reponse"></textarea>

PS : pour un textarea, il faut mettre : $('#reponse').html(texthtml);

Et supp_essai.php (pour mes tests) :

Code:

Le fichier à supprimer s'appelle : <?php echo $_POST['name_fichier2']; ?>

@RunCodePhp :
ça marche avec :

Code:

$('#ajax_supp').submit(function(){

SI l'identifiant est sur la balise <form> (submit : "quand on soumet le formulaire, faire ...") :

Code:

1
2
3
4
5
<form method="post" action="" id="ajax_supp">
	<input type="text" id="id_fichier2" name="name_fichier2" value="130.jpeg" />
	<input type="submit" value="Supprimer ?" />
</form>
<textarea id="reponse"></textarea>

Bonjour,

c'était le "return false" qui n'était pas au bon endroit !

voici les codes modifiés qui fonctionnent bien !

Merci de vos précieux conseils ! :ccool:

formulaire :

Code:

1
2
3
4
5
6
7
8
9
10
 
<form>
			<tr>
			<td>
			<input style="display:none" type="text" id="id_fichier2" name="name_fichier2" value="130.jpeg" />
			<input id="ajax_supp" type="submit" value="Supprimer ?" />
			</td>
			</tr>
			<textarea id="reponse"></textarea>
			</form>

code jquery :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script type="text/javascript">
$(document).ready(function(){
     $('#ajax_supp').click(function(){
	 	var valeur2 = $('#id_fichier2').val();
		$.ajax({
			type: "POST",
			url: "supp_essai.php",
			 data: 'name_fichier2='+valeur2,
			 dataType: 'html',
			 cache: false,
			 msg: 'objet',
			 success: function(msg){
				$("#reponse").show();
				$('#reponse').val(msg);	
				}
			});
		return false;
		});
});
</script>