Valider formulaire Zend avec Ajax

Version imprimable

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:

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:

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:

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:

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?

04/11/2011, 13h55
Celira

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.
04/11/2011, 14h44
absot

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?
04/11/2011, 21h56
5h4rk

Donne nous le code modifié

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:

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:
http://nsa28.casimages.com/img/2011/...4040605667.png

21/11/2011, 23h23
5h4rk

C est le JS que je veux

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

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
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:

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>