[AJAX] onchange + ajax

Version imprimable

Bonjour,

Je vous expose mon problème:

J'utilise ajax pour pouvoir envoyer un formulaire sans recharger la page j'utilise se code la :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script language="JavaScript">
			$(document).ready(function() {
			// lorsque je soumets le formulaire
			$('.monForm').on('submit', function() {		
            // appel Ajax
            $.ajax({
                url: $(this).attr('action'), // le nom du fichier indiqué dans le formulaire
                type: $(this).attr('method'), // la méthode indiquée dans le formulaire (get ou post)
                data: $(this).serialize(), // je sérialise les données (voir plus loin), ici les $_POST
                success: function(html) { // je récupère la réponse du fichier PHP
                //alert(html); // j'affiche cette réponse
                }
            });
        return false; // j'empêche le navigateur de soumettre lui-même le formulaire
		});
	});
		</script>

Quand je l'utilise avec un bouton sa marche sans probleme:

Code:

1
2
3
4
 
<form class="monForm" method="post" action="planning_cree.php">
<input type="submit" name="Envoyer" value="Envoyer" onclick="this.disabled=true;this.value='Crée'"/> 
</form>

Âpres j'ai décider de remplacer le bouton par un input de type texte qui utiliserais l’événement onChange

Code:

1
2
3
4
 
<form class="monForm" method="post" action="planning_cree.php">
<input type="text" name="Lundi" size="1" onchange="submit();" value="<?php echo $donnees2['Lundi']; ?>" />
</form>

Mais la sa m'ouvre la page planning_cree.php je voudais savoir se que je dois modifier sur le code ajax pour que sa n'ouvre pas la page planning_cree.php.

Merci D'avance !!!

23/05/2012, 10h41
Bovino

Oui, c'est normal, l'événement submit n'est pas déclenché si la soumission du formulaire se fait par programmation (méthode submit()). ;)

La solution serait de mettre le code à lancer dans une fonction indépendante que tu pourrais appeler sur le onchange de ton champ et sur le onsubmit du formulaire.
23/05/2012, 10h51
david42800

Merci de ta réponse Bovino ;)

Est'il possible de remplacer le submit(); par autre chose pour que sa appelle mon code en AJAX ?
23/05/2012, 10h57
Bovino

Citation:

Envoyé par Bovino

La solution serait de mettre le code à lancer dans une fonction indépendante que tu pourrais appeler sur le onchange de ton champ et sur le onsubmit du formulaire.

:)

J'ai fait sa :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
		function requete() {
			// lorsque je soumets le formulaire
			$('.monForm').on('submit', function() {		
            // appel Ajax
            $.ajax({
                url: $(this).attr('action'), // le nom du fichier indiqué dans le formulaire
                type: $(this).attr('method'), // la méthode indiquée dans le formulaire (get ou post)
                data: $(this).serialize(), // je sérialise les données (voir plus loin), ici les $_POST
                success: function(html) { // je récupère la réponse du fichier PHP
                //alert(html); // j'affiche cette réponse
                }
            });
        return false; // j'empêche le navigateur de soumettre lui-même le formulaire
		});
	}
		</script>

et j'ai appeler la fonction ici :

Code:

1
2
3
4
 
<form class="monForm" method="post" action="planning_cree.php">
<input type="text" name="Lundi" size="1" onchange="submit();" value="<?php echo $donnees2['Lundi']; ?>" />
</form>

Mais cela ne marche pas :cry:

Peut tu éclairer ma lanterne stp :ccool:

23/05/2012, 11h22
Bovino
Ce n'est pas dans la fonction qu'il faut assigner les événements !
Code:

1 2 3 4 5 function requete() { // ... } $('.monForm').on('submit', requete); $('.monInput').on('change', requete);
En ajustant bien sûr la classe de ton input.
23/05/2012, 11h43
david42800

Je me suis pas tromper dans l’appelle dans le onchange ?

Code:

onchange="requete();"
23/05/2012, 11h51
Bovino

Non, pas forcément, mais quitte à utiliser jQuery, autant le faire jusqu'au bout et d'autre part il est préférable de séparer le JavaScript du HTML.
23/05/2012, 12h02
david42800

Je vais tenter de me débrouiller avec tout ces éléments merci !!
23/05/2012, 14h26
david42800
Citation:
Envoyé par Bovino

Ce n'est pas dans la fonction qu'il faut assigner les événements !

Code:

1 2 3 4 5 function requete() { // ... } $('.monForm').on('submit', requete); $('.monInput').on('change', requete);

En ajustant bien sûr la classe de ton input.
Je dois bloquer sur un truc j'ai ajuster mon code en mettant comme tu ma dit c'est a dire de séparer l'assignement des événements de la fonction.
je l'est mi juste apres mais je sais pas si c'est la bonne place je suis assez perdu :? .
je pense qu’après sa je vais toucher au but.

Hello,

de mon coté j'utilise quelque chose du genre :

Code:

1
2
3
<form id="monFormXX" name="monFormXX" class="monForm" method="post" action="planning_cree.php">
<input type="text" name="Lundi" size="1" value="<?php echo $donnees2['Lundi']; ?>" onchange="return Ma_Fonction('Ma_variable_pour_page_ajaxphp') />
</form>

* Ma_variable_pour_page_ajaxphp : me sert pour la page PHP consultée par l'ajax dans laquelle j'ai un SWITCH au cas par cas.

et

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<script type="text/javascript">
// ma fonction + variable qui me servira a choisir un cas de figure dans mon 'x_data.inc.php' 
function Ma_Fonction(Ma_variable_pour_page_ajaxphp_value1) { 
	// je récupère (1 à 1 ?) les valeurs souhaitées de mon form
	var Lundi = document.forms["monFormXX_product"].Lundi.value ; // Nottons que mon form html est nommé "monFormXX"
	var idproduct_type_autrechamps = document.forms["monFormXX_product"].idproduct_type_autrechamps.value ; // n'existe pas dans ce form ci
	// l'ajax
	$.ajax({
		type: "POST",
		dataType: "json",
		url: "module/x_data.inc.php",
		data: "Lundi="+Lundi+"&Ma_variable_pour_page_ajaxphp="+Ma_variable_pour_page_ajaxphp+"&idproduct_type_autrechamps="+idproduct_type_autrechamps+"&idproduct_type_autrechamps2="+idproduct_type_autrechamps2,
		success: function(json){
			$("#foundcount").empty().append(json.foundcount);
			document.getElementById('divresult').style.display = "block";
		}
	});
	return false;
}
</script>

dans lequel

Code:

data: "Lundi="+Lundi+"&function_ajax="+function_ajax+"&idproduct_type_autrechamps="+idproduct_type_autrechamps+"&idproduct_type_autrechamps2="+idproduct_type_autrechamps2,

on met toutes les variables à faire passer vers le php/ajax (module/x_data.inc.php dans mon cas)

Code:

$("#foundcount").empty().append(json.foundcount);

* parce que j'ai une élément html nommé "foundcount" que je vide et rerempli par les nouvelles infos passée par la variable json "foundcount"

Code:

document.getElementById('divresult').style.display = "block";

Parce que dans mon cas le résultat allume un <div>

Notons que les variables "json.mavariable" peuvent contenir à peu près ce que l'on veut ('1' ou une array ou le contenu de toute une page web ou ...)

et aussi une page "module/x_data.inc.php"

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
25
26
27
28
29
30
31
 
<?php
switch ($_POST['Ma_variable_pour_page_ajaxphp']) {	
	### exemple avec le truc de Lundi ###
	case "Ma_variable_pour_page_ajaxphp_value1":
		/*
			if while else for each DB querry etc...
			Qui nous permettent d'obtenir ce que l'on recherche
		*/
		$foundcount = ''; # contenu a remplir
		$settings = array('foundcount' => $foundcount);
		echo json_encode($settings);
		/* } a supprimer ici */
	break;
	#/ ## exemple avec le truc de Lundi ###
	### exemple avec plusieurs variables en retour ###
	case "product_search":
		/*
			if while else for each DB querry etc...
			Qui nous permettent d'obtenir ce que l'on recherche
		*/
		$result_to_echo = ''; # contenu a remplir
		$refine_section = ''; # contenu a remplir
		$foundcount = ''; # contenu a remplir
		$settings = array('result_table' => $result_to_echo, 'refine_section' => $refine_section, 'foundcount' => $foundcount);
			echo json_encode($settings);
		/* } a supprimer ici */
	break;
	#/ ## SEARCH FOR FILE in REFINE ###
}
?>

En espérant avoir aidé
Pat

25/05/2012, 07h38
david42800

Merci de ton aide je vais regarder tous sa :ccool:
25/05/2012, 14h52
cholopat

Hello,

j'ai légérement corrigé le code de ce que j'avais publié hier.

un autre détail :

Code:

<form id="monFormXX" name="monFormXX" class="monForm" method="post" action="planning_cree.php">

il n'y a aucune utilité à mettre : action="planning_cree.php"
donc

Code:

<form id="monFormXX" name="monFormXX" class="monForm" method="post">

Bonne journée
Pat

Bonjour,

Je revien vers vous car je suis dans l'impasse
j'ai bien fait comme Bovino ma conseiller j'ai fait deux fonction independante.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script language="javascript" type="text/javascript">
		$(document).ready(function() {
		function requete() {
	$.ajax({
                url: $(this).attr('action'), // le nom du fichier indiqué dans le formulaire
                type: $(this).attr('method'), // la méthode indiquée dans le formulaire (get ou post)
                data: $(this).serialize(), // je sérialise les données, ici les $_POST
                success: function(html) { // je récupère la réponse du fichier PHP
                //alert(html); // j'affiche cette réponse
                }
}
$('.monForm').on('submit', requete);
$('.monInput').on('change', requete);
});
		</script>

Mais lors de l'appelle de ceux ci sa ne fonctionne toujours pas j'ai essayer de chercher mais en vain.

Code:

1
2
3
<form class="monForm" method="post" action="planning_detail_cree.php">
<td><textarea style="resize: none;" name="lundiAM" class="monInput"><?php echo $donnees3['LieuLuAM']; ?></textarea></td>
</form>

Merci d'avance !!!