Skip to main content
Salesforce

Return to Question

added 5050 characters in body
Source Link
arouillard
arouillard
  • 9
  • 3

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,

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,

Source Link
arouillard
arouillard
  • 9
  • 3

Salesforce Marketing Cloud - Use OnChange with AMP Script in Cloudpage

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,