XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   Javascript & Ajax (http://xhtmlforum.de/forumdisplay.php?f=83)
-   -   AJAX - Formular erweitern (http://xhtmlforum.de/showthread.php?t=62249)

TobyZ23NM8 02.09.2010 20:53

AJAX - Formular erweitern
 
Hallo allerseits

Ich bin ziemlicher Anfänger was AJAX anbelangt und bin einige Tests am durchführen.
Ich schreibe gerade ein Script, das ein Formular, um weitere Felder erweitern soll, sobald der Submit Button gedrückt wird.

Dies habe ich mir so gedacht:
In meinem Formular gibt es in einem Div versteckte Formularfelder. Sobald der Button gedrückt ist, wird der Inhalt von display:none (CSS) mit "" ersetzt und somit angezeigt.

Hier der HTML Code:
HTML-Code:

<div>

        <h1>Extend a Form</h1>

   

    <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">

            <fieldset>

                <legend>User</legend>

               

            <label for="name">Name</label>

                <input id="name" type="text" name="name" /><br />

                <br />

       

                <label for="pass">Pass</label>

                <input id="pass" type="password" name="pass" />

        </fieldset>

       

        <div id="extend">

                <fieldset style="display:none;">

                        <legend>Other Information</legend>

               

                <label for="oth_inf">This and that</label>

                <input id="oth_inf" type="text" name="this_that" />

                </fieldset>

        </div>

       

        <fieldset>

                <legend>Submit</legend>

           

            <input type="submit" value="Send" name="submitted" onclick="extendform()" />

        </fieldset>

    </form>

</div>

Im Head wird der JavaScript Code included:

Code:




function createRequestObject() { // send AJAX Request

        var objAjax;

        var browser = navigator.appName;

               

        if(browser == "Microsoft Internet Explorer") {

                objAjax = new ActiveXObject("Microsoft.XMLHTTP"); // Request in IE

        }

        else {

                objAjax = new XMLHttpRequest(); // default Request

        }

       

        return objAjax;

}

var http = createRequestObject();




function extendform() {

        var gethtml = document.getElementById("extend").innerHTML;

        var replace_html;

       
        replace_html = gethtml.replace("display:none;", ""); // display form extension

       
       
        http.onreadystatechange = function() {

                if(http.readyState == 4 && http.status == 200) {

                        alert(document.getElementById('extend').innerHTML);
                        document.getElementById('extend').innerHTML = replace_html;
                        //alert(http.responseText);
                }
        }

       
        http.open('get', 'nothing.txt'); // fake, don't need that...?

        http.send(null);

}


Verstehe auch noch nicht, was der ResponseText (oder Header) bedeuten soll, denn ich anderen Scripts gesehen habe. Brauch ich das?

Vielen Dank für eure Hilfe >.<

Gruss Toby

XHTMLvalid 03.09.2010 18:15

Hallo.

Wozu braucht man da AJAX? Wenn der submit button gedrückt wird soll nur ein weiteres Feld erscheinen?

Wo ist dieses Feld definiert? In der selben Datei (z.b. form.php)?

Ist es dieses Feld welches dann angezeigt werden soll?

Code:

<div id="extend">

                <fieldset style="display:none;">

                        <legend>Other Information</legend>

               

                <label for="oth_inf">This and that</label>

                <input id="oth_inf" type="text" name="this_that" />

                </fieldset>

        </div>

Wenn ja, dann geht das auch sehr gut ohne AJAX.

(Ich würde das mit jQuery machen, i love jQuery) ;)

Oh ich vergass:

Wenn du bei dem submit auf eine Response warten möchtest dann würd ich das schon mit AJAX machen.
Wie gesagt, ich persönlich würds mit jQuery machen.

TobyZ23NM8 04.09.2010 11:35

Naja, eigentlich möcht ich das schon mit AJAX machen. Soll ja schliesslich eine AJAX übung für mich sein.
Aber du hast recht, ich könnt das auch ohne machen...

Geht's denn bei AJAX mehr darum, dass ich nochma ne Datei laden kann (.php o.ä) und dort Datenbank abfragen machen kann und so? Also für alles, was sich in der gleichen Datei abspielt brauch ichs gar nicht??

Gut... Und aber trotzdem würde ich noch gerne wissen, was mein Problem von oben war. Irgendwie muss das ja auch mit Ajax funktionieren??

Ahja zu JQuery: Will jetzt erstma mit JS und AJAX umzugehen lernen. Danach stürze ich mich, wenn ich noch lust habe, möglicherweise noch ins Abenteuer von JQuery ^^

Danke für euere Tipps,
Gruss Toby

XHTMLvalid 04.09.2010 12:48

Nun ja, AJAX mit jQuery ist wesentlich einfacher.

Sieht dann z.B. so aus:

Code:

$.ajax({
  url: 'ajax/test.html',
  success: function(data) {
    $('.result').html(data);
    alert('Load was performed.');
  }
});

Ich verwende jQuery AJAX in einigen meiner Projekte um z.B. Daten in ein DIV zu laden.

Bezüglich Deines Problems... wenn einfach nur nach Submit ein DIV sichtbar werden soll wäre das mit jQuery auch sehr einfach zu machen. Es muss im CSS nicht mal display:none; dem DIV zugefügt werden.

Z.B. so:

Code:

$("#extend").hide(); /* hide #extend */
$("#ID_des_INPUT_BUTTONS").click(function() {
$("#extend").show(); /* show #extend
});

So würde bei Klick auf den input button das DIV mit der ID extend angezeigt werden.


Alle Zeitangaben in WEZ +2. Es ist jetzt 02:32 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023