onchange="this.form.submit() ohne Seiten reload

[Matzen]

Hallo,

ich versuche mich gerade an einem auswahlmenü, wobei das ausgewählte sofort abgesendet und gepseichert werden soll. zusätzlich soll dabei nicht die seite sondern nur die div box neu geladen werden. beides funzt jedoch nur unabhänig voneinander... also entweder, oder... würde das gerne verbinden, das ich beide funktionen nutzen kann. Ich hoffe ich habe mich verständich ausgedrückt und ihr könnt mir folgen, was ich meine: für den reload verwende ich ajax-js

hier mal mein code:

    <p>Wähle Deinen Status!</p>
    
    <form name="emotion" method="post" >


    <input name="chemo" type="hidden" value="chemo"/> 
      <select name="emotion" id="emotion" onchange="return ajaxAnzeige(this.value)">
        <option value="setnull">Neutral</option>
              <option value="ist gut gelaunt">Gute Laune</option>
              <option value="hat schlechte Laune">Schlechte Laune</option>
              <option value="ist in Flirtlaune">Flirt Laune</option>
              <option value="ist gelangweilt">Gelangweilt</option>
              <option value="ist besch&auml;ftigt">Besch&auml;ftigt</option>
              <option value="will angeschrieben werden">Schreibt mir</option>
          </select>
          

 
    <div id='ajaxAusgabe'></div>
    {$emo}
    </form> 

und die js

var xmlhttp_ajaxAnzeige;
 
function ajaxAnzeige(str)
{
	xmlhttp_ajaxAnzeige=GetXmlHttpObject();
	if (xmlhttp_ajaxAnzeige==null)
	{
		alert ("Browser does not support HTTP Request");
		return false;
	}
 
	var url="aboutme.php";
 
	url=url+"?wert="+str;
	xmlhttp_ajaxAnzeige.onreadystatechange=stateChanged_ajaxAnzeige;
	xmlhttp_ajaxAnzeige.open("GET",url,true);
	xmlhttp_ajaxAnzeige.send(null);
 
	document.getElementById("ajaxAusgabe").innerHTML="<img src='loading.gif' />";
 
	return false;
}
 
function stateChanged_ajaxAnzeige()
{
	if (xmlhttp_ajaxAnzeige.readyState==4)
	{
	  document.getElementById("ajaxAusgabe").innerHTML=xmlhttp_ajaxAnzeige.responseText;
	}
}
 
 
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
  {
  //ie7+, firefox, chrome, opera, safari
  return new XMLHttpRequest();
  }
if (window.ActiveXObject)
  {
  //ie6,ie5
  return new ActiveXObject("Microsoft.XMLHTTP");
  }
return false;
}

am ende geht es glaube ich, nur um dieses:

<select name="emotion" id="emotion" onchange="return ajaxAnzeige(this.value)">

ich müsste jetzt quasi folgendes:

onchange="this.form.submit()"

mit einbringen. aber egal wie ich es drehe und wende, funzt es nicht. Wäre schön wenn mir jemand weiterhelfen könnte.

[eMacher]

Naja, man kann es drehen und wenden wie man will: Ein "this.form.submit()" wird unter "normalen" Umständen wohl immer einen Seitenreload zur Folge haben. ;-)
Du wirst das submit-Event des Formulars mit eigenem Code überschreiben müssen, wo das gemacht wird, was statt dem Seitenreload passieren soll...

Wenn du z.B. mit jQuery arbeitest, könnte das so aussehen:

$('#emotion').submit(function() {
/* Hier Code einsetzen, AJAX-Request, Div-Box aktualisieren, etc. */
return false; // wichtig, damit das Formular nicht doch abgesendet wird und einen Seitenreload bewirkt
});

Viele Grüße,
Der eMacher