Formulaire simple Ajax

[squal31]

Bonsoir à tous,

Impossible de faire fonctionner un formulaire en Ajax.
J'explique le fonctionnement de la page : Le haut de la page reste fixe, dans cette zone des boutons sont disponibles. Ils appellent en ajax un fichier php qui affiche en milieu de page une zone avec du texte, des images, des vidéos, ... et 2 autres boutons (ajout vidéo et ajout remarque).
C'est 2 boutons appellent eux aussi en ajax 2 fichiers php ajout_video.php et ajout_remarque.

Tout fonctionne sauf bien évidement, les 2 boutons qui appellent les fichiers ajout_vidéo.php et ajout_remarque.

J'ai testé 2 possibilités ... soit on ne rentre pas dans la fonction comme c'est le cas pour la 1ere solution (remarque), soit les données POST ne sont pas envoyé comme à la 2eme solution (video) ...

Si quelqu'un à une idée, je suis grandement preneur !
Merci d'avance ...


Voici une partie du fichier appelé en milieu de page :
1ere solution avec le formulaire remarque :

<div id="ajout_remarque"></div>
                                
                    <form id="form">
                        <input type="hidden" name="id_circuit" id="id_circuit" value="<?php echo $id_circuit; ?>" />
                        <p>J'indique une information supplémentaire ou une modif. pour ce spot :</p>
                        <textarea name="remarque" id="remarque" cols="38" rows="6"></textarea>
                        <input type="submit" id="btn_remarque" value="Indiquer" class="button" />
                    </form>

Ma fonction ajax :

$(document).ready(function(){

	$("#btn_remarque").on("click", function(e){
*************e.preventDefault();
*
************alert("La remarque : " + $("#remarque").val());
************alert("Son id : " + $("#id_circuit").val());
**************
************$.post(
****************"inc/ajout_remarque.php", // Un script PHP
****************{
********************remarque : $("#remarque").val(),
********************id_circuit : $("#id_circuit").val()
****************},
******
****************function(data){
**********************
********************alert("La valeur sélectionnée est : " + data);
**********************
********************if(data == 'Success'){
*************************$("#ajout_remarque").html("<div class='zone_ok'>Merci pour ta participation, ta remarque sera traitée au plus vite.</div>");
********************}
********************else{
*************************$("#ajout_remarque").html("<div class='zone_erreur'>Erreur !<br />Le champs doit être vide ...</div>");
********************}
****************}
*************);
	});
    				
});

2eme solution avec le formulaire vidéo :

<form id="form_video" action="#" method="post">
                        <p>Je propose une vidéo pour ce spot (copier/coller l'URL de Youtube, Viméo, Zapiks ou Dailymotion) :<br><span class="remarque">Exemple : https://www.youtube.com/watch?v=9RHS68rspb0</span></p>
                                    
                        <input type="text" name="lien_video" id="lien_video" size="38" maxlength="200" />
                        <input type="hidden" name="id_circuit" id="id_circuit" value="<?php echo $id_circuit; ?>" />
                        <input type="submit" id="btn_video" value="Proposer" onclick="ajout_video()" class="button" />
                    </form>

function ajout_video() {
	
	$("#form_video").submit(function () {
			
		alert("Coucou");
		$.post("inc/ajout_video.php",$("#form_video").serialize(),function(msg){
				
		if(msg==Success)
			{ $("div#ajout_video").html("<div class='zone_ok'>Merci pour ta participation, la vidéo sera vérifiée au plus vite.</div>");}
		else // Erreur appel login.php
			{ $("div#ajout_video").html("<div class='zone_erreur'>Erreur !<br />Soit le champs est vide, soit le lien est mauvais.</div>");}
		});
	
		return false; // ne change pas de page
	});
}

-----

[uneautreterre]

Bonjour. Il semble que tu utilises jscript. Dans ce cas il manque beaucoup de code. Difficile de te répondre !

Je vois des truc curieux comme
$("#form_video").submit(functi on (){...}

Là où je m'attendrais à voir :
$("#form_video").submit = function (){...}

Mais avec les bibliothèques, on peut voir des trucs qui semblent curieux.

Je ne sais pas comment tu débugges. Je te conseillerais d'utiliser Firefox avec l'extension Firebug qui donne souvent des messages de débuggage explicites.

[mickan]

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="ajout_remarque"></div>
    <div>
     	<form id="form">
            <input type="hidden" name="id_circuit" id="id_circuit" value="1" />
                        <p>J'indique une information supplémentaire ou une modif. pour ce spot :</p>
            <textarea name="remarque" id="remarque" cols="38" rows="6"></textarea>
            <input type="submit" id="btn_remarque" value="Indiquer" class="button" />
        </form>
    </div>                           
    <script src="jquery.js"></script>
    <script>
    	$("#btn_remarque").on("click", function(e){
			e.preventDefault();

			$.post(	
				"ajout_remarque.php", // Un script PHP
				{
					remarque : $("#remarque").val(),
					id_circuit : $("#id_circuit").val()
				},
				function(data){
					alert("La valeur sélectionnée est : " + data);
					if(data == 'Success'){
						$("#ajout_remarque").html("<div class='zone_ok'>Merci pour ta participation, ta remarque sera traitée au plus vite.</div>");
					}
					else{
						$("#ajout_remarque").html("<div class='zone_erreur'>Erreur ! Le champs doit être vide...</div>");
					}
				}
			);
		});
    </script>           
</body>
</html>

Ajout_remarque.php:

<?php 
	echo "Success";
 ?>

on peut remplacer Success par autre chose pour tester le message d'erreur

Ajouter jquery.js dans le dossier.
Tout marche bien (par contre je n'est pas tester les données)

[mickan]

Ajout_remarque.php

<?php 
	if ($_REQUEST["remarque"]=="ok")
	{
		echo "Success";
	}
	else
	{
		echo "Not Success";
	}
	
 ?>

Permet de s'assurer un mini traitement des données transmissent.

[A voir en vidéo sur Futura]