Discussion :

[cotede2]

Bonjour , j 'aimerais implémenter un formulaire en AJAX.
Pour ce faire, deux champs : Nom et Prénom ; un bouton : Valider.
Lorsque l'on clique sur le bouton Valider , une page PHP est appelée en mode asynchrone , valide dans la base de données et
raffraichit la page en y ajoutant les Nom et Prenom.

Voici le code du formulaire sans AJAX:

Code :

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

1
2
3
4
5
6
7
 
<form action ="add_user.php" method="post">
<b>Ajouter un utilisateur: </b><br/>
Nom : <input type="text" name="nom" <br/>
Prenom : <input type="text" name="prenom" <br/>
<input type="submit" >
</form>

Avec AJAX il faudrait ajouter une fonction qui soit appelée lors de l'appui du bouton submit.

Code :

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

1
2
3
4
5
6
<form action ="" method="post">
<b>Ajouter un utilisateur: </b><br/>
Nom : <input type="text" name="nom" <br/>
Prenom : <input type="text" name="prenom" <br/>
<input type="button" onClick="ajax()>';
</form>

Cette fonction ajax() devrait avoir comme arguments le nom et prénom.
Comment faire?

Ensuite pour le reste de l'implémentation , je devrais me débrouiller.

Merci de votre temps et votre aide.

[Bovino]

Code :

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

1
2
3
Nom : <input type="text" id="nom" <br/>
Prenom : <input type="text" id="prenom" <br/>
<input type="button" onClick="ajax(document.getElementById('nom').value,document.getElementById('prenom').value)">';

[cotede2]

Ca ne marche pas correctement.
J'ai créé une fonction addUser avec une simple lecture des paramètres
passées et j'obtiens null et null.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<script language="javascript">
 
function addUser(nom,prenom) {
	alert('fonction appelée avec arguments nom= '+nom+' prenom = '+prenom);	
}
</script>
 
<form action ="add_user.php" method="post">
<b>Ajouter un utilisateur: </b><br/>
Nom : <input type="text" name="nom" <br/>
Prenom : <input type="text" name="prenom" <br/>
<input type="button" value="Ajouter utilisateur" onClick="addUser(document.getElementById('nom'),document.getElementById('prenom'))";>

[Bovino]

Code :

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

addUser(document.getElementById('nom').value,document.getElementById('prenom').value)

[cotede2]

Sous FireFox il n'affiche meme plus rien (plus d'alert)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<script language="javascript">
 
function addUser(nom,prenom) {
	alert('fonction appelée avec arguments nom= '+nom+' prenom = '+prenom);	
}
</script>
 
<form action ="add_user.php" method="post">
<b>Ajouter un utilisateur: </b><br/>
Nom : <input type="text" name="nom" <br/>
Prenom : <input type="text" name="prenom" <br/>
<input type="button" value="Ajouter utilisateur" onClick="addUser(document.getElementById('nom').value,document.getElementById('prenom').value)";>

Alors que sous IE ça marche. Comment faire?
merci

[Bovino]

Code :

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

1
2
3
Nom : <input type="text" id="nom" name="nom" /><br/>
Prenom : <input type="text" id="prenom" name="prenom" /><br/>
<input type="button" value="Ajouter utilisateur" onClick="addUser(document.getElementById('nom').value,document.getElementById('prenom').value)" />

Si tu appelles des id, essayes qu'ils soient présents dans le html et n'oublies pas de fermer les balises input.
Tu avais aussi un ';' en trop qui trainait