Ajax Input erkennung

G

Godstyle

Erfahrenes Mitglied
Hallo Leute,

ajax ist noch ziemliches neuland denoch wage ich mich mal ran.

Stehe vor einem Problem, Ich habe ein Formular was später ca 30 eingabe Felder haben wird, ich kann nätürlich jedem eine Eindeutige ID zuweisen, doch mein Scrip müsste erkennen welche ID das script gestartet hat.

Mal mein Script:

Code: 
function sendRequest() {
	var req;
	try {
		req = window.XMLHttpRequest?new XMLHttpRequest(): 
		new ActiveXObject("Microsoft.XMLHTTP"); 
	} catch (e) {
		//Kein AJAX Support
	} 

	req.onreadystatechange = function() {
		if ((req.readyState == 4) && (req.status == 200)) { 
			document.getElementById('inhalt').innerHTML = req.responseText;
		}
	};

	var id = document.getElementById('').value;
	req.open('post', 'data.inc.php');
	req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	req.send('s='+ id); 
}

das script wird aufgerufen durch onBlur in einem Input feld:

HTML: 
<input type="text" name="vorname" id="vorname" onFocus="changeBgColor(this)" onBlur="change2BgColor(this);sendRequest(this)" value="<?php echo $row->vorname; ?>" />

im Grunde müsste ich für 1 Feld ja:
var id = document.getElementById('vorname').value;

nehmen, dann klappt es auch, aber ich möchte jetzt nicht für jedes Input feld dieses script kopieren und nur einen wert ändern.

Wie kann ich jetzt die id dynamisch erstellen, so das immer die des aktuellen Feldes übermittelt wird?

lg
 
Du übergibst der Funktion ja schon this, also musst du nur den ersten Parameter nutzen:
Javascript: 
function sendRequest(senderObj)
{
  // ...
  var id = senderObj.id;
}
 
So eine kleinigkeit noch, ich habe durch id sicher nun das richtige Feld, nur wie bekomme ich das jetzt in das script?

Code: 
function sendRequest(senderObj) {
	var req;
	try {
		req = window.XMLHttpRequest?new XMLHttpRequest(): 
		new ActiveXObject("Microsoft.XMLHTTP"); 
	} catch (e) {
		//Kein AJAX Support
	} 

	req.onreadystatechange = function() {
		if ((req.readyState == 4) && (req.status == 200)) { 
			document.getElementById('inhalt').innerHTML = req.responseText;
		}
	};

	var id = senderObj.id;
	var id2 = document.getElementById(id).value;
	req.open('post', 'data.inc.php');
	req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	req.send('s='+ id + '.' +id2); 
}

ich muss in dem nächsten script ja 2 daten erhalten, einmal die feld id und den wert der übermittelt wird um sie dann beim speichern richtig einzuordnen.

EDIT // hab den code getauscht, und nun geht wirklich alles, danke nochmal.
 
Zuletzt bearbeitet:
Du darfst nicht zweimal send() ausführen:
Javascript: 
req.send("s="+encodeURIComponent(id)+"&c="+encodeURIComponent(id2));
 
Zuletzt bearbeitet von einem Moderator:
danke com freak, hatte mein script auch angepasst und das funktionierte dann auch, nur leider gibt es da noch ein Problem, mit einem Feld gar kein Problem, doch wie man sicher erkennen konnte brauche ich das auch für mehrere, ich habe versucht das so zu lösen:

HTML: 
function sendRequest(senderObj) {
	var req;
	var id = senderObj.id;
	var id2 = document.getElementById(id).value;
	try {
		req = window.XMLHttpRequest?new XMLHttpRequest(): 
		new ActiveXObject("Microsoft.XMLHTTP"); 
	} catch (e) {
		//Kein AJAX Support
	} 

	req.onreadystatechange = function() {
		if ((req.readyState == 4) && (req.status == 200)) { 
			document.getElementById(id).innerHTML = req.responseText;
		}
	};

	req.open('post', 'data.inc.php');
	req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	req.send('s='+ id + '.' +id2); 
}

hier:
Code: 
			document.getElementById(id).innerHTML = req.responseText;

habe ich Inhalt ersetz und wollte dort auch die id ausgeben lassen um dann später auch unterschiedlich die antwort zurück zu erhalten, das mache ich wie folgt:

HTML: 
	<tr>
    	<td width="100">Vorname:</td>
        <td width="125">
        <div id="vorname">
        <input type="text" name="vorname" id="vorname" onFocus="changeBgColor(this)" onBlur="change2BgColor(this);sendRequest(this)" value="<?php echo $row->vorname; ?>" />
        </div>
        </td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
	<tr>
    	<td width="100">Spitzname:</td>
        <td width="125">
        <div id="spitzname">
        <input type="text" name="spitzname" id="spitzname" onFocus="changeBgColor(this)" onBlur="change2BgColor(this);sendRequest(this)" value="<?php echo $row->spitzname; ?>" />
        </div>
        </td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>

jetzt ist jedoch auf einmal das Problem das er mir grundsätzlich "undefined" als id liefert, was habe ich denn an dieser Stelle nicht beachtet.
 
Soweit ich weiß kann man nicht innerHTML eines Input-Feldes setzen. Wenn schon setzt man das value-Attribut.

Und irgendwie hast du das mit der id doppelt gemoppelt:
Javascript: 
function sendRequest(senderObj) {
    var req;
    var id = senderObj.id;
    var value = senderObj.value;

    // Zum Testen:
    alert(id + ":" + value);

    try {
        req = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e) {
        //Kein AJAX Support
        alert("No AJAX!");
    }

    req.onreadystatechange = function() {
        if ((req.readyState == 4) && (req.status == 200)) {
            senderObj.value = req.responseText;
        }
    };

    req.open('post', 'data.inc.php');
    req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    req.send('s=' + encodeURIComponent(id) + '.' + encodeURIComponent(value));
}?
 
Code: 
function sendRequest(senderObj) {
	var req;
	var id = senderObj.id;
	var id2 = senderObj.value;
	try {
		req = window.XMLHttpRequest?new XMLHttpRequest(): 
		new ActiveXObject("Microsoft.XMLHTTP"); 
	} catch (e) {
		//Kein AJAX Support
	} 

	req.onreadystatechange = function() {

		if ((req.readyState == 4) && (req.status == 200)) { 
			document.getElementById(id).innerHTML = req.responseText;
		}
	};

	req.open('post', 'data.inc.php');
	req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	req.send('s='+ id + '.' + id2); 
}

so war meine Lösung, hatte ich heut nacht noch irgendwie gemacht ehe ich eingepennt bin, sieht deiner sehr ähnlich und funktioniert auch, jetzt wo ich deine sehe stelle ich doch 2 dinge fest die mich interessieren.

1. encodeURIComponent: ist das eine absicherung der daten oder welche bewandnis hat das, da es auch ohne dieses geht.

2. }? das ist deine letzte zeile, was bewirkt dies?

Wie gesagt ich möchte es auch verstehen habe immerhin gemerkt das ich anscheinend getElementById nur einmal verwenden kann.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück