Jump to content

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


Claireecomiz

Recommended Posts

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>

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...