javascript verzoek: formulier tekstvelden toevoegen

[Yariev]

Ik ben op zoek naar een javascript dat er voor zorgt dat 1 bepaalde tabelregel (incl textfield) zo vaak wordt getoond als dat men in hetzelfde formulier heeft aangegeven.

Ik heb nml. een formulier, waarbij de vraag wordt gesteld hoeveel vragen men wilt genereren. Aan de hand van een pull down menu kan men een keuze kunnen maken uit bijv. 1 t/m 15.

Bij de keuze: '5' moet vervolgens een onderliggend tekstveld 5 x worden getoond en de tekstveldnaam met 1 worden verhoogd (vraag1, vraag2, vraag3, etc.)

Alvast bedankt :thumb:

grtz

 

[Egel]

Zoiets?

<script type="text/javascript">
 function showQuestions(n) {
  n = parseInt(n);
  for (var i = 1; i <= 15; i++) {
   document.f['vraag' + i].style.display = (n < i ? 'none' : 'block');
   };
  };
</script>


<form name="f">

<select onchange="showQuestions(this.options[this.selectedIndex].value)">
 <option value="0">Aantal vragen</option>
 <option value="1"> 1</option>
 <option value="2"> 2</option>
 <option value="3"> 3</option>
 <option value="4"> 4</option>
 <option value="5"> 5</option>
 <option value="6"> 6</option>
 <option value="7"> 7</option>
 <option value="8"> 8</option>
 <option value="9"> 9</option>
 <option value="10">10</option>
 <option value="11">11</option>
 <option value="12">12</option>
 <option value="13">13</option>
 <option value="14">14</option>
 <option value="15">15</option>
</select>

<input name="vraag1" type="text" size="32" style="display: none;">
<input name="vraag2" type="text" size="32" style="display: none;">
<input name="vraag3" type="text" size="32" style="display: none;">
<input name="vraag4" type="text" size="32" style="display: none;">
<input name="vraag5" type="text" size="32" style="display: none;">
<input name="vraag6" type="text" size="32" style="display: none;">
<input name="vraag7" type="text" size="32" style="display: none;">
<input name="vraag8" type="text" size="32" style="display: none;">
<input name="vraag9" type="text" size="32" style="display: none;">
<input name="vraag10" type="text" size="32" style="display: none;">
<input name="vraag11" type="text" size="32" style="display: none;">
<input name="vraag12" type="text" size="32" style="display: none;">
<input name="vraag13" type="text" size="32" style="display: none;">
<input name="vraag14" type="text" size="32" style="display: none;">
<input name="vraag15" type="text" size="32" style="display: none;">

</form>

Vr.Gr. Egel.

 

[Yariev]

Geweldig, dank je wel voor je snelle reactie Egel , ik was al een aantal uren op zoek.

Klopt het dat ik "vraag" in "document.f['vraag' + i].style.display = (n < i ? 'none' : 'block');" ook kan vervangen voor bijv <div> en zo elk vraaggedeelte in een eigen <div> 1t/m 15 kan plaatsen?

grtz.

 

[Egel]

Ja. Bijvoorbeeld zo:

<script type="text/javascript">
 function showQuestions(n) {
  n = parseInt(n);
  for (var i = 1; i <= 15; i++) {
   document.getElementById('div' + i).style.display = (n < i ? 'none' : 'block');
   };
  };
</script>


<form name="f">

<select onchange="showQuestions(this.options[this.selectedIndex].value)">
 <option value="0">Aantal vragen</option>
 <option value="1"> 1</option>
 <option value="2"> 2</option>
 <option value="3"> 3</option>
 <option value="4"> 4</option>
 <option value="5"> 5</option>
 <option value="6"> 6</option>
 <option value="7"> 7</option>
 <option value="8"> 8</option>
 <option value="9"> 9</option>
 <option value="10">10</option>
 <option value="11">11</option>
 <option value="12">12</option>
 <option value="13">13</option>
 <option value="14">14</option>
 <option value="15">15</option>
</select>

<div id="div1" style="display: none;">Vraag &nbsp; 1: <input name="vraag1" type="text" size="32"></div>
<div id="div2" style="display: none;">Vraag &nbsp; 2: <input name="vraag2" type="text" size="32"></div>
<div id="div3" style="display: none;">Vraag &nbsp; 3: <input name="vraag3" type="text" size="32"></div>
<div id="div4" style="display: none;">Vraag &nbsp; 4: <input name="vraag4" type="text" size="32"></div>
<div id="div5" style="display: none;">Vraag &nbsp; 5: <input name="vraag5" type="text" size="32"></div>
<div id="div6" style="display: none;">Vraag &nbsp; 6: <input name="vraag6" type="text" size="32"></div>
<div id="div7" style="display: none;">Vraag &nbsp; 7: <input name="vraag7" type="text" size="32"></div>
<div id="div8" style="display: none;">Vraag &nbsp; 8: <input name="vraag8" type="text" size="32"></div>
<div id="div9" style="display: none;">Vraag &nbsp; 9: <input name="vraag9" type="text" size="32"></div>
<div id="div10" style="display: none;">Vraag 10: <input name="vraag10" type="text" size="32"></div>
<div id="div11" style="display: none;">Vraag 11: <input name="vraag11" type="text" size="32"></div>
<div id="div12" style="display: none;">Vraag 12: <input name="vraag12" type="text" size="32"></div>
<div id="div13" style="display: none;">Vraag 13: <input name="vraag13" type="text" size="32"></div>
<div id="div14" style="display: none;">Vraag 14: <input name="vraag14" type="text" size="32"></div>
<div id="div15" style="display: none;">Vraag 15: <input name="vraag15" type="text" size="32"></div>

</form>

Vr.Gr. Egel.

 

[Yariev]

Helemaal duidelijk! Dank je wel voor je hulp Egel.