zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden AJAX - Formular erweitern

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 02.09.2010, 20:53
Benutzerbild von TobyZ23NM8
Nyaaa~~
neuer user
Thread-Ersteller
 
Registriert seit: 12.10.2007
Ort: Schweiz
Beiträge: 77
TobyZ23NM8 befindet sich auf einem aufstrebenden Ast
Standard 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
__________________

Nyaa~~
------------------------------------------
http://www.codestyle.ch
------------------------------------------
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 03.09.2010, 18:15
Benutzerbild von XHTMLvalid
IE OMG WTF
XHTMLforum-Mitglied
 
Registriert seit: 03.09.2010
Ort: Palma de Mallorca
Beiträge: 161
XHTMLvalid wird schon bald berühmt werden
Standard

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.
__________________
XHTML-Valid-Websites.com | CookielessDomain.com | Stop-Supporting-IE6.com
if (browser == IE) { sucks(big); } else { nice(site); }

Geändert von XHTMLvalid (03.09.2010 um 18:20 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 04.09.2010, 11:35
Benutzerbild von TobyZ23NM8
Nyaaa~~
neuer user
Thread-Ersteller
 
Registriert seit: 12.10.2007
Ort: Schweiz
Beiträge: 77
TobyZ23NM8 befindet sich auf einem aufstrebenden Ast
Standard

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
__________________

Nyaa~~
------------------------------------------
http://www.codestyle.ch
------------------------------------------
Mit Zitat antworten
  #4 (permalink)  
Alt 04.09.2010, 12:48
Benutzerbild von XHTMLvalid
IE OMG WTF
XHTMLforum-Mitglied
 
Registriert seit: 03.09.2010
Ort: Palma de Mallorca
Beiträge: 161
XHTMLvalid wird schon bald berühmt werden
Standard

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.
__________________
XHTML-Valid-Websites.com | CookielessDomain.com | Stop-Supporting-IE6.com
if (browser == IE) { sucks(big); } else { nice(site); }

Geändert von XHTMLvalid (04.09.2010 um 12:55 Uhr)
Mit Zitat antworten
Antwort

Stichwörter
ajax, formular

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
PHP mail() formular mit Ajax validieren und abschicken xml Javascript & Ajax 2 03.03.2011 21:13
Formular dynamisch erweitern Benutzername Javascript & Ajax 2 18.02.2011 12:32
Ajax: php formular absenden und ergebnisse auf selbe seite in div laden? sepp88 Javascript & Ajax 35 23.03.2010 11:17
Komplettes Formular mit Ajax senden??? FeriX Javascript & Ajax 7 04.07.2009 13:34
Ajax Formular mit Weiche? Zen5656 Javascript & Ajax 7 04.10.2007 18:28


Alle Zeitangaben in WEZ +2. Es ist jetzt 05:44 Uhr.