Activer/Désactiver un boutton si les champs d'un formulaire sont vides

**JackSteller** · 03/01/2019, 00h45

Bonjour a tous

Alors voila j'ai regardé sur les forums mais je n'ai pas trouvé de sujet similaire au mien

Comme je m'explique, j'ai créé un formulaire de réservation pour une soirée avec des entrées dynamiques à sélectionner dans une case à cocher.

exemple: je choisis le nombre d'adultes / nombre d'enfants et en fonction du nombre choisi les inputs apparaissent 4 pour adultes et 2 pour enfants ... jusqu'à ce que tout va bien ...

J'ajoute une api d'objet PayPal (méthode de paiement dynamique en fonction du choix) depuis leur site

ce que j'aimerais faire

option 1: il s'agit d'un "required" sur les entrées si les champs sont tous remplis, le bouton PayPal (qui est un div) devient gris

si cela est faisable sinon....

option 2: masquer le bouton si entrée vide.

Amis, si vous pouviez me donner un coup de main, ce serait super gentil merci !!

PS:j'ai essayer avec ('input[id^="nom-de-famille"]')en utilisant l’événement "keyup" mais celui -ci fonctionne que si l’élément input et présent au sur l'html au "ready" du "jquery" je suppose ...

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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<head>
<title>Create Dynamic form Using JavaScript - Demo Preview</title>
<meta name="robots" content="noindex, nofollow" />
<meta charset="utf-8">
<script src="js/repas-annuel-form.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://www.paypalobjects.com/api/checkout.js"></script>
<script src="js/paypal.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="form-style.css"> 	
</head>
<body>
<div class="main-content">
<script type="text/javascript">/*
 
///-------------------
 
/*
$("document").ready(function() {  
$('input[id^="nom-de-famille"]').keyup(function() {
  
  // If value is not empty
  if ($(this).val().length == "") {
    // Hide the element
    $('.paypal-button').hide();
  } else {
    // Otherwise show it
    $('.paypal-button').show();
  }
   }).keyup();
});
*/
</script>
<div class="three">
 
     <div class="jta-before-form">
	        <span id="jta-form-title" class="jta-form-title">
	    	<h3>reservation</h3></span>
	    <div class="">Les champs marqués d’un astérisque * sont obligatoires</div>
    </div>
<div class="jta-form-layout">
	<form action="#" type="sbubmit" method="get" id="mainform" >
		   <div class="jta-before-form-content" >
 
 
 
				<div class="label" >
				<label for="nbrAdult" >Nombre Adulte(s)</label>
				</div>
				<select id="nbrAdult" onchange="onAdultChange()">
					<option value="0" selected=>0</option>
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
					<option value="4">4</option>
					<option value="5">5</option>
					<option value="6">6</option>
					<option value="7">7</option>
					<option value="8">8</option>
					<option value="9">9</option>
				</select>
			</div>
 
 
				<div class="label">
				<label for="nbrChild">Nombre Enfant(s)</label>
				</div>
 
				<select id="nbrChild" onchange="onChildChange()" >
					<option value="" >0</option>
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
					<option value="4">4</option>
					<option value="5">5</option>
					<option value="6">6</option>
					<option value="7">7</option>
					<option value="8">8</option>
					<option value="9">9</option>
				</select>
			</div>
		</div>
		<div class="jta-form-content ">
			<span id="myForm"></span>
		</div>
		<div class="jta-after-form-content">Prix Total (Euro)
			<INPUT id="totalPrice" type="text" disabled="disabled" placeholder="0" Size=8></INPUT>
		</div>
	</form>
 
 
<div class="jta-after-form">
<div name="button-paypal" id="paypal-button-container"></div>
 
</div>
 
</div>
 
 
</body>
</html>

mon html ci dessus

ici mon javascript/jquery

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
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
function onAdultChange()
{
// Retrieve the number of "Adult" selected by the user
var nbrAdultValue = document.getElementById("nbrAdult").value;
 
// Count the total number of "Adult" Div that are actually created on the html file  
var idAdultCount = $("[id^=id_adult_]").length; 
 
// Calculate the delta btw these variables, in order to create or delete the right number of "Adult" Div
var x = nbrAdultValue - idAdultCount;
 
// Check if the delta is negative, if so, we must delete the last "x" number of "Adult" Div
if ( x < 0 ) {
	// Convert "x" from negative to absolute 
	x = Math.abs(x); 
	// alert("This action will remove last "+x+" Adult Fields");
 
	// Remove the last "x" "Adult" Div 
	for (j = 0; j < x ; j++) {	
		var max = 0;
		$("[id^=id_adult_]").each(function() { 
			var res = this.id.split("id_adult_").join('');
			max = Math.max(res, max); 
		});
 
		removeElement("myForm","id_adult_"+max);
	}		
} 
else { 
	// Create "x" new "Adult" Div
	for (j = 0; j < x; j++) { 
		i = ++i;
 
		var r = document.createElement('span');
		r.setAttribute("id", "id_adult_"+i);
		document.getElementById("myForm").appendChild(r);
 
		var l = document.createElement("LABEL");
		l.setAttribute("id", "lbl_id_adult_"+i);
		l.innerHTML = "Adulte "+i;
		document.getElementById("id_adult_"+i).appendChild(l);
 
	     var g = document.createElement("IMG");
		g.setAttribute("src", "./wp-content/themes/theme-enfant/img/delete.jpg");
		g.setAttribute("onclick", "removeElement('myForm','id_adult_"+ i +"')");
		document.getElementById("id_adult_"+i).appendChild(g);
 
		var h = document.createElement("DIV");
		h.setAttribute("id", "div1_id_adult_"+i);
		document.getElementById("id_adult_"+i).appendChild(h);
 
		var k = document.createElement("DIV");
		k.setAttribute("id", "div2_id_adult_"+i);
		document.getElementById("id_adult_"+i).appendChild(k);
 
		lastNameFunction("adult_"+i);
		firstNameFunction("adult_"+i);
	    emailFunction("adult_"+i);
		telFunction("adult_"+i);
 
	}
}
 
// Calculate the new total price
setTotalPrice();
 
// Update IDs 
updateIds("adult");
 
}
 
 /* 
 ----------------------------------------------------------------------------
 
 functions that will be called upon, when user change the list "Nombre Enfant(s)"
 
 ---------------------------------------------------------------------------
 */
function onChildChange()
{
 
// Retrieve the number of "Child" selected by the user
var nbrChildValue = document.getElementById("nbrChild").value;
 
// Count the total number of "Child" Div that are actually created on the html file  
var idChildCount = $("[id^=id_child_]").length; 
 
// Calculate the delta btw these variables, in order to create or delete the right number of "Child" Div
var x = nbrChildValue - idChildCount;
 
// Check if the delta is negative, if so, we must delete the last "x" number of "Child" Div
if ( x < 0 ) {
	// Convert "x" from negative to absolute 
	x = Math.abs(x); 
	// alert("This action will remove last "+x+" Child Fields");
 
	// Remove the last "x" "Child" Div 
	for (j = 0; j < x ; j++) {	
		var max = 0;
		$("[id^=id_child_]").each(function() { 
			var res = this.id.split("id_child_").join('');
			max = Math.max(res, max); 
		});
 
		removeElement("myForm","id_child_"+max);
	}		
} 
else { 
	// Create "x" new "Child" Div
	for (j = 0; j < x; j++) { 
		i = ++i;
		var r = document.createElement('span');
		r.setAttribute("id", "id_child_"+i);
		document.getElementById("myForm").appendChild(r);
 
		var l = document.createElement("LABEL");
		l.setAttribute("id", "lbl_id_child_"+i);
		l.innerHTML = "Enfant "+i;
		document.getElementById("id_child_"+i).appendChild(l);
 
		var g = document.createElement("IMG");
		g.setAttribute("src", "./wp-content/themes/theme-enfant/img/delete.jpg");
		g.setAttribute("onclick", "removeElement('myForm','id_child_"+ i +"')");
		document.getElementById("id_child_"+i).appendChild(g);
 
		var h = document.createElement("DIV");
		h.setAttribute("id", "div1_id_child_"+i);
		document.getElementById("id_child_"+i).appendChild(h);
 
		lastNameFunction("child_"+i);
		firstNameFunction("child_"+i);
	}
}
 
// Calculate the new total price
setTotalPrice();
 
// Update IDs 
updateIds("child");
}
 
 
 /* 
 ----------------------------------------------------------------------------
 
 functions that will create an input field for the lastName
 
 ---------------------------------------------------------------------------
 */
function lastNameFunction(type)
{
var y = document.createElement("INPUT");
y.setAttribute("type", "text");
y.setAttribute("placeholder","Nom*");
y.setAttribute("id","nom-de-famille");
y.setAttribute("Name","lastname_"+type);
document.getElementById("div1_id_"+type).appendChild(y);
}
 
 
 
 
 
 
			// Render the PayPal button
			paypal.Button.render({
			// Set your environment
			env: 'production', // sandbox | production
 
			// Specify the style of the button
			style: {
			  layout: 'vertical',  // horizontal | vertical
			  size:   'medium',    // medium | large | responsive
			  shape:  'pill',      // pill | rect
			  color:  'silver'       // gold | blue | silver | white | black
			},
 
			// Specify allowed and disallowed funding sources
			//
			// Options:
			// - paypal.FUNDING.CARD
			// - paypal.FUNDING.CREDIT
			// - paypal.FUNDING.ELV
			funding: {
			  allowed: [
				paypal.FUNDING.CARD,
 
			  ],
			  disallowed: [
				paypal.FUNDING.CREDIT,
			  ],	
			},
 
			// Enable Pay Now checkout flow (optional)
			commit: true,
 
			// PayPal Client IDs - replace with your own
			// Create a PayPal app: https://developer.paypal.com/developer/applications/create
			client: {
			  sandbox: 'AXnE7qNrnFxL4IsXrCSFP_mQPvjPNdGo_UA1pHvcw0p_hnmrLQR3_XOlqRTGe7POwHj8urXcd1DmmwWo',
			  production: 'Afe_0oViyEcryagJtFBf34Gkf_hbTgsIjPBkCKIdyD5jYNQF_Kyu3s1nawS46kTMBRoT25STeSnNkFF7'
			},
 
			// Set up a payment
			payment: function(data, actions) {
			  return actions.payment.create({
				transactions: [{
				  amount: {
 
				  	total:    document.getElementById("totalPrice").value,currency: 'EUR'},
 
				     description: 'Reservation - Repas Annuel 2018.',
 
				     item_list: { items: getJsonItemsList() } 
				}],
				note_to_payer: 'Contact us for any questions on your order.'
			  });
			},									
 
 
			onAuthorize: function (data, actions) {
			  return actions.payment.execute()
				.then(function () {
				  window.alert('Merci pour votre réservation !');
				});
			}
			}, '#paypal-button-container');

**Toufik83** · 03/01/2019, 15h20

Envoyé par JackSteller

j'ai créé un formulaire de réservation pour une soirée avec des entrées dynamiques à sélectionner dans une case à cocher.

pour attacher un événement (keyup,click...) aux éléments dynamiques il faut passer par délégation, c'est a dire choisir un parent statique (toujours présent dans le document), dans ton cas on peut choisir par exemple la form ayant l'id mainform, et puis tu met :

Code :

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

1
2
3
4
5
 
$('#mainform').on('keyup','input',function(){
  console.log('keyup se passe ici ...');
  /*ton code ici*/
});

en plus d'après ton code, tu n'utilises pas jQuery proprement, parce que au lieu de mettre appendChild en pur javascript, tu peux le traduire en jQuery avec append tout simplement.

Code :

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

1
2
3
4
5
 
var nbrAdultValue = document.getElementById("nbrAdult").value;
/*traduction en jQuery*/
var nbrAdulteValue=$('#nbrAdult option:selected').val()/*pour récupérer la value de l'option selectionné*/
var nbrAdulteValue=$('#nbrAdult option:selected').text()/* pour récupérer le texte de l'option selectionné*/

il y a aussi remove pour supprimer des éléments de la dom.

**JackSteller** · 03/01/2019, 20h19

cool merci Toufik je vais essayer tout ça...

**ABCIWEB** · 07/01/2019, 02h01

Salut,
Eventuellement tu pourrais utiliser le sélecteur "invalid" qui t'indiquera les champs requis manquants dans le formulaire pour te permettre de définir une action. Avec jQuery tu pourrais faire : if($("#mainform").find(':invalid').length > 0) {//action}

**JackSteller** · 08/01/2019, 20h56

hello merci mais dis moi du coup je dois creé une classe css===> input : invalid { border: solid 1 px red;}?

**ABCIWEB** · 08/01/2019, 22h23

Si tu veux mais ce n'est pas indispensable. Si tu ne le fais pas le navigateur utilisera son formatage par défaut.

A savoir aussi que $("#mainform").find(':invalid') te renverras la liste des champs requis (ayant l'attribut required="required") qui n'ont pas été renseignés. En listant ces champs dans une boucle tu peux donc aussi les formater dynamiquement de façon différente suivant leur nom par exemple.

Il y a juste une petite restriction, c'est qu'étant donné que le sélecteur "invalid" n'est pas un sélecteur spécifique jQuery il utilise en interne la méthode javascript "querySelectorAll()" ce qui fait que ce n'est pas compatible pour les vieux navigateurs qui n'implémentent pas cette méthode ou HTML5. Mais cela devrait être bon à partir de IE 9 (en tous cas ça fonctionne avec IE10 car c'est le seul ancien navigateur que je teste encore).

**JackSteller** · 24/01/2019, 11h39

Envoyé par Toufik83

pour attacher un événement (keyup,click...) aux éléments dynamiques il faut passer par délégation, c'est a dire choisir un parent statique (toujours présent dans le document), dans ton cas on peut choisir par exemple la form ayant l'id mainform, et puis tu met :

Code :

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

1
2
3
4
5
 
$('#mainform').on('keyup','input',function(){
  console.log('keyup se passe ici ...');
  /*ton code ici*/
});

en plus d'après ton code, tu n'utilises pas jQuery proprement, parce que au lieu de mettre appendChild en pur javascript, tu peux le traduire en jQuery avec append tout simplement.

Code :

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

1
2
3
4
5
 
var nbrAdultValue = document.getElementById("nbrAdult").value;
/*traduction en jQuery*/
var nbrAdulteValue=$('#nbrAdult option:selected').val()/*pour récupérer la value de l'option selectionné*/
var nbrAdulteValue=$('#nbrAdult option:selected').text()/* pour récupérer le texte de l'option selectionné*/

il y a aussi remove pour supprimer des éléments de la dom.

j'ai essayer ce code mais n'arrive pas...

Code :

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

1
2
3
4
5
6
7
8
9
10
$('#myform').keyup(function(){
 var lio = $(".nom-de-famille").val();
   if (lio =='')
 {
   $('.paypal-button-container').hide();
 } else {
   $('.paypal-button-container').show();
 }
 
});

**Toufik83** · 24/01/2019, 16h26

Code :

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

$('#myform').keyup(function(){..});

l'événement keyup ne s'applique que sur les input de type text, alors que #myform n'est pas un input, mais une form.

**JackSteller** · 24/01/2019, 17h28

J'ai essayer délèguer avec l'evenement on('keyup','input',(function..)
mais cela ne fonctionne pas

Code :

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

1
2
3
4
5
6
7
8
9
10
$('#mainform').on('keyup','input','function(){
 var lio = $(".nom-de-famille").val();
   if (lio ==' ')
 {
   $('.paypal-button-container').hide();
 } else {
   $('.paypal-button-container').show();
 }
 
});

**Toufik83** · 24/01/2019, 17h39

1-regarde dans la console du navigateur, tu as une erreur de syntaxe, enlève l'apostrophe " ' " avant le mot function.

Code :

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

1
2
$('#mainform').on('keyup','input','function(){...});

2- tu peux arrêter de répondre avec citation s'il te plait? appuie juste sur répondre à la discussion.

3-Utilise les balises [ code ] /* ici tu écris le code que tu veux poster */ [ /code ] (sans espaces).

Activer/Désactiver un boutton si les champs d'un formulaire sont vides

jQuery

Vue hybride

Discussions similaires

Partager

Partager