0

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,

Improve this question
5
  • You're mixing up AMPscript, which is a servrer-side language with client-side JS, this won't work. To make it work, you first need to "load" all data from all Data Extensions that you might need using AMPscript and then conditionally display it in your client-side script.
    – zuzannamj
    Commented Sep 13, 2022 at 8:29
  • Hello zuzanmaj, ok, understood, yes i'm mixing both, that's a kind messy in my head to be honest :). Could you give me a quick exemple to use that data that I retrieved from my "all data request" to use it in the JS ? A quick example will be fine, i'll adapt next. Regards,
    – arouillard
    Commented Sep 13, 2022 at 8:43
  • put your AMPscript in the body as you mentioned and create all required variables in AMPscript first, you can also create an array if needed. Then pass those values to JS - more details here: sfmarketing.cloud/2022/09/06/…
    – zuzannamj
    Commented Sep 13, 2022 at 8:57
  • Understood. Perfectly clear, i'll try to construct an array to work on it with the javascript code. I'll try to do it :) Will Come back if I have some news ! Thanks
    – arouillard
    Commented Sep 13, 2022 at 9:21
  • I added an edit/update at the bottom of my first question, if you can take a look ;) No a pro of JS to be honest !
    – arouillard
    Commented Sep 13, 2022 at 15:19

0

Reset to default

You must log in to answer this question.

Browse other questions tagged .