2 input velden in een loop

Door Johan West op 05-09-2015 09:48

2.005 views

Hallo, ik heb hier een stukje javascript maar de code werkt niet zoals ik het zou willen.

Het oorspronkelijke script is er 1 waarbij je 1 input veld hebt en als je deze in heb gevuld wordt er automatisch een input veld toegevoegd.

Omdat ik 2 input velden wil laten invoeren en daarna nog 2 totdat de limiet is bereikt heb ik het aangepast maar het script vertoont kuren.


<html>

<head>
<script>
var counter = 1;
var limit = 5;
function addInput(divName){
     if (counter > limit)  {
          alert("Je hebt de limit overschreden omdat de invoer  meer dan " + counter + " is");
     }
     else {
          var newdiv = document.createElement('div');
		  
          newdiv.innerHTML = "Naam " + (counter + 1) + " <br><input type='text' name='Naam[]'>";
		  newdiv.innerHTML = "Webadres " + (counter + 1) + " <br><input type='text' name='Webadres[]'>";
          document.getElementById(divName).appendChild(newdiv);
          counter++;
     }
}


</script>
</head>

<body>
<form method="POST">

     <div id="dynamicInput">
          Naam<br><input type="text" name="Naam[]"><br>
		  
     
         Webadres<br><input type="text" name="Webadres[]">   
		  
     </div>
	
	 
     <input type="button" value="Verzenden" onClick="addInput('dynamicInput');">
</form>
</body>

</html>

Hoe krijg ik n maal 2 input velden netjes onder elkaar?

DavY -

05-09-2015 10:17


newdiv.innerHTML = "Naam " + (counter + 1) + " <br><input type='text' name='Naam[]'>";
newdiv.innerHTML = "Webadres " + (counter + 1) + " <br><input type='text' name='Webadres[]'>";


newdiv.innerHTML = "Naam " + (counter + 1) + " <br><input type='text' name='Naam[]'><br />" + 
"Webadres " + (counter + 1) + " <br><input type='text' name='Webadres[]'>";

Demo: http://codepen.io/anon/pen/MaYPPo

- SanThe -

05-09-2015 10:18

Op regel 15 overschrijf je newdiv.innerHTML met een nieuwe waarde.
Dat gaat dus fout.


newdiv.innerHTML = "Naam " + (counter + 1) + " <br><input type='text' name='Naam[]'><br>Webadres " + (counter + 1) + " <br><input type='text' name='Webadres[]'>";

Johan K

05-09-2015 10:48

Ik zou dit anders aanpakken, inplaats van nieuwe elementen te maken maak ze voor de hand en laat ze alleen niet zien aan de gebruiker. Dan kan je javascript gebruiken om deze te laten zien als nodig is.

Dus:


<style>
 .hide{
  display: none;
 }
</style>
<script type="text/javascript">
 function meh(id){
  if(id==3){
    return false; // submit form?
  }
  c[id].className ='';
 }
</script>
<form id="dynform">
 <div>
  <label>naam</label>
  <input type="text" onchange="meh(1)"></input>
 </div>
 <div>
  <label>address</label>
  <input type="text" onchange="meh(2)"></input>
 </div>
 <div>
  <label>something</label>
  <input type="text" onchange="meh(3)"></input>
 </div>
</form>

<script type="text/javascript">
    var f = document.getElementById('dynform');         
    var c = f.children;         
    for(i = 1; i < c.length; i++) {                    
      c[i].className ='hide';
    }
</script>

Thomas van den Heuvel

05-09-2015 11:24 gewijzigd op 05-09-2015 11:25

Fair enough, en nog een aanvulling: gebruik een JavaScript framework (bijvoorbeeld jQuery) zodat je ook een (wat betere) garantie hebt dat alles ook cross browser compatible is.

Daarmee maak je het ook minder "obtrusive" - de onclick-/onchange- etc. events kun je dan uit je HTML halen.

Johan West

05-09-2015 12:37

Goed

bedankt mensen voor de hulp.

Reageren

Inloggen om te reageren