Vorhandenes Ajax mehrmals anwenden

[hydromeister]

Halli Hallo
folgendes

Ich habe mir zwecks überprüfung ob username etc. schon vergeben ist folgendes script genommen
http://www.shawngo.com/gafyd/index.html

nun möchte ich es nicht nur auf den Benutzername anweden, sonder auch auf Firmenname und E-Mail Adresse.

rein technisch geht es ja

$(document).ready(function() {
	$('#usernameLoading').hide();
	$('#username').blur(function(){
	  $('#usernameLoading').show();
      $.post("check.php", {
        username: $('#username').val()
      }, function(response){
        $('#usernameResult').fadeOut();
        setTimeout("finishAjax('usernameResult', '"+escape(response)+"')", 400);
      });
    	return false;
	});
});

$(document).ready(function() {
	$('#companynameLoading').hide();
	$('#companyname').blur(function(){
	  $('#companynameLoading').show();
      $.post("check.php", {
        companyname: $('#companyname').val()
      }, function(response){
        $('#companynameResult').fadeOut();
        setTimeout("finishAjax2('companynameResult', '"+escape(response)+"')", 400);
      });
    	return false;
	});
});

function finishAjax(id, response) {
  $('#usernameLoading').hide();
  $('#'+id).html(unescape(response));
  $('#'+id).fadeIn();
} //finishAjax
function finishAjax2(id, response) {
  $('#companynameLoading').hide();
  $('#'+id).html(unescape(response));
  $('#'+id).fadeIn();
} //finishAjax

also das müsste ich ja jetzt nur noch auf email erweitern. Nun denke ich, gibt es bestimmt noch eine nettere Variante das zu lösen.

Desweiteren wäre es cool wenn ein submit des formulars erst möglich wäre, wenn alles "okay" ist.

Evtl. könnt ihr mir ja helfen, wäre sehr nett.
Ich bin im bereich jQuery und Ajax ein frischling

grüße

 

[Quaese]

Hi,

wenn sich wie vermutet nur das Präfix ändert (username, companyname, email) und dies zugleich die ID des aufrufenden Elements (blur-Event) ist, könntest du die Routine verallgemeinern.

$(document).ready(function() {
  $('#usernameLoading, #companynameLoading, #emailLoading').hide();
  $('#username, #companyname, #email').blur(function(){
    var _this = this
    $('#'+_this.id+'Loading').show();
    $.post("check.php", {
      check_val: $('#'+_this.id).val(),
      field: _this.id
      }, function(response){
        $('#'+_this.id+'Result').fadeOut();
        setTimeout("finishAjax('"+_this.id+"', '"+escape(response)+"')", 400);
    });
    return false;
  });
});

function finishAjax(id, response) {
  $('#'+id+'Loading').hide();
  $('#'+id+'Result').html(unescape(response));
  $('#'+id+'Result').fadeIn();
} //finishAjax

Um identifizieren zu können, welches Feld gerade den Ajax-Request ausführt, wird der Parameter field ans auswertende Script übergeben.
Der auszuwertende Wert selbst wird im Parameter check_val übergeben.

Das Absenden des Formulars kannst du verhindern, indem du im onsubmit-Event des form-Tags eine Funktion aufrufst, in der die Felder getestet werden. Die Rückgabe der Funktion (true/false) entscheidet, ob das Formular gesendet wird.

HTML:

<form method="post" action="ziel.php" onsubmit="return checkIt();">

JavaScript (nur schematisch):

function checkIt(){
  var blnOK = true;

  // Test der erforderlichen Felder, z.B.
  if($('#username').val()=="")
    blnOK=false;

  // Rückgabe
  blnOK;
}

Vielleicht hilft dir das weiter.

Ciao
Quaese