[ZF 1.11] Valider formulaire Zend avec Ajax

absot · 04/11/2011, 13h34

Bonjour, j'ai créé un formulaire Zend et je souhaiterais valider celui-ci avec l'aide de l'Ajax.

Pour faire cela, j'ai d'abord précisé dans ma méthode init de mon contrôleur, les actions qui sont susceptibles d'utiliser de l'Ajax en faisant ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
 public function init()
    {
    	$ajaxContext = $this->_helper->getHelper('AjaxContext');
        $ajaxContext->addActionContext('index', 'html')
                    ->addActionContext('add', array('html', 'json'))
                    ->initContext();
 
    	if ($this->_request->isXmlHttpRequest())
        {
        	$this->_helper->layout->disableLayout();
        }
	}

Dans mon formulaire, j'ai rajouté un attribut onclick à mon bouton submit qui appel une fonction javascript:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
$send = new Zend_Form_Element_Submit('send');
		$send->setLabel('Envoyer')
			 ->setAttrib('id', 'send')
			 ->setAttrib('onclick', 'return submitForm();');

Voici ce que fait ma méthode javascript appellée:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
function submitForm()
{
	alert("coucou");
	$.ajax(
	{
		   url: 'index/add',
	       type: "POST",
	       context: document.ajax,
	       data: {
				"format" : "html",
 
				"nom" : document.getElementById("nom").value,
				"prenom" : document.getElementById("prenom").value
				},
	       error: errorAjax,
		   dataType: "text",
		   success: function(data)
		   {
			$("#ajax").html(data);
		   }
	});
}

Et je récupère bien entendu tout ceci dans mon action appelée qui est add():

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
32
33
 
public function addAction() 
    {
    	$form = new Application_Form_User();
 
    	if ($this->_request->isXmlHttpRequest())
        {
        	if($this->getRequest()->isPost())
    		{
	    		// si contexte JSON
    			/*if($this->ajaxContext->getCurrentContext() == 'json') 
    			{
    				$this->view->result = $form->processAjax($this->request->getPost());
    			}*/
 
    			$formData = $this->getRequest()->getPost();
				if ($form->isValid($formData))
				{
					$tableau = array();
					$tableau["nom"] = $this->_getParam("nom");
					$tableau["prenom"] = $this->_getParam("prenom");
 
					$user = new Application_Model_DbTable_Users;
					$user->addUser($tableau);
				}else 
				{
					$form->populate($formData);
				}
 
        	}
        }
    	$this->view->form = $form;
    }

Le problème dans tout ceci est quand je clique sur mon bouton submit de mon formulaire, j'ai bien ma popup avec "coucou" qui apparaît et c'est tout, puis ma page se rafraîchit alors qu'elle ne devrait pas mais je ne sais pas pourquoi.. :/

Comment ca se fait svp?

Celira · 04/11/2011, 13h55

Un bouton submit envoie toujours la formulaire, sauf si tu lui indiques explicitement.
Pour éviter la soumission du formulaire, soit tu utilises un bouton button et non un submit, soit tu précises dans ta fonction js de ne pas envoyer le formulaire en faisant un return false;Ensuite pour "pister" ton ajax, tu peux utiliser des choses comme la console de firebug.

absot · 04/11/2011, 14h44

J'ai rajouté un return false à ma fonction js mais ca ne change rien, ca continue de recharger ma page automatiquement, j'ai ajouté un alert("ok"); dans ma fonction js en cas de succès mais ça ne s'affiche pas et ça n'appel pas non plus ma function errorajax en cas d'erreur, comment ca se fait?

5h4rk · 04/11/2011, 21h56

Donne nous le code modifié

absot · 20/11/2011, 22h32

Désolé de ne répondre que maintenant mais j'ai été occupé ces derniers temps.

J'ai fais des tests en enlevant les décorateurs et en mettant ceux que je veux, j'ai réussi à obtenir ce que je voulais, je mets à disposition mon code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
 
<?php
 
class form extends Zend_Form
{
	public function __construct($options = null)
    {
        parent::__construct($options);
 
        $id = new Zend_Form_Element_Hidden('id');
 
        $champ1 = new Zend_Form_Element_Text('champ1');
        $champ1->setLabel('Champ 1 : ')
				// obligatoire
                ->setRequired(true)
                // enlève code HTML
				->addFilter('StripTags')
                // suprimme les espaces
				->addFilter('StringTrim')
                // non vide
				->addValidator('NotEmpty')
				->setAttrib('size', '12')
				->setDecorators(array('ViewHelper', 'Description',  'Label'));
 
       	$champ2 = new Zend_Form_Element_Text('champ2');
		$champ2->setLabel('Champ 2 : ')
				// obligatoire
				->setRequired(true)
				// enlève code HTML
				->addFilter('StripTags')
				// supprimer les espaces
				->addFilter('StringTrim')
				// non vide
				->addValidator('NotEmpty')
				->setAttrib('size', '12')
				->setDecorators(array('ViewHelper', 'Description',  'Label'));
 
		$champ3 = new Zend_Form_Element_Text('champ3');
		$champ3->setLabel('Champ 3 : ')
				// obligatoire
				->setRequired(true)
				// enlève code HTML
				->addFilter('StripTags')
				// supprimer les espaces
				->addFilter('StringTrim')
				// non vide
				->addValidator('NotEmpty')
				->setAttrib('size', '12')
				->setDecorators(array('ViewHelper', 'Description',  'Label'));
 
		$champ4 = new Zend_Form_Element_Text('champ4');
		$champ4->setLabel('Champ 4 : ')
				// obligatoire
				->setRequired(true)
				// enlève code HTML
				->addFilter('StripTags')
				// supprimer les espaces
				->addFilter('StringTrim')
				// non vide
				->addValidator('NotEmpty')
				->setAttrib('size', '12')
				->setDecorators(array('ViewHelper', 'Description',  'Label'));
 
		// Zend_Debug::dump($champ4->getDecorators());
 
        $envoyer = new Zend_Form_Element_Submit('boutonenvoyer');
        $envoyer->setLabel(utf8_encode('Valider'));
 
        $this->addElements(array($id, $champ1, $champ2, $champ3, $champ4, $envoyer));
    }
}

Et le visuel qui va avec:

5h4rk · 21/11/2011, 23h23

C est le JS que je veux

absot · 22/11/2011, 12h22

Je mets tout le code mais il n'y a pas de JavaScript:
formulaire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
 
<?php
 
class form extends Zend_Form
{
	public function __construct($options = null)
    {
        parent::__construct($options);
 
        $id = new Zend_Form_Element_Hidden('id');
 
        $champ1 = new Zend_Form_Element_Text('champ1');
        $champ1->setLabel('Champ 1 : ')
				// obligatoire
                ->setRequired(true)
                // enlève code HTML
				->addFilter('StripTags')
                // suprimme les espaces
				->addFilter('StringTrim')
                // non vide
				->addValidator('NotEmpty')
				->setAttrib('size', '12')
				->setDecorators(array('ViewHelper', 'Description',  'Label'));
 
       	$champ2 = new Zend_Form_Element_Text('champ2');
		$champ2->setLabel('Champ 2 : ')
				// obligatoire
				->setRequired(true)
				// enlève code HTML
				->addFilter('StripTags')
				// supprimer les espaces
				->addFilter('StringTrim')
				// non vide
				->addValidator('NotEmpty')
				->setAttrib('size', '12')
				->setDecorators(array('ViewHelper', 'Description',  'Label'));
 
		$champ3 = new Zend_Form_Element_Text('champ3');
		$champ3->setLabel('Champ 3 : ')
				// obligatoire
				->setRequired(true)
				// enlève code HTML
				->addFilter('StripTags')
				// supprimer les espaces
				->addFilter('StringTrim')
				// non vide
				->addValidator('NotEmpty')
				->setAttrib('size', '12')
				->setDecorators(array('ViewHelper', 'Description',  'Label'));
 
		$champ4 = new Zend_Form_Element_Text('champ4');
		$champ4->setLabel('Champ 4 : ')
				// obligatoire
				->setRequired(true)
				// enlève code HTML
				->addFilter('StripTags')
				// supprimer les espaces
				->addFilter('StringTrim')
				// non vide
				->addValidator('NotEmpty')
				->setAttrib('size', '12')
				->setDecorators(array('ViewHelper', 'Description',  'Label'));
 
		// Zend_Debug::dump($champ4->getDecorators());
 
        $envoyer = new Zend_Form_Element_Submit('boutonenvoyer');
        $envoyer->setLabel(utf8_encode('Valider'));
 
        $this->addElements(array($id, $champ1, $champ2, $champ3, $champ4, $envoyer));
    }
}
 
$this->setDecorators(array(array('ViewScript', array('viewScript' => 'index/form-athena.phtml'))));

vue

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<form action="<?=$this->element->getAction()?>" method="<?=$this->element->getMethod()?>">
<table>
	<tr>
		<td><?php echo $this->element->getElement('champ1')->render(); ?></td> 
		<td><?php echo $this->element->getElement('champ2')->render(); ?></td>
	</tr>
		<td><?php echo $this->element->getElement('champ3')->render(); ?></td>
		<td><?php echo $this->element->getElement('champ4')->render(); ?></td>
	<tr>
	<tr>
		<td></td>
		<td><?php echo $this->element->getElement('send')->render(); ?></td>
	</tr>
</table>
 
</form>

04/11/2011, 13h55	#2
Celira Modératrice Développeuse PHP/Java Inscription : avril 2007 Messages : 3 661 Détails du profil Informations personnelles : Sexe : Âge : 27 Localisation : France Informations professionnelles : Activité : Développeuse PHP/Java Informations forums : Inscription : avril 2007 Messages : 3 661 Points : 5 388 Points : 5 388	Un bouton submit envoie toujours la formulaire, sauf si tu lui indiques explicitement. Pour éviter la soumission du formulaire, soit tu utilises un bouton button et non un submit, soit tu précises dans ta fonction js de ne pas envoyer le formulaire en faisant un return false;Ensuite pour "pister" ton ajax, tu peux utiliser des choses comme la console de firebug. __________________ Modératrice PHP Aucun navigateur ne propose d'extension boule-de-cristal : postez votre code et vos messages d'erreurs. (Rappel : "ça ne marche pas" n'est pas un message d'erreur) Pour afficher votre code en couleurs : [CODE=php][/CODE] (bouton # de l'éditeur)
	00

04/11/2011, 14h44	#3
absot Nouveau Membre du Club Inscription : février 2009 Messages : 261 Détails du profil Informations forums : Inscription : février 2009 Messages : 261 Points : 30 Points : 30	J'ai rajouté un return false à ma fonction js mais ca ne change rien, ca continue de recharger ma page automatiquement, j'ai ajouté un alert("ok"); dans ma fonction js en cas de succès mais ça ne s'affiche pas et ça n'appel pas non plus ma function errorajax en cas d'erreur, comment ca se fait?
	00

04/11/2011, 21h56	#4
5h4rk Modérateur Loïc Développeur Web Inscription : février 2011 Messages : 680 Détails du profil Informations personnelles : Nom : Loïc Âge : 26 Localisation : France, Hérault (Languedoc Roussillon) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : février 2011 Messages : 680 Points : 1 044 Points : 1 044	Donne nous le code modifié
	00

21/11/2011, 23h23	#6
5h4rk Modérateur Loïc Développeur Web Inscription : février 2011 Messages : 680 Détails du profil Informations personnelles : Nom : Loïc Âge : 26 Localisation : France, Hérault (Languedoc Roussillon) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : février 2011 Messages : 680 Points : 1 044 Points : 1 044	C est le JS que je veux
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email