Affichage du nombre de div en fonction de la valeur d'un select

[Claireecomiz]

Bonjour tout le monde,

Je bosse sur un module Prestashop et je créé un formulaire personnalisé pour créer des tutoriels. Dans ce formulaire, j'ai un champ select avec le nombre d'étapes nécessaire pour réaliser ce tuto et plus bas j'ai une div avec plusieurs champs pour décrire l'étape.

Je souhaiterais en gros que lorsque le client selectionne 4 dans le champ select, mon bloc de div s'affiche 4 fois avec un id différent pour pouvoir récupérer les valeurs de chaques étapes.

Si quelqu'un a une petite idée car je suis une buse en Javascript.

Voici mon code :

		<div class="form-group row">
          <label class="col-md-3 form-control-label">{l s='Choisissez le nombre d\'étapes nécessaire à la réalisation' mod='eco_tutos'}</label>
          <div class="col-md-6">
            <select name="cara_etape_tuto" class="form-control form-control-select select_step" id="etape">
              
            	{foreach $etapes as $etape}
                <option  value="{$etape.id_feature_value}">{$etape.value}</option>
              {/foreach}
            </select>
          </div>
        </div>

      <div id="etapes" class="steps">      
   		<div class="step" id="etapes" name="etapes">
        <div class="form-group row">
          <label class="col-md-3 form-control-label">{l s='Saisissez le numéro de l\'étape' mod='eco_tutos'}</label>
          <div class="col-md-6">
            <input class="form-control" name="numero_etape_tuto" type="text" id="numero" value="{if $id_prod != false}{$num_step}{/if}">
          </div>
        </div>
        <!-- Fin du numéro de l'étape -->
        <!-- Description de l'étape -->
        <div class="form-group row">
          <label class="col-md-3 form-control-label">{l s='Saisissez la description de votre étape' mod='eco_tutos'}</label>
          <div class="col-md-9">
            <textarea class="rte" name="desc_etape_tuto" rows="10" cols="100" id="desc">{if $id_prod != false}{$desc_step}{/if}</textarea>             
          </div>
        </div>
        <!-- Fin de la description de l'étape -->
        <!-- Visuel principal de l'étape -->
        <div class="form-group row">
          <label class="col-md-3 form-control-label">{l s='Ajoutez l\'image principale de votre étape (Formats autorisés : .jpg ou .png)' mod='eco_tutos'}</label>
          <div class="col-md-6">
            {if $id_prod != false}<img src="/modules/eco_tutos/img/etapes/{$visuel_principal}" alt="" class="img-responsive" height="150px">{l s='   Voici l\'image principale que vous avez choisit pour cette étape' mod='eco_tutos'}{/if}
				<input class="form-control" type="file" name="img_1_etape" id="img_1">
          </div>
        </div>
        <!-- Fin du visuel principal de l'étape -->
        <!-- Visuel 2 de l'étape -->
        <div class="form-group row">
          <label class="col-md-3 form-control-label">{l s='Ajoutez une seconde image à votre étape (Formats autorisés : .jpg ou .png)' mod='eco_tutos'}</label>
          <div class="col-md-6">
            {if $id_prod != false}<img src="/modules/eco_tutos/img/etapes/{$visuel_1}" alt="" class="img-responsive" height="150px">{l s='   Voici la seconde image que vous avez choisit pour cette étape' mod='eco_tutos'}{/if}
				<input class="form-control" type="file" name="img_2_etape" id="img_2">
          </div>
        </div>
        <!-- Fin du visuel 2 de l'étape -->
        <!-- Visuel 3 de l'étape -->
        <div class="form-group row">
          <label class="col-md-3 form-control-label">{l s='Ajoutez lune troisième image à votre étape (Formats autorisés : .jpg ou .png)' mod='eco_tutos'}</label>
          <div class="col-md-6">
            {if $id_prod != false}<img src="/modules/eco_tutos/img/etapes/{$visuel_2}" alt="" class="img-responsive" height="150px">{l s='   Voici la troisième image que vous avez choisit pour cette étape' mod='eco_tutos'}{/if}
				<input class="form-control" type="file" name="img_3_etape" id="img_3">
          </div>
        </div>

    	</div>
      
      </div>

 

[doekia]

Développer signifie un minimum de lecture des docs

https://www.smarty.net/docs/en/language.function.section.tpl

https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/for

Cette question, quoiqu'il soit n'a rien a voir avec PrestaShop

[Claireecomiz]

En tout cas, je constate que l'amabilité est une option.

Merci tout de même de vous être donné tout ce mal pour me répondre.