kostenloser Webspace werbefrei: lima-city


Direkte Verarbeitung des Formulars

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    fifa-society

    fifa-society hat kostenlosen Webspace.

    Hallo,

    ich versuche gerade mithilfe eines Tutorials (tag/http">http://marco.seaside-graphics.de/programmierung/ajax/jquery-ein-html-formular-per-ajax-versenden-und-eine-hinweis-seite-dynamisch-nachladen-animiert-anzeigen) einzubauen, dass die über das Formular abgesendeten Daten direkt auf dieser Seite ohne ein Neuladen verarbeitet werden können.

    Mein aktueller Stand sieht so aus:
    test.php
    <html>
    <head>
        <script src="http://code.jquery.com/jquery-1.5.min.js"></script>
        <script src="script/myApplication.js"></script></head>
    <body>    <div id="myContainer">
        
            <div id="myFormDiv">
            
                <form action="" id="myForm" method="post">
                
                    <input type="text" id="name" name="name" />
                    <br />
                    <input type="text" id="email" name="email" />
                    <br />
                    <input type="submit" value="Senden" />
                
                </form>
            
            </div>
        
        </div>
    </body>
    </html>


    myApplication.js:
    http://fifa-society.lima-city.de/phpkit/script/myApplication.js

    send.php:
    <?php
     
        /* werte übernehmen */
        $name = $_POST["name"];
        $email = $_POST["email"];
        
    	echo $name;
    	echo "Test";
    ?>


    Geplant hatte ich, dass nach einem Klick auf "Senden" die Daten in der send.php verarbeitet und diese eingebunden wird, allerdings funktioniert dies nicht. Aktuell wird zwar die send.php eingebunden, in dieser können jedoch die eingegeben Daten nicht abgerufen werden.
    Wer möchte kann es gerne mal selber auf der folgenden Seite testen, um zu veranschaulichen, dass die send.php eingebunden wird habe ich dort "Test" ausgeben lassen:
    http://fifa-society.lima-city.de/phpkit/include.php?path=test

    Hat evtl. jemand von euch eine Lösung für dieses Problem parat?

    Mit freundlichen Grüßen,

    fifa-society
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. das load() hat dann nichts mehr mit den gesendeten Daten zu tun,

    entweder Du speicherst die Variablen beim senden in Session und gibst diese dann aus
    oder gibst direkt das Ergebnis beim Senden aus, ohne nochmal .load()

    versuch mal so

    success: function(msg)
                {
                    /* form-div verstecken, seite nachladen & wieder einblenden (2000 ms) */
                    $("#myFormDiv").empty().html(msg).fadeIn(2000);
                }


    und anstatt dem
    $.ajax({  type: "POST", ... ...
    Konstrukt
    kannst Du auch direkt jQuery POST nehemen

    $.post("script/send.php", { "name" : $("#name").val() , "email" : $("#email").val() })
    .done(function(data) {
     $("#myFormDiv").empty().html(data).fadeIn(2000);
    });


    das ist die "Kurzform" für
    $.ajax({  type: "POST", ...  ...


    ist die Datei send.php auch im Ordner script/ ??
  4. Autor dieses Themas

    fifa-society

    fifa-society hat kostenlosen Webspace.

    Die Datei script.php ist im Ordner script, dank deiner Änderung funktioniert es jetzt auch soweit :)
    Das einzige kleine Problem, dass es jetzt noch gibt ist, dass das Ergebnis direkt eingeblendet wird, nicht erst nach 2000ms.
  5. versuch mal das .fadeIn() nach vorne zu setzen

    $("#myFormDiv").empty().fadeIn(2000).html(data);


    ... vielleicht ist es ja nur, weil zuerst html() ausgeführt wird und erst danach .fadein()

    also mal andersrum probieren ... :)

    Beitrag zuletzt geändert: 22.5.2013 17:32:32 von zitatbox
  6. Autor dieses Themas

    fifa-society

    fifa-society hat kostenlosen Webspace.

    Jetzt wird gar nichts mehr angezeigt :-D
  7. nimm als Daten nicht data sonder Dein msg ... Dein Variable-Name !!!

    nicht so
    $("#myFormDiv").empty().fadeIn(2000).html(data);


    sondern so
    $("#myFormDiv").empty().fadeIn(2000).html(msg);


    :xD ... :P .. sorry ...:=) .
  8. Autor dieses Themas

    fifa-society

    fifa-society hat kostenlosen Webspace.

    Angezeigt wird es jetzt zwar wieder, allerdings nach wie vor direkt und nicht erst nach 2000ms.
  9. hmm, keine Ahnung ...

    ... oha ... du nutzt ja Version: jquery-1.5.min
    ... nimm mal eine aktuellere jQuery Version ... http://code.jquery.com/jquery-1.9.1.min.js

    siehe: http://jquery.com/download/

    PS: jQuery 2.0 does not support Internet Explorer 6, 7, or 8 ... also besser die 1.9.1 Version nehmen.

    aber sollte eigentlich auch mit Version 1.5 funktionieren ?!!? ... hmmm

    hast Du es schonmal mit einem anderen Browser versucht ?

    sonst musst Du Dich bei jQuery oder dem Hersteller Deines Browsers beschweren :wall:



    Beitrag zuletzt geändert: 22.5.2013 17:52:50 von zitatbox
  10. Autor dieses Themas

    fifa-society

    fifa-society hat kostenlosen Webspace.

    Funktioniert leider auch mit der neueren jQuery Version und einem anderen Browser nicht - die Funktion ist aber ansonsten auch nicht dringend nötig ;-)
    Schonmal danke für deine Hilfe, aber ich hätte noch eine kleine Frage: Aktuell habe ich erstmal versucht es soweit zum Laufen zu bekommen. Jetzt möchte ich es allerdings auf meine Bedürfnisse umfunktionieren und statt dem input-Feld eine select-Box nutzen - wie kann ich das Script denn dementsprechend umschreiben? Habe es mal mit meinen (mehr als dürftigen) javascript Kenntnissen versucht, allerdings nur "undefined" ausgegeben bekommen.
    Ich habe es soweit umgeschrieben:
    test.php
    <html>
    <head>    <!-- jquery online einbinden -->
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        
        <!-- eigener js/jquery-code -->
        <script src="script/myApplication.js"></script></head>
    <body>    <div id="myContainer">
        
            <div id="myFormDiv">
            
                <form action="" id="myForm" method="post">
    				<select>
    				<option value="3">1</option>
    				<option value="4">2</option>
    				</select>
                    <input type="submit" value="Senden" />
                
                </form>
            
            </div>
        
        </div>
    </body>
    </html>


    myApplication.js:
    http://fifa-society.lima-city.de/phpkit/script/myApplication.js

    send.php:
    <?php
     
        /* werte übernehmen */
        $spieltag = $_POST["spieltag"];
        
    	echo $spieltag;
    	echo "Test";
    ?>


    Wo genau habe ich denn einen Fehler gemacht?
  11. Du muss dem <select> eine ID geben

    <select name="spieltag" id="spieltag">
       <option value="1">Tag 1</option>
       <option value="2">Tag 2</option>
       <option value="3">Tag 3</option>
    </select>


    name="spieltag"
    braucht Du, damit bei "normalem" Formular senden
    in der send.php auch %_POST['spieltag'] ankommen würde

    aber da Du ja mit jQuery sendest braucht man das hier eigentlich nicht

    id="spieltag"
    braucht Du, damit Du per jQuery auf die ID (Selector) Zugreifen kannst
    und dessen Werte (Value oder Text) auslesen kannst ... um diese im Ajax Post Aufruf zu übergeben.

    Wie Du schon richtig erkannt hast, den Wert der aktuell gewählten Option bekommst Du mit:
    $('#spieltag').val();


    also wenn die 2te Option ausgewählt wird, dann bekommst du die Zahl
    2


    Möchtest Du den Text, also Inhalt der aktuell gewählten Option erhalten,
    dann geht dies über den zusätzlichen Selektor “:selected” und die Funktion “text”:
    $('#spieltag:selected').text();

    also wenn die 2te Option ausgewählt wird, dann bekommst du den Text
    Tag 2


    PS: ich kann das auch nicht alles auswendig, ich nutze einfach Google
    in diesem Fall .... https://www.google.de/search?q=jquery+select+option+value

    Man muss nur wissen, was man suchen soll, also die "richtigen" suchbegriffe nehmen :)

    :)

    Beitrag zuletzt geändert: 22.5.2013 18:20:06 von zitatbox
  12. Autor dieses Themas

    fifa-society

    fifa-society hat kostenlosen Webspace.

    Jetzt funktioniert alles - danke!
    Thema kann damit geschlossen werden.

    Edit: Doch nochmal ein kleines Problem :-D
    Ich habe versucht es jetzt in mein eigentliches Script einzubauen und den submit-Button durch ein
    onChange="this.form.submit()"
    zu ersetzen, allerdings wird es nicht abgesendet - sobald ich etwas im Formular ändere passiert nichts :/

    Hier ist nun die entsprechende Datei de1.php, um die es geht, bzw. der relevante Ausschnitt:
    <html>
    <head>   <!-- jquery online einbinden -->
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        
        <!-- eigener js/jquery-code -->
        <script src="script/myApplication.js"></script></head>
    <body>
    <center>
        <div id="myContainer">
        
            <div id="myFormDiv">
            
                <form action="" id="myForm" method="post" onChange="this.form.submit()">
    				<select name="spieltag" id="spieltag">
    				<option value="1">1</option>
    				<option value="2">2</option>
    				<option value="3">3</option>
    				<option value="4">4</option>
    				<option value="5">5</option>
    				<option value="6">6</option>
    				<option value="7">7</option>
    				<option value="8">8</option>
    				<option value="9">9</option>
    				<option value="10">10</option>
    				<option value="11">11</option>
    				<option value="12">12</option>
    				</select>
                    <input type="submit" value="Senden" />
                
                </form>
            
            </div>
        
        </div>


    Der Rest ist nach wie vor unverändert.

    Beitrag zuletzt geändert: 22.5.2013 18:52:15 von fifa-society
  13. Hallo

    lass das
    onChange="this.form.submit()"
    weg und mach dafür im jQuery JS Teil

    $('#spieltag').change(function() { 
    
    // ------ alle Variablen aus Formular ------ 
    
       var stag = $('#spieltag').val(); 
       var name = $('#name').val(); 
       var mail = $('#email').val(); 
    
    // ------ Aufruf der POST Funktion ------ 
    
    send_myform ( stag, name, mail ); 
    
    });


    das ab-Senden als POST Funktion: send_myform()

    function send_myform(xtag, xname, xemail ) { 
    
      $.post("script/send.php", { "spieltag" : xtag , "email" : xname , "email" : xemai })
      .done(function(data) {
       $("#myFormDiv").empty().html(data).fadeIn(2000);
      });
    
    }


    Du kannst auch direkt in der .change() Funkton den .post() Aufruf machen



    Beitrag zuletzt geändert: 26.5.2013 20:18:15 von tweetbox
  14. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!