Changer la value d'un input pour envoyer 2 actions diff�rentes

**modus57** · 02/04/2018, 23h36

Bonsoir,

Je reviens � nouveau dans ce forum, pour un cas particulier concernant un formulaire qui contient un input text nomm� "nouveau".

Dans le principe je souhaiterai vider les champs du formulaire lorsqu'un utilisateur clic sur l'input "nouveau", le texte de cet input change et devient " annuler, s'il clic sur ce m�me input �a r�initialise le formulaire.

Voici mon bout de 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
<script>
function clearForm(oForm){
var frm_elements = oForm.elements;
   for (i = 0; i < frm_elements.length; i++){
      field_type = frm_elements[i].type.toLowerCase();
      switch (field_type){
      case "text":
      frm_elements[i].value = "";
      break;
   }
}
</script>
<form id="form" name="form" method="post" action="#" >	 
   <input type="text" name="nouveau" id="nouveau" value="Nouveau" onclick="clearForm(form); javascript:document.getElementById('nouveau').value='Annuler'"/>
   <input type="reset" name="reset" id="reset" value="Annuler" />
</form>
if(isset($_POST['nouveau'])){
   foreach($_POST as $index => $valeur){
      if ($index = 'Nouveau' ){
         . . .
      }else{
        . . .
      }
   }
}

C'est peut-�tre simple, mais comment traiter la boucle pour arriver � un r�sultat satisfaisant.

Merci d'avance pour votre nouvelle contribution.

Invit� · 03/04/2018, 08h13

Bonjour,

� quoi ce monstre peut-il bien servir ??

D'autant de tu as, en plus, un bouton "reset"...

**modus57** · 03/04/2018, 10h27

Bonjour jreaux62

En effet il �tait tard, je n'ai pas corrig� mon post et j'ai oubli� d'effacer la ligne

:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

<input type="reset" name="reset" id="reset" value="Annuler" />

Le but recherch� c'est d'utiliser un seul bouton pour 2 actions :

1 - Au premier clic sur le bouton "Nouveau" le texte change et devient "Annuler" et tous les champs du formulaire sont effac�s, afin de saisir des nouvelles donn�es � ins�rer dans la table.

2 � Un nouveau clic sur ce m�me bouton, le texte change et devient "Nouveau" et tous les champs du formulaire sont simplement r�initialis�s.

Je commence � utiliser JS, ma question : est-ce possible, sinon comment cl�turer cette discussion ?

Invit� · 03/04/2018, 11h04

Inutile de recopier ton 1er message... On a compris.

Ce que je ne comprends pas, c'est "quel int�r�t ???"

L�, ton formulaire n'a m�me pas de champs � r�cup�rer !
Comment esperes-tu re-affecter des valeurs � des champs inexistants...
Fais au moins un exemple "concret".

Si c'est juste pour t'exercer au JavaScript, fais-le sur un exemple simple, concret (qu'on peut tester) et... utile.

**modus57** · 05/04/2018, 20h09

Bonsoir,

Voici un exemple qui fonctionne avec un bouton "Effacer" et un bouton "Reset".

Code html :

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
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE HTML>
 
<html>
<head>
	<?php
        // Connexion à la base de données
        include'conexion_ma_table.php';
        ?>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<meta charset="UTF-8">
	<title>Changer la value d'un input pour envoyer 2 actions différentes</title>
	<style>
        </style>
	<script>
                function clearForm(oForm){
                        var frm_elements = oForm.elements;
                        for (i = 0; i < frm_elements.length; i++){
                                field_type = frm_elements[i].type.toLowerCase();
                                switch (field_type){
                                        case "text":
                                        frm_elements[i].value = "";
                                        break;
                                }
                        }
                }
        </script>
</head>
<body>
	<form name="form1" id="form1" action="#" method="post">	
		<input type="text" name="recherche" placeholder="Saisir le mot clé et appuyer sur entrée" style="width:192px; font:bold 12px Calibri"/>
		<?php
                $varlike = @$_POST['recherche'];        
                ?>
 
		<input type='submit' name='valider' value='Sélectionner'  style="width:100px"><br>		
		<select name="nom" type="text" size="1" length="4" style="width:198px">
			<?php
                        $lignes = $bdd->query("SELECT id, nom, prenom FROM ma_table WHERE nom LIKE '".$varlike."' ORDER BY nom ASC, prenom ASC");
                        $selected = isset( $_GET['nom'] ) ? $_GET['nom'] : "" ;
                        $selectedValue = 'selected="selected"';
                        
                        ?><option value="">Sélectionner un adhérent</option><?php
                        while($ligne=$lignes->fetch()){
                                ?>
				<option value ="<?php echo $ligne[0]; ?>"><?php echo 'ID ' .$ligne[0]." : ".$ligne[1]." ".$ligne[2];?></option>
				<?php                           
                        }
                        ?>           
		</select>
 
		<input type="submit" name="valider" value="Valider" style="width:100px" /><br>
		<?php
                @$idchoix = @$_POST['nom'];
                ?>	
 
		<?php
                if (!empty($_POST['recherche']) and strpos($_POST['recherche'], '%') == false){
                        $sql = $bdd->prepare("SELECT * FROM ma_table WHERE nom ='$varlike'");
                        $sql->execute();
                        $count = $sql->rowCount();
                        if ($count == 0){
                                echo '<script>alert("1. L\'adhérent n\'existe pas !");</script>';
                        }
                }
                if (empty($_POST['recherche']) and !empty($idchoix)){
                        // Chargement des informations dans les champs du formulaire
                        $req = $bdd->query("SELECT * FROM ma_table WHERE ID = '$idchoix' ORDER BY nom ASC, prenom ASC");        
                        $data = $req->fetch(PDO::FETCH_ASSOC);
                        
                        // Boucle sur les champs de la table pour afficher les données dans les champs du formulaire
                        echo '<table style="margin-top:5px">';
                                foreach($data AS $key=>$value){
                                                echo '<tr><td for="' . $key . '">' . ucfirst($key) . '</td></font><td> <input type="text" style="width:222px" name="' . $key. '" value="' . $value . '" id="' . $key . '"><tr><td>';
                                }
                        echo '</table>';
                }
                ?>
		<input type="text" name="effacer" id="effacer" value="Effacer" onclick="clearForm(form1);javascript:document.getElementById('effacer').value='Effacer'" style="width:80px; height:15px; text-align:center" />
 
		<input type="reset" name="reset" id="reset" value="Reset" style="width:80px; text-align:center" />
	</form>
</body>
</html>

Au clic sur le bouton "Effacer" et tous les champs du formulaire sont effac�s, afin de saisir des nouvelles donn�es � ins�rer dans la table.

Un clic sur le bouton "Reset" et tous les champs du formulaire sont simplement r�initialis�s.

Ce que je cherche � faire c'est d'utiliser un seul bouton pour ces 2 actions.

**modus57** · 09/04/2018, 11h26

Bonjour,

Je pers�v�re et progresse dans mon apprentissage de JavaScript, voil� le code que j'ai pondu :

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
<script>
function clearForm(oForm){
    var frm_elements = oForm.elements;
    for (i = 0; i < frm_elements.length; i++){
	field_type = frm_elements[i].type.toLowerCase();
	switch (field_type){
	    case "text":
		frm_elements[i].value = "";
		break;
        }
    }
}
 
function bascule() {
    if ( (document.forms.form1.zonetext.value !="Reset")){
	document.getElementById('zonetext').value = "Reset";
	//déclencher une fonction JavaScript
	onclick = clearForm(form1);	
    }else{
	document.getElementById('zonetext').value = "Effacer";
	onClick = this.form.reset();
    }
}</script>

Dans le formulaire :

Code html :

S�lectionner tout - Visualiser dans une fen�tre � part

<input type="button" name="zonetext" id="zonetext" value="Effacer" onClick="bascule()" />

Il permet au clic de modifier le texte "Effacer" qui devient "Reset" et tous les champs du formulaire sont effac�s.

Au nouveau clic le texte "Reset" change et devient "Effacer" et tous les champs du formulaire devraient simplement se r�initialis�s, mais l� pourquoi �� fonctionne pas.

Changer la value d'un input pour envoyer 2 actions diff�rentes

JavaScript

Discussions similaires

Partager

Partager