Formular mit PHP/MySQL im selben Fenster ausführen

N

nick_beat20

Grünschnabel
Hallo liebe Ajax-Community,
ich befasse mich erst seit heute mit Ajax und habe gleich ein Problem. Ich hoffe dass ihr mir helfen könnt da ich bei Google & Co keine Lösungen finde.

Und zwar habe ich eine index.php Datei geschrieben welche ich als Template nutze. Bei klick auf einen Menüpunkt, wechselt der Inhalt im content-Div per Ajax.

Hier das js-script zu dem Inhaltwechsel:

Code: 
// here we define global variable
var ajaxdestination="";

function getdata(what,where) { // get data from source (what)
 try {
   xmlhttp = window.XMLHttpRequest?new XMLHttpRequest():
  		new ActiveXObject("Microsoft.XMLHTTP");
 }
 catch (e) { /* do nothing */ }

 document.getElementById(where).innerHTML ="<center><img src='loading.gif'></center>";
// we are defining the destination DIV id, must be stored in global variable (ajaxdestination)
 ajaxdestination=where;
 xmlhttp.onreadystatechange = triggered; // when request finished, call the function to put result to destination DIV
 xmlhttp.open("GET", what);
 xmlhttp.send(null);
  return false;
}

function triggered() { // put data returned by requested URL to selected DIV
  if (xmlhttp.readyState == 4) if (xmlhttp.status == 200) 
    document.getElementById(ajaxdestination).innerHTML =xmlhttp.responseText;
}

So sehen die Links in meinem Menü aus:

HTML: 
<a href="#" onclick="getdata('customer_new.php','content');">Kunden anlegen</a>

Bis hierhin klappt alles so wie es sein soll.
Klicke ich auf den Link customer_new.php, bekomme ich ein Formular um einen neuen Kunden anzulegen. Auch noch OK.
Sende ich das Formular nun aber ab, geht ein neues Fenster auf und er führt die MySQL Operation in dem neuen Fenster aus. Es soll aber in dem gleichen Fenster bleiben.

Mein Formularaufruf sieht so aus:

HTML: 
<form id="customer_new" action="customer_new.php" method="post">

Kann mir jemand helfen, da ich absolut keinen Plan habe?
Danke schonmal.

Gruß Sven
 
Hi,

so wie der form-Tag aufgebaut ist (ohne target-Attribut) sollte es eigentlich ins gleiche Fenster gesendet werden.

Falls du meinst, dass das Fenster nach dem Abschicken des Formulars neu geladen wird, musst das Formular ebenfalls per Ajax versendet werden. Hierzu erstellst du eine Parameterliste aus den Formularelementen. Diese werden im Ajax-Request der send-Methode übergeben.
Ausgelöst wird der Ajax-Request im onsubmit-Event des Formulars. Zudem wird in diesem Event der Wert false zurückgegeben, um das eigentliche Senden des Formulars zu unterbinden.

Ciao
Quaese
 
Hi und danke für deine Antwort. Hast du vielleicht ein Beispiel für mich wie so eine Parameterliste auszusehen hat? Ich habe nähmlich nix dergleichen im Netz gefunden.

Gruß Sven
 
Hi,

wie bereits erwähnt, setzt sich die Liste aus den Elementen deines Formulars zusammen. Für ein Textfeld und eine Selektgruppe könnte das wie folgt aussehen:
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<script type="text/javascript">
var objXMLRequest = null;

function initRequest(){
  // Falls noch ein Request-Objekt existiert -> zunächst beenden
  if(objXMLRequest && objXMLRequest.readyState){
    objXMLRequest.abort( );
    objXMLRequest = false;
  }

  try{
    if(window.XMLHttpRequest){
      objXMLRequest = new XMLHttpRequest();
    }else if(window.ActiveXObject){
      try{
        objXMLRequest = new ActiveXObject("Msxml2.XMLHTTP");
      }catch(objExc){
      	try{
          objXMLRequest = new ActiveXObject("Microsoft.XMLHTTP");
        }catch(objExc){
          objXMLRequest = false;
        }
      }
    }
  }catch(objExc){
    alert("Es konnte keine XMLHttp-Instanz erstellt werden!");
    objXMLRequest = false;
    return false;
  }

  return true;
}

function theRequest(){
  initRequest();

  var objForm = document.getElementById("customer_new");
  var strParams = "";
  strParams += "name=" + escape(objForm.elements["txtName"].value);
  strParams += (objForm.elements["selReason"].options[objForm.elements["selReason"].selectedIndex].value != 0)
               ? "&grund=" + escape(objForm.elements["selReason"].options[objForm.elements["selReason"].selectedIndex].value)
               : "";

  objXMLRequest.open("POST", "dummy.php", true);
  objXMLRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  objXMLRequest.onreadystatechange = function(){
    if(objXMLRequest.readyState == 4){
      if(objXMLRequest.status == 200){
        document.getElementById("outID").innerHTML = unescape(objXMLRequest.responseText);
      }
    }
  }
  objXMLRequest.send(strParams);
}
</script>
</head>
<body>
<div id="outID">
  <form id="customer_new" action="" method="post" onsubmit="theRequest(); return false;">
    <label>Name: </label><input type="text" name="txtName" value="Quaese"><br>
    <label>Grund:</label>
    <select name="selReason">
      <option value="0">- auswählen -</option>
      <option value="ajax">Ajax-Formular</option>
      <option value="einfach so">einfach so</option>
    </select>
  <p><input type="submit"></p>
  </form>
</div>
</body>
</html>
Das antwortende Skript (dummy.php) zum Testen:
Code: 
<?php
  echo(rawurlencode(print_r($_POST, true)));
?>
Vielleicht hilft dir das weiter.

Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück