Über submit button neues php file innerhalb der offenen site in einer divbox ausführe @ tutorials.de: Tutorials, Forum & Hilfe

Ghostwarrior · 18.11.08 13:26

Hallo Leute,
ich habe die Frage, ob es möglich ist, über ein "submit" Button eines "form" Elements ein php file in einer div box auf der selben Seite auszuführen ohne das die Seite neu geladen wird.
Sprich wenn ich auf den Button klick möchte ich eine Datenbankabfrage ausführen und den Value des Submit Buttons mit der Datenbank abgleichen. Das Ergebnis soll dann in der Div-Box dargestellt werden.

Ist so etwas überhaupt möglich?

Vielen Dank für eure Hilfe

Back2toxic · 18.11.08 13:36

Ja, Stichwort Ajax.
Recht einfach durch die Prototype-Library zu realisieren.

Für dich in dem Fall interessant http://www.prototypejs.org/api/ajax/request

Bei Fragen - fragen

Beispiel:
Aufruf deiner PHP-Datei

PHP-Code:


<html>

<head>

  <script src="js/lib/prototype.js" type="text/javascript"></script>



<script type="text/javascript">

//Time lässt einen Timer mitlaufen, hieran siehst du, dass es keinen Reload gibt

    function time(){

        elem = document.getElementById('zeitdiv')

        elem.innerHTML = parseInt(elem.innerHTML)+1;

        setTimeout("time()",1000);

    }





    function myAjaxRequest(url,reqType,output,async){

        //entspricht document.getElementById(output), prototype.js funktion

        var out = $(output); 



        //neuen Ajax-Request anstoßen

        new Ajax.Request(url, {

            method: reqType,

            asynchronous: async,

            onSuccess: function(transport) {

                out.innerHTML = transport.responseText;

            },

            onFailure: function(transport) {

                alert(transport.responseText);

            }



        });

    }



</script>

</head>

<body onload="time();">

<div id="zeitdiv">0</div>

<div id="outputDiv">&nbsp;</div>

<form>

    <button onclick="myAjaxRequest('index.php','POST','outputDiv',true); return false;">

    Absenden

    </button>

</form>

</body>

</html>

Ghostwarrior · 18.11.08 13:46

Danke, das hört sich doch schon mal gut an.
Allerdings ist mir die Realisierung noch etwas unklar.

Ich habe folgendes "form" Element

Code :

echo '<form method="post" name="form" action="templates/startsite/select_signaturee.php">';
 echo '<select class="startseite_ausgabe" name="signatures" size="13">';
  echo '<optgroup label="Signaturgruppen (Systematik)">';
    for($i=0; $i<count($this->$signatures); $i++) {
     $uebergabevalue = $signatures[$i]->signature .'_'. $signatures[$i]->systematic;
     echo '<option value="'. $uebergabevalue .'">'. $signatures[$i]->signature .' ('. $signatures[$i]->systematic .')</option>';
    }
  echo '</optgroup>';
 echo '</select>';
 echo '<br />';
 echo '<p><input type="submit" value="Signaturgruppe w&auml;hlen" /></p>';
echo '</form>';

Die über "action" aufgerufene Datei sieht so aus:

Code :

<?php
/*Datenbankverbindung*/ 
      $link = mysql_connect ( "", "", "");
      if (!$link) {
        die('keine Verbindung möglich: ' . mysql_error());
        }
        $db_selected = mysql_select_db('', $link);
        if (!$db_selected) {
        die ('Kann die Datenbank nicht benutzen : ' . mysql_error());
        }
        
    //print_r($_POST);
    
/*Variablen trennen*/
    $part = explode("_",$_POST['signatur']);
    $signatur = $part[0];
    $systematik = $part[1]; 
    
    $sqlstr = "SELECT signatur, systematik, bez, BereichID FROM `bis_signaturen` WHERE signatur='".$signatur."' and systematik='".$systematik."'";
    $sqlstr2 = "SELECT id, bez, farbe FROM `bis_metaebene`  ORDER BY `id` ASC";
    $sqlstr3 = "SELECT regalID, stockwerkID, signatur, systematik FROM `bis_vt_sign_regale`  WHERE signatur='".$signatur."' and systematik='".$systematik."'";
    
/*Auslesen der Signatur aus der Datenbank*/
    $result = mysql_query($sqlstr);
    if (!$result) {
        die('Ungültige Abfrage: ' . mysql_error());
    }
 
    $signaturen = array();
    while($row = mysql_fetch_object($result))
        {
            array_push($signaturen, new signaturen($row->signatur, $row->systematik, $row->bez, $row->BereichID));
        }       
/*Klasse Signaturen*/
    class signaturen {
        function signaturen($sig, $sys, $bez, $ber) {
            $this->signatur = $sig;
            $this->systematik = $sys;
            $this->bez = $bez;
            $this->BereichID = $ber;
        }
    }
/*Auslesen der Metaebenen aus der Datenbank*/
    $result = mysql_query($sqlstr2);
        if (!$result){
            die('Ungültige Abfrage: ' . mysql_error());
        }
 
        $metaebenen = array();
        while($row = mysql_fetch_object($result))
        {
            array_push($metaebenen, new metaebenen($row->id, $row->bez, $row->farbe));
        }
/*Klasse metaebenen*/
        class metaebenen {
            function metaebenen($id, $bez, $farbe) {
                $this->id = $id;
                $this->bez = $bez;
                $this->farbe = $farbe;
            }
        }          
/*Auslesen der Stockwerke aus der Datenbank*/
    $result = mysql_query($sqlstr3);
    if (!$result) {
        die('Ungültige Abfrage: ' . mysql_error());
    }
 
    $stockwerke = array();
    while($row = mysql_fetch_object($result))
        {
            array_push($stockwerke, new stockwerke($row->regalID, $row->stockwerkID, $row->signatur, $row->systematik));
        }
/*Klasse stockwerke*/
        class stockwerke {
            function stockwerke($rid, $sid, $sig, $sys) {
                $this->regalID = $rid;
                $this->stockwerkID = $sid;
                $this->signatur = $sig;
                $this->systematik = $sys;
            }
        }       
                        
        echo '<p>Signatur <b>'.$signaturen[0]->signatur.' - '.$signaturen[0]->bez.'</b> geh&ouml;rt zur Metaebene:</p>';
/*Abfrage, welcher Metaebene die Signatur entspricht*/
        if ($signaturen[0]->systematik == $systematik && $signaturen[0]->BereichID == $metaebenen[0]->id ){
            echo '<span style="background-color:'.$metaebenen[0]->farbe.';">'.$metaebenen[0]->bez.'</span>';
        }
        if ($signaturen[0]->systematik == $systematik && $signaturen[0]->BereichID == $metaebenen[1]->id){
            echo '<span style="background-color:'.$metaebenen[1]->farbe.';">'.$metaebenen[1]->bez.'</span>';
        }
        if ($signaturen[0]->systematik == $systematik && $signaturen[0]->BereichID == $metaebenen[2]->id){
            echo '<span style="background-color:'.$metaebenen[2]->farbe.';">'.$metaebenen[2]->bez.'</span>';
        }
        if ($signaturen[0]->systematik == $systematik && $signaturen[0]->BereichID == $metaebenen[3]->id){
            echo '<span style="background-color:'.$metaebenen[3]->farbe.';">'.$metaebenen[3]->bez.'</span>';
        }
        if ($signaturen[0]->systematik == $systematik && $signaturen[0]->BereichID == $metaebenen[4]->id){
            echo '<span style="background-color:'.$metaebenen[4]->farbe.';">'.$metaebenen[4]->bez.'</span>';
        }
        
/*Variablen für die Anzahl der Regale auf den einzelnen Stockwerken*/
        $sumlevelone = 0;
        $sumleveltwo = 0;
        $sumlevelthree = 0;
        $sumlevelfour = 0;
/*Auf welchen Stockwerken befindet sich die Signatur?*/
        for($i=0; $i<count($stockwerke); $i++) {
            if($stockwerke[$i]->signatur == $signatur && $stockwerke[$i]->systematik == $systematik){
                if($stockwerke[$i]->stockwerkID == 1){
                    $sumlevelone++;
                }
                if($stockwerke[$i]->stockwerkID == 2){
                    $sumleveltwo++;
                }
                if($stockwerke[$i]->stockwerkID == 3){
                    $sumlevelthree++;
                }
                if($stockwerke[$i]->stockwerkID == 4){
                    $sumlevelfour++;
                }
            }
        }
/*Ausgabe der Regalanzahl auf den einzelnen Stockwerken*/
        echo '<p>Im <a href="#">1. Obergeschoss</a> befinden sich '.$sumlevelfour.' Regale mit der gew&auml;hlten Signaturgruppe.</p>';
        echo '<p>Im <a href="#">Erdgeschoss</a> befinden sich '.$sumlevelthree.' Regale mit der gew&auml;hlten Signaturgruppe.</p>';
        echo '<p>Im <a href="#">1. Untergeschoss</a> befinden sich '.$sumleveltwo.' Regale mit der gew&auml;hlten Signaturgruppe.</p>';
        echo '<p>Im <a href="#">2. Untergeschoss</a> befinden sich '.$sumlevelone.' Regale mit der gew&auml;hlten Signaturgruppe.</p>';
        
/*Beenden der Datenbankverbindung*/
        mysql_close($link);
        
/*Zurück auf Ausgangsseite*/        
        header("location:template_ebene_0.php");
?>

wie muss ich nun vorgehen, dass ich dies in der Seite mit dem "form" Element laden ausführen kann?

Back2toxic · 18.11.08 14:39

Willst du das Form-Element gegen die Ausgabe tauschen, oder soll das Form-Element bestehen bleiben, und die Ausgabe darüber oder darunter erfolgen?

In jedem Fall musst du noch ein Leeres Div erzeugen, welches dir später als Ausgabediv dient, und du musst jedem Form-Element noch eine ID zuweisen. diese kann gleich dem name-Attribut der Elemente sein, darf aber nicht doppelt vergeben sein!

Soll das Form-Element durch die Ausgabe ersetzt werden, so musst du das Form-Element durch das Div einschließen.

Code :

<div id="output">
<form>
...
</form>
</div>

Soll das Form-Element bestehen bleiben, so muss das Div über oder unter das Form-Element.

Code :

<form>
...
</form>
<div id="output">&nbsp;</div>

Dem Submitbutton musst du nun ein onclick-Event zuweisen, welches den AjaxRequest auslöst. Hierbei musst du verschiedene Parameter mit übergeben.
Der Aufruf ist wie folgt:
deinAjaxRequest(url,requestType,outputDiv,asynchron)

Als url trägst du deine Form-Action ein.
Als requestType trägst du deine Form-Method ein.
Als OutputDiv trägst du das Div ein, in welches später die Ausgabe erfolgen soll.
Bei Asynchron trägst du true oder false ein, true für asynchron, false für nicht-asynchron(synchron?).

Code :

1	onclick="deinAjaxRequest('templates/startsite/select_signaturee.php','POST','output','true'); return false;"

Somit wäre dieser Teil erledigt.

Damit Javascript aber nicht meckert, muss jetzt die Funktion "deinAjaxRequest" angelegt werden. Dazu musst du erst die prototype.js im <head>-Bereich deiner Seite includen, diese findest du unter dem Link in meinem ersten Post.
Danach inkludierst du entweder deine eigene Javascript-Datei, oder du schreibst den Javascript-Code direkt in Script-Tags in deine Datei:

Code :

<script src="pfad/zur/prototype.js" type="text/javascript"></script>
//entweder include
<script src="pfad/zur/scripts.js" type="text/javascript></script>
//oder direkt in die Datei
<script type="text/javascript">
function deinAjaxRequest(url,reqType,output,async){
    output = $(output);
    output.innerHTML="Bitte warten...";
 
    //Zuerst muss die url aufbereitet werden
    sig = $('signatures');
    url += 'signatures?'sig.value;
 
//Jetzt der AjaxRequest
                new Ajax.Request(url, { 
                              method: reqType,
                              asynchronous: async,
                              onSuccess: function(transport) {
                                      out.innerHTML = transport.responseText;
                              },
                             onFailure: function(transport) {
                                      alert(transport.responseText);
                                      output.innerHTML = "Fehler!";
                              }
                });
}
</script>

Ich hoffe es war verständlich... falls nicht, einfach fragen

Ghostwarrior · 18.11.08 16:35

Vielen Dank für deine verständliche und ausführliche Antwort. Sorry, dass ich mich so lange nicht gemeldet habe, war noch mit einem anderen Problem beschäftigt.

Ich bin jetzt mal nach deiner Anleitung vorgegangen und habe es getestet. Leider kommt eine PHP-Fehlermeldung für folgender Zeile:

Code :

1	<input type="submit" value="Signaturgruppe wählen" onclick="AjaxRequest('templates/startsite/select_signature.php','POST','output','true'); return false;" />

Die Fehlermeldung lautet:

Parse error: syntax error, unexpected T_STRING, expecting ',' or ';' in

Back2toxic · 19.11.08 13:17

Die einfachste Möglichkeit den Fehler zu beheben ist einen schließenden php-Tag vor das <input type="submit">, und einen öffnenden nach das Element zu stellen.
Der Fehler wird durch die Hochkommata im Aufruf der Javascriptfunktion erzeugt.

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Neues Formular über Button öffnen

Button liegt innerhalb einer Maske

mit Submit- Button einer Variable einen Wert zuweisen..

Wert von Radio Button auf einen Submit Button weiterleiten

Formular wird über den (für mich) falschen Submit-Button gesendet

E-Mail:

Abonnieren Abbestellen