✔ [Ajax] Elemente in einer Schleife eindeutig ansprechen

[Steusi]

Hallo Leute,

ich glaube es ist mein erster Beitrag in diesem Bereich. Für ein neues Projekt komme ich ohne Ajax nicht aus, deshalb habe ich es mir heute einmal angesehen und bin gleich auf ein Problem gestoßen, welches sicher einfach zu lösen ist.

Ich möchte ein Element in einer Schleife ansprechen, nur wie? 2 identische id-namen dürfen nicht existieren und über den Namen komme ich auch auf keinen grünen Zweig.

Ich habe ein Formular, welches 2 Eingabefelder in beliebiger Wiederholung haben kann, durch JS gelöst.
im 1. Eingabefeld wird eine Nummer eingegeben und im 2. Feld soll automatisch der Name erscheinen.

Im Folgenden einmal meine Code gekürzt auf das Wichtigste.

Hier einmal mein Ajax/ JS Code:

<script type="text/javascript">
<!--
function clone_this(objButton)
{
if(objButton.parentNode)
    {
    tmpNode=objButton.parentNode.cloneNode(true);
    objButton.form.appendChild(tmpNode);
    for(j=0;j<objButton.form.lastChild.childNodes.length;++j)
        {
        if(objButton.form.lastChild.childNodes[j].type=='text')
            {
            objButton.form.lastChild.childNodes[j].value='';
            break;
            }
        }
    objButton.value="entfernen";
    objButton.onclick=new Function('f1','this.form.removeChild(this.parentNode)');
    }
}

function createXMLHttpRequest() {

var ua;

if(window.XMLHttpRequest) {
    try {
      ua = new XMLHttpRequest();
    } catch(e) {
      ua = false;
    }
  } else if(window.ActiveXObject) {
    try {
      ua = new ActiveXObject("Microsoft.XMLHTTP");
    } catch(e) {
      ua = false;
    }
  }
  return ua;
}

var req = createXMLHttpRequest();

function sendRequest(Feld) {
  req.open('get', 'site/func.php?s='+ Feld);
  req.onreadystatechange = handleResponse;
  req.send(null);
}

function handleResponse() {

  if(req.readyState == 4){
    document.getElementById('inhalt').value = req.responseText;
  }
  else
  alert("loading" + ajax.readyState);
}
//-->
</script>

In der func.php steht nur folgendes:

$result = mysql_query("SELECT name FROM `order` WHERE `nummer` = '".$_GET['s']."'; ");
$row = mysql_fetch_object($result);
echo($row->name);

Mein Formular sieht folgendermaßen aus:

    <div>
       <input type="text" name="Artnr[]" onblur="sendRequest(this.value)" size="20">
       <input type="text" name="Artname[]" id="inhalt" size="20">
       <input type="button" value="noch eins" onclick="clone_this(this)">
    </div>

Ich hoffe jemand hat eine Rat für mich

//edit: Ich habe mir gedacht, ich kann beim clonen ja einfach die ID von dem betreffenden Input-Feld ändern, mittels:

document.getElementById('inhalt').id='old';

Jedoch macht er es dann auch gleich für das Folgende.

//edit: Das Verstehe ich nicht, mit einem Mal klappt der Befehl mit dem ID-Wechsel doch

 

[Quaese]

Hi,

wenn sich die Positions des Ausgabe-Textfeldes nicht ändert und dieses immer an der zweiten Stelle steht, könntest du dich über den Dokumentenbaum und die Methode getElementsByTagName dorthin hangeln.

Beispiel:

HTML

    <div>
       <input type="text" name="Artnr[]" onblur="sendRequest(this)" size="20">
       <input type="text" name="Artname[]" id="inhalt" size="20">
       <input type="button" value="noch eins" onclick="clone_this(this)">
    </div>

JS:

Die entscheidenden Stellen habe ich im Quellcode kommentiert.

function sendRequest(Feld) {
  // Wert des Feldes übergeben
  req.open('get', 'site/func.php?s='+ Feld.value);
  // Der callback-Funktion wird das Ausgabefeld als Argument übergeben
  req.onreadystatechange = function(){
    // Beim Ausgabefeld handelt es sich um das 2-te input-Element des Elternknotens
    handleResponse(Feld.parentNode.getElementsByTagName('input')[1]);
  };
  req.send(null);
}

// Die callback-Funktion erhält das Ausgabefeld als Argument
function handleResponse(objField) {

  if(req.readyState == 4){
    // Dem Ausgabefeld die Antwort zuweisen
    objField.value = req.responseText;
  }
  else
    alert("loading" + req.readyState);
}

Ciao
Quaese