✔ <input> field automatisch generieren und automatisch Funktionen aufrufen lassen

[Sylan]

Hallo allerseits!

(Ich hab keine Ahnung gehabt, wie ich das Problem im Titel zusammenfassen sollt, entschuldigt )

Ich habe ein Formular, in dem man 1 - n Dateinamen eintragen kann. Das ist ein input field, und mit einem Button kann man per JS beliebig viele Zeilen mit input fields hinzufuegen.
Jetzt moechte ich jedoch ueberpruefen lassen, ob die Dateinamen eine bestimmte Endung haben, wenn ja, sollen sie weiter unten im Formular in neuen input fields ausgegeben werden.
Bisher habe ich folgenden Code:

<script language="javascript">

function addRowToTable()
{
  var tbl = document.getElementById('filetable');
  var lastRow = tbl.rows.length;
  
  var iteration = lastRow-1;
  var row = tbl.insertRow(lastRow);

  ////////////////////////////////////////////////////////////////////////////////////////////////////
  // Source location
  var source = row.insertCell(1);
  var el = document.createElement('input');
  el.type = 'text';
  el.name = 'source[' + iteration + ']';
  el.id = 'source' + iteration;
  // Hier sollte eine Funktion aufgerufen werden, welche checkt ob der Wert der
  // reingeschrieben wurde auf .exe endet, wie z.b.: 
  checkForSpecials(document.getElementById('source'+iteration));
  el.size = 30;
  source.appendChild(el);
 }

function checkForSpecials(source){
  if(checkForSpecials.arguments[0]!=""){   // War nur zum testen...
    alert("Hallo!");
  }
}
</script>
 [...]
<input type="button" value="Add row" onclick="addRowToTable();" />
<td><input type="text" name="source[1]" id="source1" size="30" onchange="alert('changed');"></td>

Ich hab mir gedacht, dass jedes mal, wenn der Benutzer aus dem gerade beschriebenen Input field rausgeht, um z.b. auf den "Add row" button zu klicken, eine Funktion aufgerufen wird, die dann ueberprueft ob die Datei mit .exe endet oder nicht. Wenn ja, dann soll die Datei in ein neu generiertes input field geschrieben werden.
Wie genau kann man nun die Funktion aufrufen lassen? Oben (Nach dem Kommentar) hab ich mal was eingefuegt, aber so richtig funktioniert es nicht...
Stehe mir grad selber glaube ich auf dem Schlauch ^^ Noch dazu kann ich kaum JS...
Wer kann meine Gedanken in ie richtige Richtung schubsen?

 

[Sylan]

Hat keiner eine Idee? Ich komm da einfach nicht weiter, auch nach SelfHTML durchsuchen und nachgoogeln nicht...

 

[Sylan]

Problem mit onChange( ) ...

So, nochmal ich, vll schildere ich mein Problem mal genauer damits Antworten bekommt...

Also, Ich hab das Problem, dass ich mehrere Eingabefelder habe, bei denen jeweils der Inhalt ueberprueft werden soll und wenn der Inhalt einen bestimmten Wert hat, sollen automatisch weitere Eingabefelder erscheinen, in denen der Inhalt aus den ersten Eingabefeldern erscheint.

Bisher habe ich das einmal mit onChange() im Eingabefeld versucht, was aber nicht funktioniert da mit onChange nicht der gesamte Wert uebergeben wird und da die ersten Eingabefelder automatisch generiert werden (per Button click) ist das auch schwierig weil ich es nicht hinkriege, in dem jeweils neu generierten Feld ein neues onChange - Event zu kreieren.

Ein anderer Loesungsansatz war ein Button im zweiten Eingabefeld, der dann eine Funktion aufrufen soll, die schaut was alles im ersten Eingabefeld eingegeben wurde, aber da kam ich auch nicht weiter.

Kann mir irgendwer weiterhelfen?

LG
Sylan

 

[Sven Mintel]

Hier mal nen paar Änderungen....ich hoffe, dass du es so meintest:

<script language="javascript">

function addRowToTable(o)
{
  //Wert prüfen, wenn er nicht zutrifft, Funktion verlassen
  if(!o.value.match(/\w\.exe$/))return;
  
  //das onkeyup aus dem aktuellen Feld entfernen
  o.onkeyup={};
  
  var tbl = document.getElementById('filetable');
  iteration = tbl.rows.length;
  var row = tbl.insertRow(iteration);
  var source = row.insertCell(0);
  var el = document.createElement('input');
  el.type = 'text';
  el.name = 'source[' + iteration + ']';
  el.id = 'source' + iteration;
  
  
  //Wert und Funktionsaufruf setzen
  el.value=o.value;
  el.onkeyup=function(){alert('onkeyup')}
  
  el.size = 30;
  source.appendChild(el);
  el.focus();
 }


</script>

<table id="filetable" border="1">
<td><input type="text" name="source[1]" id="source1" size="30" onkeyup="addRowToTable(this)"></td>
</table>

 

[Sylan]

Hi, danke fuer die Antwort, aber ganz so meinte ich es leider nicht.
Bei deinem Code wird ja nach jedem Buchstaben schon die Funktion aufgerufen, aber ich moechte ja den ganzen Filenamen eingeben. Und die Ausgabe soll in einem weiteren textfeld erfolgen. Vll stell ich nochmal meinen Code deutlicher dar...

Javascript sieht so aus:

function addRowToTable()
{  
  var tbl = document.getElementById('filetable');
  var lastRow = tbl.rows.length;
  var iteration = lastRow-1;
  var row = tbl.insertRow(lastRow);
  
  // Counter cell
  var cellLeft = row.insertCell(0);
  var textNode = document.createTextNode(iteration);
  cellLeft.appendChild(textNode);
  ////////////////////////////////////////////////////////////////////////////////////////////////////
  // Source location
  var source = row.insertCell(1);
  var el = document.createElement('input');
  el.type = 'text';
  el.name = 'source[' + iteration + ']';
  el.id = 'source' + iteration;
  el.size = 30;
  source.appendChild(el);

Im Formular ist das zu sehen:

<form>
<h2>Input files:</h2>
<input type="button" value="Add row" onclick="addRowToTable();" />
<table border="1" id="filetable">
<tr>
    <td>1</td>
    <td><input type="text" name="source[1]" id="source1" size="30"></td>
</tr>
</table>

<h2>Special Files:</h2>
<table id='special'>
<tr>
  <td>
  <input type="text" name="specialC[]"  id="specialC[]" size="30"><br> 
  </td>
</tr>
</table>

In dem Eingabefeld mit ID specialC sollen dann alle files mit Endung .exe rein. Ich habe nun versucht, wenn man auf den Button addRow klickt, mit this.document.getElementById den Wert vom momentanen Feld auszulesen und zu ueberpruefen.
1. Problem: ist das this.document.getElementById ueberhaupt das richtige dafuer? Wenn ja, kann man mit this.document.getElementById('source'+iteration).value wirklich den momentanen Wert erfragen, oder gibt es da was besseres?
2. Problem: Diese Moeglichkeit funktioniert auch nur solange, wie man eine neue Zeile hinzufuegen will, sprich das letzte Eingabefeld wird nicht ueberprueft.
==> Es muesste in eine neue Funktion verpackt werden, hier ist das Problem dass ich nicht weiss, wie ich die am besten aufrufen soll und v.a. wo und wann.

Sou... I hope this claryfies things a little bit... ^^

LG
Sylan