Utiliser le 2e submit quand on appuie sur entrée

Version imprimable

23/07/2015, 11h01
Arendelle

Utiliser le 2e submit quand on appuie sur entrée

Salutation à tous!!

J'ai un problème sur mon formulaire, j'ai 4 boutons submit. Le 1er sert à ajouter une ligne dans un tableau, le 2e à valider tout le formulaire, le 3e pour annuler et le 4e pour terminer. Je me suis aperçu que lorsque j'appuie sur entrée n'importe ou dans mon formulaire il prend le 1er submit alors qu'il faudrait prendre le 2e. Je me suis renseigné dessus et c'est normal sur les navigateur. J'ai donc essayé de voir si en javascript lorsque l'on appuie sur la touche entrée c'est le 2e submit qui s’exécute et pas le 1er. voici ce que j'ai fait:

Code:

<form id="form_dm" method='post' onsubmit=' ' onkeypress="if(event.keyCode==13){document.getElementById('submit_encour_mod').focus();}" action="#" enctype="multipart/form-data">

Ca pourrai marcher car lorsque j'appuie sur entrée il met le focus sur mon 2e submit mais il appuie quand même sur le 1er. Y a t il un moyen de faire se que je veux ? Si quelqu'un pouvais m'aider je l'en remercie d'avance!
23/07/2015, 11h13
kevin.cousin
Bonjour,

Pour annuler ce comportement il faut que tu mettes l'action submit uniquement sur le deuxième bouton.

Pour résumer, voici comment tu dois déclarer tes boutons :
Code:

1 2 3 4 5 <input id="btn1" type="button" /> <input id="btn2" type="submit" /> <input id="btn3" type="button" /> <input id="btn4" type="button" />
23/07/2015, 11h19
Arendelle

Merci beaucoup de ta réponse! Malheureusement c'est pas possible car chacun de mes boutons font tous des action différentes avec le PHP comme ceci:

Code:

if (isset($_POST['submit_annuler'])) { }

Et mes 2 premier submit gèrent des fichier et si je transforme le 1er submit en bouton je devrai passer par javascript et il est impossible de gérer les fichiers avec javascript (surtout lorsque l'on insère dans une BDD). Je ne peux pas du tout inverser les deux submit pour une question de lisibilité et d'ergonomie. Je suis vraiment bloqué...

Dans ce cas il faut que tu gardes ma solution mais que tu ajoutes du javascript aux boutons qui ne doivent pas valider de formulaire.

Quelque chose comme ceci

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<form id="myForm" method="post" action="">
    <input id="btn1" value="btn1" type="button" onclick="submit('action1')"/>
    <input id="btn2" value="btn2" type="submit" />
    <input id="btn3" value="btn3" type="button" onclick="submit('action2')"/>
    <input id="btn4" value="btn4" type="button" onclick="submit('action3')"/>
</form>
<script>
function submit(action) {
    form = document.getElementByTagName("form");
    form.insertAdjacentHTML("beforeend", "<input type='hidden' name='" + action + "' />");
    form.submit();
}
</script>

Ca ma l'air pas mal! Mais tu crois que ça va exécuter mon code php contenu dans se type de condition:

Code:

1
2
3
if (isset($_POST['submit_annuler'])) { 
//action lorsque je clique sur le submit annuler
}

???

Et tu pourrai m'expliquer ta fonction javascript ? Car je comprends pas tout désolé.

Voici mon 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
<form id="form_dm" method='post' onsubmit='' onkeypress="if(event.keyCode==13){document.form_dm.submit()}" action="#" enctype="multipart/form-data"><?php   
                                        
                                        if($droit_crea_mod_besoin_appro){
                                        // Information Générales
                                        include("formulaire/info_general/info_general_mod.php");
                                        }?>
					<br class="br"/>
					<?php 
                                        if($droit_gestion_elmt_commande){
                                        // Définition des devis
                                        include("formulaire/def_devis/def_devis_mod.php"); 
                                        }?>
					<br class="br"/><?php 
                                        // Les fichiers 
                                        //include("formulaire/fichier/fichier_mod.php");?>
					<br class="br"/>
					<?php 
                                        if($droit_crea_mod_rec_composant){
                                        // Reception
                                         include("formulaire/reception_lot/reception_lot_mod.php");
                                         }?>
					<br class="br"/>
					<?php
                                        // Marquage
                                        // include("formulaire/marquage/marquage_mod.php");?>	
					<br class="br"/>
					<?php
                                        // Commande
                                        // include("formulaire/commande/commande_mod.php");?>
					<br class="br"/>
						<fieldset class="fs couleur4" >
							<legend class="fs_legende">Suivi de modification</legend>
							<div style="float:left;">
								<label for="com_suivi" class="label4">Objet de la modification</label><br class="br"/>
								<textarea id="com_suivi" name="com_suivi" rows="7" cols="30" class="textarea_3" type="text" ></textarea>
								<br class="br"/>
 
									<button id="submit_encour_mod" name="submit_encour_mod" formnovalidate type="submit" class="bouton_1 couleur16">Valider les modifications</button>
									<button id="submit_encour_annule" name="submit_encour_annule" type="submit" class="bouton_1 couleur16">Annuler l'en cours</button>
									<?php if($droit_spe_val_en_cours){?>
									<button id="submit_encour_termine" name="submit_encour_termine" type="submit" class="bouton_1 couleur16">Terminer l'en cours</button>
									<?php }?>
 
								</div>
								</div>
						</fieldset><?php
                                        
                                        echo "<br class='br'/>";
                                        include("formulaire/suivi/suivi.php");
                                        ?>
 
				</form>

Pour info mon 1er submit est inclu dans cette page:

Code:

include("formulaire/reception_lot/reception_lot_mod.php");

23/07/2015, 14h05
kevin.cousin

Le bout de js ajoute un champ caché au formulaire du nom de ton bouton puis submit le formulaire.

Donc tu auras la variable post correspondante ($_POST['submit_annuler'])
23/07/2015, 14h14
Arendelle
Ah d'accord encore merci pour ton aide. Mais cette condition:
Code:

1 2 3 if (isset($_POST['submit_annuler'])) { //action lorsque je clique sur le submit annuler }
Ne marche qu'avec des submit et ça va vraiment marcher pour un bouton ? Car j'ai fait des test de mon coté avec un simple bouton (sans ton code pour le moment) et la condition ne marche pas.
23/07/2015, 14h29
kevin.cousin

C'est la raison pour laquelle j'ajoute un champ de type hidden avec le nom de l'action.

Code:

form.insertAdjacentHTML("beforeend", "<input type='hidden' name='" + action + "' />");

C'est cette ligne de code qui va permettre de retrouver ton $_POST["submit_annuler") après envoi du formulaire.
23/07/2015, 14h45
Arendelle

Ah c'est vraiment bien fait!! Du coup peu importe si je clique normalement sur mon bouton annuler il exécutera la condition qui a été écrite pour lui :). Et si j'appuie sur entrée il fera que le seul submit :). Je test ça demain et je te tiens au courant! Encore merci et je te dit demain si ça fonctionne ou pas. ;)

Encore une dernière question: cette ligne:

Code:

<input id="btn1" value="btn1" type="button" onclick="submit('action1')"/>

"action1" je laisse comme ça ? Ou je met par exemple "submit_annuler" qui correspond à l'action à exécuter ?
23/07/2015, 15h10
kevin.cousin

C'était bien sur des exemples, il faut que tu adaptes à ta situation, donc que tu remplaces par "submit_annuler"

Bonjour,
il faut effectivement, dans ton cas annihiler la touche ENTER sur les éléments autres que les INPUT type="submit", il existe monstre fonction en voilà une

Code:

1
2
3
4
5
6
7
8
9
10
11
12
document.forms[0].onkeydown = function( e){   // si une seul FORM dans le document
  var e = e || window.event,
      src = e.target || e.srcElement
      enter = (e.keyCode || e.which || e.charCode || 0) === 13;
  // annule entrée si pas SUBMIT
  if( enter && src.type !== 'submit'){
    e.returnValue = false;
    if (e.preventDefault) {
      e.preventDefault();
    }
  }
}

Il existe un moyen bien simple de savoir quel "submit" a été actionné, c'est en lui mettant un name, dans ce cas celui ci est également soumis, sentant pas les autres donc pas de soucis de récupération coté serveur et pas de champ supplémentaire à créer.

Pour exemple :

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
<!DOCTYPE HTML>
<html>
<head>
<title>Enter dans FORM</title>
<meta charset="UTF-8">
</head>
<body>
<form action="action.php">
  <input type="text" name="data">
  <input type="submit" name="btn_valider" value="Valider">
  <input type="submit" name="btn_supprimer" value="Supprimer">
  <input type="submit" name="btn_annuler" value="Annuler">
</form>
<script>
document.forms[0].onkeydown = function( e){
  var e = e || window.event,
      src = e.target || e.srcElement
      enter = (e.keyCode || e.which || e.charCode || 0) === 13;
  // annule entrée si pas SUBMIT
  if( enter && src.type !== 'submit'){
    e.returnValue = false;
    if (e.preventDefault) {
      e.preventDefault();
    }
  }
}
</script>
</body>
</html>

23/07/2015, 20h16
Arendelle

Merci pour ton aide c'est vraiment mais vu que j'ai déjà 4 submit et donc pour les autres élements ce n'est pas grave pour la touche enter mais c'est le 1er submit qu'il faut ignorer avec la touche enter et que ce soit le 2e. Ou alors j'ai peut ètre mal compris se que tu dit. Avec ta solution on peux supprimer la touche enter avec le nom du 1er submit ? Avec ta fonction javascript ?
25/07/2015, 14h21
NoSmoking

Si ton soucis et de ne pas "submiter" ton 1st type="submit" alors
- supprime le physiquement ou via un display:none ou visibility:hidden.
- met le en disable.
- change le de position pour qu'il ne soit plus le 1st.