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