Comment modifier une partie d'url à l'aide de deux balises select en JS ?

**plefever** · 21/03/2016, 10h30

J'ai du mal à me sortir d'un problème.
J'ai deux balises Select qui doivent modifier deux parties précises d'une URL qui elle même s'inscrit dans un INPUT.
Un minimum de code vaut mieux qu'un long discours:

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
<html>
<head>
</head>
<body>
<form name="formulaire">
<select name="region" onChange="" size="1">
<option value="">Choisir région</option>
<option value="A">France</option>
<option value="B">Belgique</option>
<option value="C">Suisse</option>
<option value="D">Italie</option>
</select>
<select name="type" onChange="" size="1">
<option value="">Choisir type</option>
<option value="wind">vent</option>
<option value="rain">pluie</option>
</select>
<INPUT NAME="URL"; value="http://www.lesitedébut/suite/TYPE_REGION_findeladresse" id="URL" size="66"><INPUT TYPE="button" NAME="RefreshButton" value="GO" style="cursor:pointer; color:red; font-weight:bold;" onClick="HandleSubmit()"></form>
</body>
</html>

J'ai réduit le tout au minimum pour faciliter la compréhension.
La partie TYPE dans l'url doit être modifiable par la valeur le la balise "type" et la partie REGION doit être modifiable par la valeur de la balise "région". Le reste de l'url ne doit pas changer.
Sachant que la balise "région" contient une quarantaine d'entrées et 7 pour la balise "type". La page reste en local sur la machine.
Je m'arrache les cheveux !!!
Quelqu'un aurait la gentillesse de m'éclairer ? (je suis débutant)
Merci

**mathieu** · 21/03/2016, 11h40

au lieu de mettre l'URL dans une balise "input" il vaut mieux juste l'afficher dans un "span" pour éviter que l'utilisateur le modifie.
donc vous récupérez les valeurs des champs type et region, vous placez les valeurs dans l'URL avec le code suivant et vous l'affichez dans le "span"

Code :

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

1
2
3
4
5
6
7
8
9
var url = "http://www.lesitedébut/suite/%TYPE%_%REGION%_findeladresse";
 
var type = "abc";
url = url.replace("%TYPE%", type);
 
var region = "Y";
url = url.replace("%REGION%", region);
 
console.log(url);

**plefever** · 21/03/2016, 13h24

Merci, mais l'utilisateur (moi en l’occurrence) doit garder la possibilité de modifier complètement l'URL si il le désire. C'est pourquoi j'utilise une balise "input"
La solution semble proche de cette manière. Je ne suis pas encore arrivé à l'écrire correctement.... quelque chose doit m'échapper.
Je cherche encore, mais si vous avez un peu de temps pour moi, ça m'en ferai gagner beaucoup

**mathieu** · 21/03/2016, 21h36

dans ce cas la balise "input" peut rester pour l'URL (peut-être il faudrait tester si les éléments "%TYPE%" et "%REGION%" sont obligatoires dans l'URL ?)

et ensuite le remplacement peut se faire sur la cible du formulaire (un script en PHP au hasard ?)

**plefever** · 22/03/2016, 06h28

Je n'y connait rien en PHP... et cette page doit être en local. Je suis tout a fait amateur en écriture Html et Java. Généralement je me débrouille et arrive à mes fin par obstination, mais là je sèche...

**mathieu** · 22/03/2016, 14h19

Alors là il faudrait que vous nous expliquez mieux ce que vous souhaitez obtenir.
Depuis le début, vous nous dites seulement ce que vous ne voulez pas donc on peut moins bien vous aider comme ça.

**plefever** · 22/03/2016, 15h05

En exécutant le code que j'ai joint à mon premier message, on comprend ce que je dois faire, ou du moins je l'espérait. La première balise (France,Belgique,Suisse...)doit modifier la partie d'adresse REGION dans la troisième balise. La deuxième balise (Vent,pluie) doit modifier la partie d'adresse TYPE dans la troisième balise.
Il est important que ce soit une balise INPUT pour la troisième, je dois pouvoir la modifier manuellement.
Le code reste dans une page locale.
Votre ébauche de solution semble bien trouvée, mais je n'arrive pas à lier l'affichage dans la balise 3 ni même à lier les balises 1 et 2 avec var url.
Je suis débutant, et c'est pour un usage personnel un peu particulier, sur un bateau, là où les conditions de transmission Internet sont parfois difficiles et comptées.
Merci de votre aide

**plefever** · 23/03/2016, 14h23

J'ai donc écrit ceci. L'adresse URL dans la troisième balise prend bien les valeurs des deux premières balises, mais elle ne changent pas. Il faut, je suppose, appeler une function... laquelle et comment ?

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
<html>
 
<head>
<head>
<script language="javascript" type="text/javascript">
<!--
function initInput()
	{
	var url = "http://www.sitedébut/suite/%TYPE%-%REGION%/fin";
		var type = formulaire.type.value;
url = url.replace("%TYPE%", type);
var region = formulaire.region.value;
url = url.replace("%REGION%", region);
	document.formulaire.affichage.value = url;
 
	}
	function changerregion()
	{
	var region = formulaire.region.value;
	}
//-->
 
 
 
</script>
 </SCRIPT>
 
</head>
 
<body onLoad="initInput()">
<form name="formulaire" onChange="changerregion()" size="1">
<select name="region"  size="1">
<option value="B">Belgique</option>
<option value="F">France</option>
<option value="S">Suisse</option>
</select>
<select name="type" onChange="" size="1">
<option value="ORA">orage</option>
<option value="VE">vent</option>
<option value="HO">houle</option>
</select>
<input name="affichage" id="affichage" value="" size="66">
</form>
 
 
 
</body>
 
</html>

**mathieu** · 23/03/2016, 15h22

si vous remplacez le contenu de "affichage" par le bon URL, les marqueurs "%TYPE%" et "%REGION%" n'existe plus en cas d'autre changement

j'ai plus l'habitude de jQuery donc j'aurais fait comme ça :

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
<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="//code.jquery.com/jquery-2.2.2.min.js"></script>
</head>
<body>
 
<script>
 
$(function () {
 
    // mise à jour au chargement de la page
    majUrl();
 
    // mise à jour à la modification d'un menu déroulant
    $("#type").change(majUrl);
    $("#region").change(majUrl);
 
    // mise à jour à la modification du champ texte
    $("#url").keyup(majUrl).change(majUrl);
 
});
 
 
function majUrl() {
 
    var url = $("#url").val();
 
    var type = $("#type").val();
    url = url.replace("%TYPE%", type);
 
    var region = $("#region").val();
    url = url.replace("%REGION%", region);
 
    $("#resultat").html("Résultat*: <strong>" + url + "</strong>");
 
}
 
 
</script>
 
<form name="formulaire" size="1">
 
    <select name="region" id="region" size="1">
        <option value="B">Belgique</option>
        <option value="F">France</option>
        <option value="S">Suisse</option>
    </select>
 
    <select name="type" id="type" size="1">
        <option value="ORA">orage</option>
        <option value="VE">vent</option>
        <option value="HO">houle</option>
    </select>
 
    <input name="url" id="url" value="http://www.sitedébut/suite/%TYPE%-%REGION%/fin" size="66">
 
</form>
 
<p id="resultat">
</p>
 
</body>
</html>

pour éviter la recherche du fichier extérieur pour jQuery, ce fichier peut être enregistré en local dans le répertoire du fichier HTML

**plefever** · 23/03/2016, 17h24

Merci de votre aide
Quelque chose m'échappe peut-être, mais ça ne fonctionne pas. (navigateur chrome)
En java je m'y entend un peu en jQuery, rien du tout. Je préférerais y arriver en Java, au cas où je devrai modifier plus tard quelque-chose.

**plefever** · 23/03/2016, 21h08

Après quelques essais, j'ai trouvé ceci qui semble fonctionner. Le code est il a peu près correct ?

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
<html>
 
<head>
<script language="javascript" type="text/javascript">
<!--
function initInput()
	{
	var url = "http://www.sitedébut/suite/%TYPE%-%REGION%/fin";
		var type = formulaire.type.value;
url = url.replace("%TYPE%", type);
var region = formulaire.region.value;
url = url.replace("%REGION%", region);
	document.formulaire.affichage.value = url;
	}
</script>
 </SCRIPT>
 
</head>
 
<body onLoad="initInput()">
<form name="formulaire">
<select name="region"  onChange="initInput()" size="1">
<option value="B">Belgique</option>
<option value="F">France</option>
<option value="S">Suisse</option>
</select>
<select name="type" onChange="initInput()" size="1">
<option value="ORA">orage</option>
<option value="VE">vent</option>
<option value="HO">houle</option>
</select>
<input name="affichage" id="affichage" value="" size="66">
</form>
 
</body>
 
</html>

**Beginner.** · 24/03/2016, 19h52

Salut,

Je crois qu'il y a un "</SCRIPT>" en trop...

Sinon ça marche mais le début de l'url et la fin seront toujours les mêmes ? J'ai cru comprendre que tu voulais pouvoir modifier l'adresse or là tes modifications ne seront pas prises en compte... Si tu fais un changement du début ou de la fin de l'url il sera perdu dés que tu changeras la région ou le type...

Il faudrait récupérer l'adresse et ne modifier que la région ou le type... N'est-ce pas ce que tu voulais ?

**plefever** · 25/03/2016, 08h16

Effectivement il y a un "</SCRIPT>" en trop...
L'URL est tjrs la même (à part les deux variables) et je garde la possibilité de la remplacer entièrement par une autre adresse et dans ce cas les variables n'ont bien sur plus d'importance.
Il y'a bien sur un autre script sur cette troisième balise appelé par un bouton.
J'avais supprimé cette partie pour simplifier mon exposé.
Je l'ai rajouté, ça fonctionne, mais lorsque je clique sur ce dernier bouton, les variables reprennent leurs valeurs par défaut.
Il faudrait corriger cela encore. Je me demande si ce n'est pas <body onLoad="initInput()"> qui en est la cause.

**Beginner.** · 25/03/2016, 19h51

Ben poste le code qu'on puisse voir... Pour <body onLoad="initInput()"> en principe la fonction est lancée une seule fois après que la page soit chargée et non quand on clique sur un bouton à moins que quelque chose m'échappe...

**plefever** · 25/03/2016, 22h53

La fonction <body onLoad="initInput()"> est lancée une seule fois au chargement de la page, mais j'ai utilisé le rappel de cette fonction dans mes balises : onChange="initInput()"... c'est peut être de là que ça provient.
Je nettoie un peu le code et je vous le soumet.

**NoSmoking** · 26/03/2016, 17h05

Bonjour,
en l'état ton dernier code fonctionne, mais quand tu dis

...mais lorsque je clique sur ce dernier bouton, les variables reprennent leurs valeurs par défaut.

de quel bouton parles tu, d'un bouton submit qui soumet le formulaire, si c'est le cas le comportement est normal.

**plefever** · 27/03/2016, 07h34

Oui c'est tout à fait ça. Comment faire pour changer ce comportement ?

**NoSmoking** · 27/03/2016, 07h45

Ne pas mettre de bouton de type="submit" !

Cela va dépendre quand même de ce que tu cherches à faire au final.

**plefever** · 27/03/2016, 08h15

... ou ne pas cliquer..mouai..

Je vais mettre une version simplifiée pour mieux faire comprendre mon propos.

**plefever** · 27/03/2016, 16h01

Voici un exemple du code complet (ou presque)
Ça fonctionne, mais lorsque l'on clique sur "GO", les premiers champs reprennent leurs valeurs par défaut (ici "Méditerranée" et "vent") ainsi que l'adresse dans le troisième champ.
C'est embêtant, parce-que, du coup, lorsque les images sont chargées, "l'entête " affichée ne correspond pas à ce que l'on voit.
Il faudrait donc que les champs 1 et 2 gardent les valeurs sélectionnées lorsque l'on appuie sur "GO".
Exécutez le code, vous comprendrez mieux ce que je veux dire.

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
<html>
  <head>
 
    <title>Meteo Consorzio Lamma</title>
 
    <SCRIPT LANGUAGE=javascript>
    <!--
 
    // ---------------------------------------------------------------------------
    // -- Scriptname   : Javascript Fusker                                      --
    // -- Author       : Bas de Reuver                                          --
    // -- Date         : 8-may-2004                                             --
    // -- Description  : Sometimes someone put up lots of pictures (Pic001.jpg, --
    // --                Pic002.jpg etc.) without a proper overview or index    --
    // --                page. This script takes an URL and dumps all pictures  --
    // --                in the HTML document so you can view them more easily. --
    // --                Idea sort of taken from http://fusker.lewww.com        --
    // --                fusker: [Danish], n. cheater, hacker                   --
    // -- 14-jul-2004 Johann Zacharee sent in some updates and ideas            --
    // -- added nested number ranges and removed hardcoded "fusker.html" name.  --
    // ---------------------------------------------------------------------------
    // script modified by webmaster@fuckingright.com to clear text box when clicked on
    // ---------------------------------------------------------------------------
    function GenerateContent()
    {
      var strParameter = window.location.search;
//    if (strParameter.charAt (0) != '?')
//      return(1);
 
      strParameter = strParameter.substring(1, strParameter.length);
 
      //next link has info on 'command-line' arguments
      //http://sharkysoft.com/tutorials/jsa/content/043.html
 
      if (strParameter == '')
      {
 
      }
      else
      {
        // must contain 'http://' or 'ftp://' or something
        if (strParameter.indexOf('://') < 0)
          {strParameter = 'http://' + strParameter}
 
        strParameter = strParameter.replace(/%5B/g, '[');  // g=global, replace all
        strParameter = strParameter.replace(/%5D/g, ']');
 
 
        ProcessURL('', strParameter); // start recursion
      }
    }
 
    function RemoveLeadingZeros(strInput)
    {
      // remove zero's because else parseInt('0123') interprets as octal number and returns 83
      i = 0
      while (strInput.substr(i, 1) == '0') {i++}
 
      // incase all zero's then the string is empty now
      if (strInput.length == i)
        // put one '0' character in string
        {strInput = '0'}
      else
        // removeonly keep valid digits '00123' -> '123'
        {strInput = strInput.substr(i)}
      return strInput;
    }
 
    function WriteURLtoDocument(strURL)
    {   
      document.writeln('<p><img src="' + strURL + '"><br>');
      document.writeln('<a href="' + strURL + '">' + strURL + '</a></p>');
    }
 
    // ExamineURL(strFirst, strLast) takes an URL and determines where the number-part is located.
    // example: strFirst='http://www.bla.com/user/test[01-10].jpg'
    // will show pictures test01.jpg through test10.jpg
    function ProcessURL(strFirstPart, strLastPart)
    {
      var strBegin = '';
      var strEnd = '';
      var iStartNr = -1;
      var iEndNr = -1;
      var iDigits = 0  // number of digits, example 3 digits, then 1 becomes '001'
      var strTemp;
 
      var strNumberPart = '';
      var i;
 
      //force typecast to string
      strFirstPart = strFirstPart + '';
      strLastPart = strLastPart + '';
 
      // check for '[01-10]' part
      var iBegin = strLastPart.indexOf('[');
      var iEnd   = strLastPart.indexOf(']');
      if (iBegin < 0 || iEnd < 0)
      {
        // no more number parts, print to HTML document
        WriteURLtoDocument(strFirstPart + strLastPart);
        return -1;
      };
 
      // there are more number parts, process it
      strBegin = strFirstPart + strLastPart.substr(0, iBegin);
      strEnd   = strLastPart.substr(iEnd+1, strLastPart.length-iEnd);
 
      var strTemp = strLastPart.substr(iBegin+1, (iEnd-iBegin-1));
      var iDash  = strTemp.indexOf('-');
 
      if (iDash < 0)
      {
        WriteURLtoDocument(strFirstPart + strLastPart);
        return -1;
      };
 
      var strStartNr = strTemp.substr(0, iDash);
      iDigits  = strStartNr.length;
      strStartNr = RemoveLeadingZeros(strStartNr);
 
      var strEndNr = strTemp.substr(iDash+1, strTemp.length-iDash-1);
      strEndNr = RemoveLeadingZeros(strEndNr);
 
      if (isNaN(strStartNr) == true || isNaN(strEndNr) == true)
      {
        WriteURLtoDocument(strFirstPart + strLastPart);
        return -1;
      }
 
      iStartNr = parseInt(strStartNr);
      iEndNr = parseInt(strEndNr);
 
      // call ProcessURL recursively
      for (i = iStartNr; i <= iEndNr; i++)
      {
        strNr = i + '';  // typecast to string
        while (strNr.length < iDigits)
          {strNr = '0' + strNr}
        // recursive call
        strTemp = strBegin + strNr;
        ProcessURL(strTemp, strEnd);
      }
    }
 
    function DisplayHelp()
    {
      document.formulaire.URL.value = '';
      HandleSubmit();
    }
 
    function HandleSubmit()
    {
      // when user types in textbox and presses enter, this function is called
      var strParameter = document.formulaire.affichage.value;
      // replace again, easier to copy into UBB codes ([url=..]) because that also uses '[' and ']'
      strParameter = strParameter.replace(/\[/g, '%5B'); // g=global, replace all
      strParameter = strParameter.replace(/\]/g, '%5D');
      top.location = window.location.pathname + '?' + strParameter;
      // next lines causes form not to reload (like pressing F5)
      return false;
    }
 
 
 
    //-->
 
 
function initInput()
	{
	var url = "http://www.lamma.rete.toscana.it/models/ventoemare/%TYPE%_%REGION%_web_[1-3].png";
		var type = formulaire.type.value;
url = url.replace("%TYPE%", type);
var region = formulaire.region.value;
url = url.replace("%REGION%", region);
	document.formulaire.affichage.value = url;
	}
</script>
 
  </head>
 
  <body onLoad="initInput()">
 
	<table border="0" cellspacing="0" cellpadding="0">
		<tr>
			<td width="220">
			<p style="margin-top: 0; margin-bottom: 0"><b>
			<font face="Arial" size="5"><span style="text-decoration: none">
			Exemple</span></font></b></td>
			<form name='formulaire'>
			<td>
			<p align="center" style="margin-top: 0; margin-bottom: 0">
			<select size="1" name="region" onChange="initInput()">
			<option value="AA">Méditerranée</option>
			<option value="K">Baléares</option>
			<option value="R">Valencia</option>
			</select></td>
 
			<td>
			<p align="center" style="margin-top: 0; margin-bottom: 0">
			<select size="1" name="type" onChange="initInput()">
			<option value="wind10m">Vent</option>
			<option value="mwp">Houle</option>
			</select></td>
			<td width="5">
			<p style="margin-top: 0; margin-bottom: 0">&nbsp;</td>
 
			<td align="left">
			<p style="margin-top: 0; margin-bottom: 0">
			<INPUT TYPE="button" NAME="RefreshButton" value="GO" style="cursor:pointer; color:red; font-weight:bold;" onClick="HandleSubmit()"></td>
			<td width="500" align="left">
			<p style="margin-top: 0; margin-bottom: 0">
			<INPUT NAME="affichage"; value="" id="affichage"; color:red;" size="66"></td>
 
			</FORM>
 
		</table>
	<hr>
 
<!-- insert pictures here -->
    <SCRIPT LANGUAGE="JavaScript">
      GenerateContent();
    </SCRIPT>
 
  </body>
</html>

Comment modifier une partie d'url à l'aide de deux balises select en JS ?

JavaScript

Discussions similaires

Partager

Partager