envoyer un formulaire sans bouton

**david42800** · 16/05/2012, 12h15

Bonjour a tous !!!

Je vous expose mon problème j'ai chercher avant de poster mais j'ai eu des éléments de réponse qui ne fonctionne pas dans mon cas.

J'ai un formulaire qui récupérer des info a partir d'une base de données.
j'utilise une méthode ajax pour envoyer le formulaire en appuyant sur le bouton sans recharger la page.

Mais je voudrais évoluer le système car le formulaire peu être très gros et appuyer a chaque fois sur le bouton envoyer peu être très long (dans le code suivant je n'affiche que l'essentiel).

je voudrais a chaque depart d'un input (onchange) je voudrais que sa actualise ma base de donner au lieu de le faire avec le bouton.

j'ai essayer avec document.getElementById("accounts_modif_form").submit(); mais sa fonctionne pas.

Voici 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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Stdict//EN" "http://www.w3.org/td/xhtml1/DTD/xhtml1-stdict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
        <title>Ceci est une page de test avec des balises PHP</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link rel="stylesheet" media="screen" type="text/css" title="snef" href="planning.css" />
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 
<!--Soumettre le formulaire sans recharger la page-->
		<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>
    </head>
    <body>
<table>
		<?php if(isset($_POST['Envoyer'])) var_dump($_POST); 
                { ?>
		<form class="monForm" method="post" action="planning_cree.php">
		<td><input type="hidden" name="ID" size="4" value="<?php echo $donnees['IdPersonne']; ?>" /></td>
		<td><input type="text" name="Nom" size="12" value="<?php echo $donnees['Nom']; ?>" /></td>
		<td><input type="text" name="Prenom" size="10" value="<?php echo $donnees['Prenom']; ?>" /></td>
		<td><input type="text" name="Interimaire" size="8" value="<?php echo $donnees['Interimaire']; ?>" /></td>
		<td><input type="text" name="Habilitation" size="8" value="<?php echo $donnees['Habilitation']; ?>" /></td>
		<td><input type="text" name="Qualification" size="2" value="<?php echo $donnees['Qualification']; ?>" /></td>
		<td><input type="text" name="Remplacement" size="1" value="<?php echo $donnees['Remplacement']; ?>" /></td>
		<td><input type="text" name="Observation" size="10" value="<?php echo $donnees['Observation']; ?>" /></td>
		<td><input type="text" name="Lundi" size="1"  /></td><!-- acualisation de la BDD apres depart du input-->
		<td><input type="text" name="Mardi" size="1"  /></td><!-- acualisation de la BDD apres depart du input-->
		<td><input type="text" name="Mercredi" size="1"/></td><!-- acualisation de la BDD apres depart du input-->
		<td><input type="text" name="Jeudi" size="1"  /></td><!-- acualisation de la BDD apres depart du input-->
		<td><input type="text" name="Vendredi" size="1"  /></td><!-- acualisation de la BDD apres depart du input-->
		<td><input type="submit" name="Envoyer" value="Envoyer" onclick="this.disabled=true;this.value='Crée'"/></td> <!-- bouton envoyer a supprimer-->
		</p>
	</form>
	<?php } ?>
	</table>
	</div>
	</div>
    </body>
</html>

Merci d'avance pour votre aide je me tien a disposition pour de plus ample information.

David

**Willpower** · 16/05/2012, 12h53

je voudrais a chaque depart d'un input (onchange) je voudrais que sa actualise ma base de donner au lieu de le faire avec le bouton.

Code :

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

$('.monForm').on('submit', function() {

->

Code :

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

$('.monForm input').on('change', function() {	// "change" ou "blur" ?

Tu devras aussi remplacer tous les $(this) par $(this).parents('form') pour envoyer le formulaire au complet. (c'est peut-être un peu lourd, vaudra mieux n'envoyer que l'info modifiée mais ça demandera quelques adaptions dans tes codes clients et serveur)

edit: tu devras aussi retourner "true" pour ne pas bloquer les actions de "change" (ou "blur") qui de toute façon ne rechargeront pas la page. ;-)

**david42800** · 16/05/2012, 14h51

Je vais regarder tous sa je te remercie de ton aide.

**david42800** · 16/05/2012, 15h02

Ca fonctionne pas je dois rajouter quelque chose au niveau de mes input comme onchange ?

envoyer un formulaire sans bouton

jQuery

Discussions similaires

Partager

Partager