I have a problem since yesterday. I want to build a cloudpage which is use to save some informations filled by the customer. I need 2 dropdown list, which the options of the second one, depends on the value of the first one, and that need to be dynamic.
In fact, if the customer choose a value (example : X), the second dropdown list need to have as many options as we have in a Data extension that contains a colum with the value 'X'.
I have two different issues :
1°) My AMP Script, that requesting on my DE, working when i'm using it in the Body to create some options, but as soon I put it in the onChange function, that doing nothing. Is it possible to do that ?
2°) I fixed a value to my variable "yourDep", 44, because I don't know how to set the This.value to my AMPSCRIPT variable to permit me to do the request on the DE.
There is my code :
```
<!DOCTYPE html>
<html>
<head>
<script>
function adaptDistrib(){
distributeurSel.length = 1;
%%[
SET @distriDE = "ARO_TEST_DISTRI"
SET @yourDep = "44"
SET @depRowset = LookupRows(@distriDE, "Departement", @yourDep)
SET @depRowcount = Rowcount(@depRowset)
IF @depRowcount > 1 THEN
FOR @i=1 TO @depRowcount DO
SET @depRow = Row(@depRowset, @i)
SET @depName = Field(@depRow, "Name")
]%%
distributeurSel.options[distributeurSel.options.length] = new Option(%%=v(@depName)=%%, %%=v(@depName)=%%);
%%[
NEXT @i
ENDIF
]%%
}
window.onload = function() {
var regionSel = document.getElementById("region");
var distributeurSel = document.getElementById("distributeur");
}
</script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style class="main_style">
.layout-canvas-c {
background-color: #fff;
border: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
width: 100%;
}
.layout-canvas-c > .header,
.layout-canvas-c > .section,
.layout-canvas-c > .footer {
position: relative;
overflow: hidden;
width: 100%;
word-wrap: break-word;
}
.layout-canvas-c > .section {
margin: 10px 0;
}
.layout-canvas-c > .section > .columns {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
word-wrap: break-word;
}
body {
color: #000;
font-family: Arial;
font-size: 12px;
margin: 0 auto;
max-width: 1280px;
}
@media only screen and (max-width: 480px) {
.mobile-hidden {
display: none !important;
}
.responsive-td {
width: 100% !important;
display: block !important;
padding: 0 !important;
}
}
@media (min-width: 480px) {
.layout-canvas-c > .section {
display: table;
table-layout: fixed;
}
}
@media (min-width: 480px) {
.layout-canvas-c > .section > .columns {
display: table-cell;
padding: 0 5px;
vertical-align: top;
width: 50%;
}
.layout-canvas-c > .section > .columns:first-child {
padding-left: 0;
}
.layout-canvas-c > .section > .columns:last-child {
padding-right: 0;
}
.layout-canvas-c > .section > .columns.col1 {
*float: left;
}
.layout-canvas-c > .section > .columns.col2 {
*float: right;
*padding-right: 0;
}
}
@media (max-width: 480px) {
.layout-canvas-c > .section > .columns {
width: 100%;
margin-bottom: 10px;
}
.layout-canvas-c > .section > .columns:last-child {
margin-bottom: 0;
}
}
@media (min-width: 480px) {
.layout-canvas-c > .section > .columns.col1 {
width: 70%;
}
.layout-canvas-c > .section > .columns.col2 {
width: 30%;
}
}
</style>
</head>
<body>
<div class="layout layout-canvas-c">
<div class="header">
<div data-type="slot" data-key="header" data-label="Déposer les blocs ou le contenu ici"></div>
</div>
<div class="section">
<div class="columns col1">
<form name="form1" id="form1">
Région:
<select name="selectRegion" id="region" onchange="adaptDistrib()">
<option value="">Selectionner la Region</option>
<option value="44">Loire-Atlantique</option>
<option value="85">Vendée</option>
</select>
<br><br>
Distributeur:
<select name="selectDistributeur" id="distributeur">
<option value="">Sélectionnez votre Distributeur</option>
</select>
<br><br>
<input type="submit" value="Envoyer">
</form>
</div>
<div class="columns col2">
<div data-type="slot" data-key="col2"></div>
</div>
</div>
<div class="footer">
<div data-type="slot" data-key="footer"></div>
</div>
</div>
</body>
</html>
```
Hope I was clear in my explanations,
Thanks by advance for your help,
Regards,
************************
Update with your advice
************************
With your advice, I tried to load all the data in my AMPScript (success), and i'm trying to use is in Javascript to add a link between the first dropdown list selection and the options shown in the second one. I'm a bit blocked, I think that I have a problem to convert my XML variable into something usefull form the JS dynamic code :
```
<!DOCTYPE html>
<html>
<head>
<script>
%%[
SET @distriDE = "ARO_TEST_DISTRI"
SET @depRowset = LookupRows(@distriDE, "default", "1")
SET @depRowcount = Rowcount(@depRowset)
IF @depRowcount > 1 THEN
SET @xmlArray = '<?xml version="1.0" encoding="UTF-8"?>'
SET @xmlArray = concat(@xmlArray, '<distributeurs>')
FOR @i=1 TO @depRowcount DO
SET @depRow = Row(@depRowset, @i)
SET @depName = Field(@depRow, "Name")
SET @depId = Field(@depRow, "Id")
SET @depNumber = Field(@depRow, "Departement")
SET @xmlArray = concat(@xmlArray, '<distributeur>')
SET @xmlArray = concat(@xmlArray, ' <depNumber><![CDATA[@depNumber]]></depNumber>')
SET @xmlArray = concat(@xmlArray, ' <depName><![CDATA[@depName]]></depName>')
SET @xmlArray = concat(@xmlArray, ' <depId><![CDATA[@depId]]></depId>')
SET @xmlArray = concat(@xmlArray, '</distributeur>')
NEXT @i
ENDIF
SET @xmlArray = concat(@xmlArray,'</distributeurs>')
]%%
var depObject = %%=v(@xmlArray)=%%
window.onload = function() {
var regionSel = document.getElementById("region");
var distributeurSel = document.getElementById("distributeur");
regionSel.onchange = function() {
distributeurSel.length = 1;
//display correct values
for (var y in depObject[distributeurs][distributeur][this.value]) {
distributeurSel.options[distributeurSel.options.length] = new Option(y, y);
}
}
}
</script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style class="main_style">
.layout-canvas-c {
background-color: #fff;
border: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
width: 100%;
}
.layout-canvas-c > .header,
.layout-canvas-c > .section,
.layout-canvas-c > .footer {
position: relative;
overflow: hidden;
width: 100%;
word-wrap: break-word;
}
.layout-canvas-c > .section {
margin: 10px 0;
}
.layout-canvas-c > .section > .columns {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
word-wrap: break-word;
}
body {
color: #000;
font-family: Arial;
font-size: 12px;
margin: 0 auto;
max-width: 1280px;
}
@media only screen and (max-width: 480px) {
.mobile-hidden {
display: none !important;
}
.responsive-td {
width: 100% !important;
display: block !important;
padding: 0 !important;
}
}
@media (min-width: 480px) {
.layout-canvas-c > .section {
display: table;
table-layout: fixed;
}
}
@media (min-width: 480px) {
.layout-canvas-c > .section > .columns {
display: table-cell;
padding: 0 5px;
vertical-align: top;
width: 50%;
}
.layout-canvas-c > .section > .columns:first-child {
padding-left: 0;
}
.layout-canvas-c > .section > .columns:last-child {
padding-right: 0;
}
.layout-canvas-c > .section > .columns.col1 {
*float: left;
}
.layout-canvas-c > .section > .columns.col2 {
*float: right;
*padding-right: 0;
}
}
@media (max-width: 480px) {
.layout-canvas-c > .section > .columns {
width: 100%;
margin-bottom: 10px;
}
.layout-canvas-c > .section > .columns:last-child {
margin-bottom: 0;
}
}
@media (min-width: 480px) {
.layout-canvas-c > .section > .columns.col1 {
width: 70%;
}
.layout-canvas-c > .section > .columns.col2 {
width: 30%;
}
}
</style>
</head>
<body>
<div class="layout layout-canvas-c">
<div class="header">
<div data-type="slot" data-key="header" data-label="Déposer les blocs ou le contenu ici"></div>
</div>
<div class="section">
<div class="columns col1">
<form name="form1" id="form1">
Région:
<select name="selectRegion" id="region">
<option value="">Selectionner la Region</option>
<option value="44">Loire-Atlantique</option>
<option value="85">Vendée</option>
</select>
<br><br>
Distributeur:
<select name="selectDistributeur" id="distributeur">
<option value="">Sélectionnez votre Distributeur</option>
</select>
<br><br>
<input type="submit" value="Envoyer">
</form>
</div>
<div class="columns col2">
<div data-type="slot" data-key="col2"></div>
</div>
</div>
<div class="footer">
<div data-type="slot" data-key="footer"></div>
</div>
</div>
</body>
</html>
```
If someone could help me, could be really usefull !
Thanks by advance,