html - Opdater form-elementer - getElementById() - Udvikleren.dk

Tags: javascript html

Bruger #16927 @ 25.12.11 10:11

Hej!

Jeg forsøger at opdatere options i en select i en dynamisk form.
Ideen er, at brugeren selv kan tilføje linjer i formen, og den del virker. Men det betyder, at formelementerne har nye navne og ID for hver linje der bliver tilføjet. Det giver forhåbentlig mening her:

HTML kode

 <form name="customForm">
 <div id="dynamicInput">
 <p>
 <select name="hovedfelt1" onchange="updatechoices(delfelt1, this.value);" style="width:150px;">
   <option>Vælg hovedfelt</option>
   <option>Titelfelt</option>
   <option>Materialetype</option>
   <option>Forfatterfelt</option>
 </select>
 <select name="delfelt1" id="delfelt1" style="width:150px;"></select>
 <input type="text" name="datafelt1" /></p>
 </div>
 <p><input type="button" value="Tilføj linje" onClick="addInput('dynamicInput');" /></p>
 </form>

og javascript:

JScript kode

 function updatechoices(objLine, choice)
 {
     if(choice == "Titelfelt")
     {
         document.customForm.getElementById(objLine).options[0]=new Option("Hovedtitel", "hovedtitel", true, false);
         document.customForm.getElementById(objLine).options[1]=new Option("Undertitel", "undertitel", false, false);
     }
     else if(choice == "Forfatterfelt")
     {
         document.customForm.getElementById(objLine).options[0]=new Option("Fornavn(e)", "fornavn", true, false);
         document.customForm.getElementById(objLine).options[1]=new Option("Efternavn", "efternavn", false, false);
         document.customForm.getElementById(objLine).options[2]=new Option("født d.", "birth", false, false);
     }
 }
 
 var counter = 1;
 var limit = 15;
 function addInput(divName){
      if (counter == limit)  {
           alert("Du kan ikke tilføje flere linjer.");
      }
      else {
           var newdiv = document.createElement('div');
           newdiv.innerHTML = "<p><select name='hovedfelt" + (counter + 1) + "' onchange='updatechoices(delfelt" + (counter + 1) + ", this.value);' style='width:150px;'><option>Vælg hovedfelt</option><option>Titelfelt</option><option>Materialetype</option><option>Forfatterfelt</option></select> <select name='delfelt" + (counter + 1) + "' id='delfelt" + (counter + 1) + "' style='width:150px;'></select> <input type='text' name='datafelt" + (counter + 1) + "' />";
           document.getElementById(divName).appendChild(newdiv);
           counter++;
      }
 }

Hvis jeg bytter getElementById(objLine) ud med den enkelte linjes egentlige id/navn virker det. Men fordi formen er dynamisk, vil jeg gerne kunne bruge getElementById(), så jeg kan identificere hver felt for hver linje.

Nogen forslag?

3 svar postet i denne tråd vises herunder
1 indlæg har modtaget i alt 1 karma

Sorter efter stemmer Sorter efter dato

Bruger #16025 @ 25.12.11 12:10

442

JavaScript

JScript kode

 function updatechoices(objLine, choice)
  {
      var divObjLine = document.getElementById(objLine);
      
      if(choice == "Titelfelt")
      {
          
          divObjLine.options[0]=new Option("Hovedtitel", "hovedtitel", true, false);
          divObjLine.options[1]=new Option("Undertitel", "undertitel", false, false);
      }
      else if(choice == "Forfatterfelt")
      {
          
          divObjLine.options[0]=new Option("Fornavn(e)", "fornavn", true, false);
          divObjLine.options[1]=new Option("Efternavn", "efternavn", false, false);
          divObjLine.options[2]=new Option("født d.", "birth", false, false);
      }
      else if(choice == "Materialetype")
      {
          
          //alert("fkjhdf");
      }
  }
  
  var counter = 1;
  var limit = 15;
  function addInput(divName){
       if (counter == limit)  {
            alert("Du kan ikke tilføje flere linjer.");
       }
       else {
            var newdiv = document.createElement('div');
            newdiv.innerHTML = "<p><select name='hovedfelt" + (counter + 1) + "' onchange='updatechoices(delfelt" + (counter + 1) + ", this.value);' style='width:150px;'><option>Vælg hovedfelt</option><option>Titelfelt</option><option>Materialetype</option><option>Forfatterfelt</option></select> <select name='delfelt" + (counter + 1) + "' id='delfelt" + (counter + 1) + "' style='width:150px;'></select> <input type='text' name='datafelt" + (counter + 1) + "' />";
            document.getElementById(divName).appendChild(newdiv);
            counter++;
       }
  }

HTML

HTML kode

 <form name="customForm">
  <div id="dynamicInput">
  <p>
  <select name="hovedfelt1" onchange="updatechoices('delfelt1', this.value);" style="width:150px;">
    <option>Vælg hovedfelt</option>
    <option>Titelfelt</option>
    <option>Materialetype</option>
    <option>Forfatterfelt</option>
  </select>
  <select name="delfelt1" id="delfelt1" style="width:150px;"></select>
  <input type="text" name="datafelt1" /></p>
  </div>
  <p><input type="button" value="Tilføj linje" onClick="addInput('dynamicInput');" /></p>
  </form>

Er det noget hen af dette du søger?
Jeg sidder lige nu og arbejder med det, men den første linje burde virke. Men jeg arbejder på at få de "nye" linjer til at fungere.

Indlæg senest redigeret d. 25.12.2011 12:15 af Bruger #16025

Bruger #16927 @ 25.12.11 14:05

Så lykkedes det!
Daniele, du var inde på noget af de rigtige:

HTML kode

 <form name="customForm" id="customForm">
 <div id="dynamicInput">
 <p>
 <select name="hovedfelt1" onchange="updatechoices('delfelt1', this.value);" style="width:150px;">
 <option>Vælg hovedfelt</option>
 <option>Titelfelt</option>
 <option>Materialetype</option>
 <option>Forfatterfelt</option>
 </select>
 <select name="delfelt1" id="delfelt1" style="width:150px;"></select>
 <input type="text" name="datafelt1" /></p>
 </div>
 <p><input type="button" value="Tilføj linje" onclick="addInput('dynamicInput');" /></p>
 </form>

JScript kode

 function updatechoices(objLine, choice)
 {
     var divObjLine = document.getElementById(objLine);
     if(choice == "Titelfelt")
     {
         divObjLine.options[0]=new Option("Hovedtitel", "hovedtitel", true, false);
         divObjLine.options[1]=new Option("Undertitel", "undertitel", false, false);
     }
     else if(choice == "Forfatterfelt")
     {
         divObjLine.options[0]=new Option("Fornavn(e)", "fornavn", true, false);
         divObjLine.options[1]=new Option("Efternavn", "efternavn", false, false);
         divObjLine.options[2]=new Option("født d.", "birth", false, false);
     }
     else if(choice == "Materialetype")
     {
         //alert("fkjhdf");
     }
 }
 
 var counter = 1;
 var limit = 3;
 function addInput(divName)
 {
     if (counter == limit)
     {
         alert("Du kan ikke tilføje flere linjer.");
     }
     else
     {
         var newdiv = document.createElement('div');
         
         var newHovedfelt = "hovedfelt" + (counter + 1);
         var newDelfelt = "delfelt" + (counter + 1);
         var newDatafelt = "datafelt" + (counter + 1);
         
         newdiv.innerHTML += '<p>';
         newdiv.innerHTML += '<select name="' + newHovedfelt + '" onchange="updatechoices(\'' + newDelfelt + '\', this.value);" style="width:150px;"><option>Vælg hovedfelt</option><option>Titelfelt</option><option>Materialetype</option><option>Forfatterfelt</option></select> ';
         newdiv.innerHTML += '<select name="' + newDelfelt + '" id="' + newDelfelt + '" style="width:150px;"></select> ';
         newdiv.innerHTML += '<input type="text" name="' + newDatafelt + '" />'
         newdiv.innerHTML += '</p>';
         
         document.getElementById(divName).appendChild(newdiv);
         
         counter++;
     }
 }

Bruger #16025 @ 25.12.11 14:56

442

Hehe, det var godt

.
Husk at bedømme med karma hvilket indlæg der hjalp dig bedst .

Opdater form-elementer - getElementById()

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler