Klaus: Datei soll nach Formular - SUBMIT weitere Datei laden !!

Ich bekomme noch graue Haare, ich weis nicht mehr weiter.
Ich habe ein Formularfeld, nach dem Ausfüllen und einem Klick auf den Button: "NUR WENN HIER GEKLICKT WIRD" soll die ausgabe.php geladen werden.

Mein Script ist schneller als die Feuerwehr erlaubt, wenn ich nur mit dem Mauszeiger in mein INPUT Feld klicke, erscheint schon die ausgabe.php.

Wenn ich dann auf den "NUR WENN HIER GEKLICKT WIRD" Button klicke, passiert dagegeb nichts.

Kann mir BITTE jemand weiterhelfen.

Klaus

[code lang=html]  
  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
     "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
	<title>graue haare</title>  
  
		<script src="http://code.jquery.com/jquery-1.5.min.js"></script>  
  
	        <script type="text/javascript" charset="utf-8">  
	  
	        $(document).ready(function() {  
	        	$("#test").click(function() {  
					var linkId = $(this).attr("id");  
		  			$.ajax({  
						type: "POST",  
						url: "ausgabe.php",  
						data: "ajaxget=" + linkId,  
						success: function(data) {  
							$("#ajaxcontent").html(data);  
						}  
		  			});  
	        	});  
	      });  
      </script>  
  
  
  
</head>  
<body>  
  
  
<form id="test" method="post" action="">  
<input type="text" id="name" name="name" />  
<input type="submit" name="action" value="Speichern">  
</form><br /><br />				  
<div id="ajaxcontent"></div>			  
			  
  
</body>  
</html>  
  

~~~[/code]
  1. Hi,

    Wenn ich dann auf den "NUR WENN HIER GEKLICKT WIRD" Button klicke, passiert dagegeb nichts.

    wenn Du das Formular abschickst, wird eine neue Seite geladen - in diesem Fall die selbe, die Du schon vorliegen hast. Wenn in der vorherigen Variante Änderungen vorgenommen worden waren (gehabt gewesen haben sind - gibt es einen Ultraplusplusquamperfekt?), werden diese durch die Rückgabe des Servers ersetzt.

    Kann mir BITTE jemand weiterhelfen.

    Verhindere das Abschicken des Formulars.

    Cheatah

    --
    X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
    1. Verhindere das Abschicken des Formulars.

      Sorry, das verstehe ich nicht, ich möchte das Formular doch absenden!

      Ich möchte doch, das der Vorgang erst dann ausgelöst wird, wenn ich den SUBMIT Button drücke!!

      1. Hallo,

        Verhindere das Abschicken des Formulars.
        Sorry, das verstehe ich nicht, ich möchte das Formular doch absenden!

        ja, war mir auch so.

        Ich möchte doch, das der Vorgang erst dann ausgelöst wird, wenn ich den SUBMIT Button drücke!!

        Warum löst du dann per AJAX das Laden der ausgabe.php schon aus, sobald irgendwo ins Formular geklickt wird? - Lass den Javascript-Teil einfach komplett weg, dann verhält sich dein Formular auch ganz normal. Auch dass man es dann wie üblich durch Drücken der Enter-Taste abschicken kann.

        Ciao,
         Martin

        --
        Man sollte keinen Senf von sich geben, wenn man nicht auch das Würstchen dazu liefern kann.
        Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
  2. Hallo,

    Mein Script ist schneller als die Feuerwehr erlaubt, wenn ich nur mit dem Mauszeiger in mein INPUT Feld klicke, erscheint schon die ausgabe.php.

    klar, denn dieser Klick landet selbstverständlich in Deinem Formular.

    Wenn ich dann auf den "NUR WENN HIER GEKLICKT WIRD" Button klicke, passiert dagegeb nichts.

    Doch, doch. Nur steht dann nichts in Deinem Eingabefeld. Deswegen bemerkst Du nichts.

    » 	        $(document).ready(function() {  
    
    > 	        	$("#test").click(function() {
    
    

    [...]

    Du hängst den Eventhandler an das Element mit dem id-Wert "test", das ist Dein Formular:

      
    
    > <form id="test" method="post" action="">  
    > <input type="text" id="name" name="name" />
    
    

    Vermutlich möchtest Du folgendem Button eine id spendieren, und diesem Element den Eventhandler zuweisen.

      
    
    > <input type="submit" name="action" value="Speichern">
    
    

    Freundliche Grüße

    Vinzenz

    1. Warum löst du dann per AJAX das Laden der ausgabe.php schon aus, sobald
      irgendwo ins Formular geklickt wird? - Lass den Javascript-Teil einfach
      komplett weg, dann verhält sich dein Formular auch ganz normal. Auch dass
      man es dann wie üblich durch Drücken der Enter-Taste abschicken kann.

      Wenn ich javascript weglasse, wird die ganze Seite  über action="" neugeladen, das will ich nicht, sondern nur das Ergbenis des Formulars hier ausgeben:

      <div id="ajaxcontent"></div>

      ---------------------------------

      Vermutlich möchtest Du folgendem Button eine id spendieren, und diesem
      Element den Eventhandler zuweisen.

      <input type="submit" name="action" value="Speichern">

      Meinst du ich soll

      <form id="test" method="post" action="">
      <input type="text" id="name" name="name" />

      die "id="test" hier rwegnehmen und hier hinmachen:

      <input id="test" type="submit" name="action" value="Speichern">

      Ich muss gestehen ich verstehe das nicht ganz was du meinst?

      1. Hallo Klaus,

        Vermutlich möchtest Du folgendem Button eine id spendieren, und diesem
        Element den Eventhandler zuweisen.

        Meinst du ich soll

        <form id="test" method="post" action="">
        <input type="text" id="name" name="name" />

        die "id="test" hier rwegnehmen und hier hinmachen:

        <input id="test" type="submit" name="action" value="Speichern">

        das wäre zum Beispiel eine Möglichkeit.

        Ich muss gestehen ich verstehe das nicht ganz was du meinst?

        Wenn Du in Dein Eingabefeld klickst, so wandert das Klickereignis über alle Elternelemente nach oben (Mathias erklärt das sehr schön). Damit landet das Klickereignis in der nächsten Ebene bei Deinem Formular - und löst somit unerwünscht früh den Ajax-Request aus, nämlich bevor Du irgendetwas eingegeben hast.

        Freundliche Grüße

        Vinzenz

        1. Hallo Vinzenz,

          ich habe deinen Vorschlag mit dem umsetzten der ID, natürlich sofort getestet, doch leider funktioniert es nicht ganz, ich habe zwar nun Zeit mein Feld auszufüllen, doch nach dem KLICk, tut sich nichts...

          Ich denke, das da irgendwas in meinem Code nocht nicht stimmt!

          Klaus

            
          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
               "http://www.w3.org/TR/html4/loose.dtd">  
          <html>  
          <head>  
                  <title>graue haare</title>  
            
                          <script src="http://code.jquery.com/jquery-1.5.min.js"></script>  
            
                          <script type="text/javascript" charset="utf-8">  
            
                          $(document).ready(function() {  
                                  $("#test").click(function() {  
                                                  var linkId = $(this).attr("id");  
                                                    $.ajax({  
                                                          type: "POST",  
                                                          url: "ausgabe.php",  
                                                          data: "ajaxget=" + linkId,  
                                                          success: function(data) {  
                                                                  $("#ajaxcontent").html(data);  
                                                          }  
                                                    });  
                                  });  
                        });  
                </script>  
            
            
            
          </head>  
          <body>  
            
            
          <form  method="post" action="">  
          <input type="text" id="name" name="name" />  
          <input id="test" type="submit" name="action" value="Speichern">  
          </form><br /><br />  
          <div id="ajaxcontent"></div>  
            
            
          </body>  
          </html>  
            
          
          
          1. Hi!

            Ich spreche kein jquery. Deshalb kann ich nur vermuten.

            $("#test").click(function() {
                                                    var linkId = $(this).attr("id");

            Hier wird einer Variable linkId der Name des elements uebergeben, dessen Eventhandler getriggered wurde?

            $.ajax({
                                                            type: "POST",
                                                            url: "ausgabe.php",
                                                            data: "ajaxget=" + linkId,

            Hier wird ein Getparameter mit dem inhalt der Variablen (also der ID des Buttons) erstellt?

            success: function(data) {
                                                                    $("#ajaxcontent").html(data);
                                                            }
                                                      });

            Bleibt die Frage, was bekommt ausgabe.php denn? Und was macht es draus? Betreibe Debugging.

            --
            Signaturen sind blöd!
          2. Hallo,

            ich habe deinen Vorschlag mit dem umsetzten der ID, natürlich sofort getestet, doch leider funktioniert es nicht ganz, ich habe zwar nun Zeit mein Feld auszufüllen, doch nach dem KLICk, tut sich nichts...

            ja, leider hab' ich Dein Problem nicht ganz durchdacht. Schadete insofern nichts, weil Du etwas über das Event-Bubbling gelernt hast.

            Ich denke, das da irgendwas in meinem Code nocht nicht stimmt!

            Das ist richtig :-) Ich fasse daher Deine Aufgabenstellung zusammen:

            - Du hast ein Formular mit
                 - (mindestens) einem Eingabefeld,
                 - einem Submitbutton.
             - Du möchtest die Formulareingaben per Ajax an ein Skript schicken
               und dessen Antwort in die aktuelle Seite einfügen.

            Problem:

            - Wird ein HTML-Formular abgeschickt, so wird die im action-Attribut
               des form-Elementes angegebene Ressource geladen. Im Falle eines
               Leerstrings (wie bei Dir angegeben) die aktuelle Ressource (außer
               im IE, der da fehlerhafterweise was anderes macht).
             - Ein Formular kann nicht nur über einen Submit-Button abgeschickt werden,
               siehe Martins Beitrag.

            Lösung:

            Was Du abfangen musst, ist daher nicht das Klickereignis des Submit-Buttons, sondern das Submit-Ereignis des Formulars. Zusätzlich musst Du die Standardaktion beim Submit, das Absenden des Formulars, verhindern. Wie das geht, erklärt Mathias im bereits verlinkten Artikel einen Abschnitt vorher.

            Das heißt: Du kannst wieder zum ersten Ansatz zurückgehen, nimmst "onsubmit" statt "onclick" und verhinderst einfach die Standardaktion.

            Tipp: Arbeite Mathias' sehr empfehlenswerte Artikelserie komplett durch.

            Freundliche Grüße

            Vinzenz