Aug 02, 2008, updated at Aug 10, 2008 (UTC)

7737

abfrage falls das form ausgefüllt wurde und man möchte auf eine andere seite wechseln

Hallo zusammen,

Ich habe das Problem das ich derzeit ein Backend in php programmiere bei dem es unter anderem auch die Möglichkeit gibt
Newseinträge zu verfassen. Jetzt ist es schon öfter passiert das das Form ausgefüllt wurde doch dann ohne auf speichern zu klicken
zu einem andern menüpunkt navigiert wurde (ja ich weiß ... selber schuld :D) trozdem würde ich gerne dort eine Abfrage einbauen ob man
die seite trozt das man etwas in das Form eingetragen hat verlassen möchte (soll ja auch ma vorkommen).

Bisher habe ich nicht wirklich Ahnung von Javascript und mit php kann ich das nicht wirklich umsetzen da dies ja serverseitig ist und ergo dort das Form eh abgeschikt sein muss um darauf zuzugreifen. Ich habe schon teilweise sachen gefunden bei denen ich dann die links mit einem onklick ereignis ausstatten sollte... ich denke zwar das dies ja machbar ist jedoch weiß ich nicht wie ich es umsetzte das nur wenn ich auf der newsseite bin und dann wechsle die abfrage kommt sonst würde das ja extrem nerven...

Grüße

BlackScript

Please also mark the comments that contributed to the solution of the article

Content-Key: 93441

Url: https://administrator.de/contentid/93441

Printed on: April 23, 2024 at 06:04 o'clock

13 Comments

Latest comment

testbeitrag1337testbeitrag1337testbeitrag1337testbeitrag1337testbeitrag1337testbeitrag1337

auch für Leute die einen Text nicht erfassen können ...

if(im News verfassen Formular im Textbereich etwas eingetragen && Form nicht abgeschickt && User möchte auf eine andere Seite wechseln ){
frage: möchten sie die seite wirklich verlassen ?}
else
{
Ohne Abfrage wechseln
}

Letzteres finde ich wirklich überflüssig !

Da es sich eh um Javascript handelt das die Prüfung durchführen soll:
Bind auf deiner Newsseite ein Script ein, das die Links der Navigation um ein "onclick"-Event erweitert.

Ich poste dir noch mal mein Script, mit dem ich meine Teaser
(<div id="titel_1">Titelzeile</div>
<div id="text_1">Textbox</div>)
dynamisch mache:

  /*#############################
  ###### makeTeaserDynamic ######
  #############################*/
  /** fuegt den verschiedenen elementen dessen ids in IDS uebergeben werden  **/
  /** eigenschaften zu damit sie als klickbare, auf- und zuklapbare elemente **/
  /** erkennbar sind. ausserdem bekommt die titelzeile eine onclick          **/
  /** eigenschaft die die funktion toggleTeseer() aufruft                    **/
  function makeTeaserDynamic(IDS){
           // macht einen einfachen statischen teaser zu einen dynamischen auf- und zuklappbaren
           // mit jedem teaser (title- und textblock ids) mach...
           for(var x=0; x<IDS.length; x++){
               // ...definiere die auszufuehrende onclick funktion mit ihren benoetigten parametern (teasertitle und -text id)
               var fnc    = "toggleTeaser('"+IDS[x]+"','"+IDS[x][1]+"');";  
               // ...ermittel den zu bearbeitenden teasertitle ueber seine id
               var teaser = document.getElementById(IDS[x]);
               // ...fuege dem teaser title die onclick funktion zu (ich wuerds ja in die with()-schleife setzen, aber das funktioniert nicht !?)
               teaser.onclick = new Function (fnc);
               // ...fuege dem teasertitle folgende neuen werte zu:
               with(teaser){
//                    onclick                  = new Function (fnc);                    // - die onclick funktion
                    title                    = "Klicken zum oeffnen oder schliessen"; // - den titeltxt  
                    style.cursor             = "pointer";                             // - den mauszeiger in eine hand umwandeln (um klickbar zu signalisieren)  
                    style.backgroundImage    = "url(./images/arrowdn.gif)";           // - ein hintergrundbild das den status anzeigt (auf / zu)  
                    style.backgroundRepeat   = "no-repeat";                           // - das hintergrundbild nicht wiederholen  
                    style.backgroundPosition = "2px 50%";                             // - das hintergrundbild positionieren  
                    style.paddingLeft        = "10px";                                // - textabstand links zum rahmen (um den text nicht ueber dem hintergrundbild zu haben)  
                    style.width              = "708px";                               // - weise dem teasertitle eine neue breite zu (eine abz&uuml;glich des padding-wertes)  
                    }
               // soll dieser Teaser schon geschlossen werden
               if(IDS[x][2]){
                  // ja, schliesse teaser
                  toggleTeaser(IDS[x],IDS[x][1]);
                  }
               }
           }

Das Array in dem ich die Ids der Teaser übergebe sieht so aus:

var IDS = new Array(
      new Array("title_1","text_1",1),  
      new Array("title_12","text_12",1),  
      new Array("title_34","text_34",0)  
);

Ob du das mit den IDs auch so machst, oder du die Link jedesmal rausfilterst bleibt die überlassen und muss natürlich angepasst werden.
(Soll ja auch nur ein Beispiel sein ;) )

Viel Erfolg
Arano

Hi Arano...

ich versteh leider nicht ganz was deine teaser script mit der eigendlich gedachten funktion von mir zu tun hat ...
aber ich meine ich verstehe eh nicht viel von javascript vielleicht kannst du mir nochmal genauer an einem beispiel erklären wie ich das in meine seite einbauen kann.

Grüße

Patrick

Naja, wie gesagt, es sollte nur ein Beispiel sein !
Du möchtest, das wenn man auf etwas klickt ein weiteres Javascript ausgeführt wird.
Und mein Teaserscript verwend ich um bei dem Klick auf einem Element ein anderes Script ausführen zu lassen.

Probier mal das:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
    "http://www.w3.org/TR/html4/strict.dtd">  
<html>
 <head>
  <script type="text/javascript">  
   <!--
    /*###########################
    ###### extendNaviLinks ######
    ###########################*/
    /** Erweitert die Links innerhalb des angegebenen Containers mit einem   **/
    /** onclick-Event das beim ausloesen ein Formular auf Eingaben pruefen   **/
    /** soll.                                                                **/
    function extendNaviLinks(linkName){
     // der container der die Links enthaelt
     var naviLinks = document.getElementsByName(linkName);
     // mit jedem link...
     for(x=0; x<naviLinks.length; x++){
      // ...speichere die zielurl des links in der variable "url"... 
      var url = naviLinks[x].href;
      // ...erweitere den link um ein onclick-Event...
      naviLinks[x].onclick = new Function("checkForm('"+url+"');"); 
      // ...ersetze die url des links mit einem void-script.
      naviLinks[x].href = "javascript: void(0);"; 
     }
    } // ende fnc extendNaviLinks
    
    /*#####################
    ###### checkForm ######
    #####################*/
    /** ueberprueft die eingabefelder des formulars auf eingaben, enthalten  **/
    /** die felder eingeben, gibt sie "false" zurueck, andernfalls leitet es **/ 
    /** auf die urspruengliche url weiter.                                   **/
    function checkForm(url){
     // das formular dessen eingabefelder geprueft werden sollen
     var form = document.getElementsByName('foermchen'); 
     // wenn mindestens ein eingebefeld eingaben enthaelt...
     if(form.title.value!='' || 
        form.text.value !=''){ 
      // ...gebe warnung aus und...
      alert('Das Formular enthaelt ungespeicherte Eingaben!'); 
      // ...beende funktion.
      return false;
     }
     // wenn doch alle eingabefelder leer sind, leite auf zielurl weiter
     window.location = url;
    } //ende fnc checkForm
   -->
  </script>
 </head>
 <body>
 
  <!-- die navigation, enthalten in ALLEN dokumenten -->
  <a href="seite_eins.html" name="navilinks">link eins</a><br>  
  <a href="seite_zwei.html" name="navilinks">link zwei</a><br>  
  <a href="seite_drei.html" name="navilinks">link drei</a><br>  
  <a href="seite_vier.html" name="navilinks">link vier</a>  
  
  <!-- ein javascript und ein formular, enthalten nur AUF EINER seite -->
  <script type="text/javascript">  
   <!--
    extendNaviLinks('navilinks'); 
   -->
  </script>
  
  <br><br><br>
  
  <form action="" method="POST" name="foermchen">  
   <fieldset>
    <legend>Formular</legend>
    <input type="text" name="title" value=""><br>  
    <textarea name="text"></textarea><br>  
    <input type="submit" value="Speichern">  
   </fieldset>
  </form>
  
 </body>
</html>

Schönes Wochenende noch
Arano

ja , klasse jetzt verstehe ich wie du das gemeint hast .... mein Problem ist nur ich habe das script jetzt in meinem Backend integriert
und habe dort eben getestet es funktioniert auch soweit alles das einzige problem ist bei der headline welches nur ein textfeld ist funktioniert das script einwandfrei jedoch bei der textarea die einen wysiwyg edior enthält springt er nicht darauf an ... die variablen im script welche geprüft werden hab ich bereits angepasst ... aber er reagiert einfach nicht darauf ... ne idee wie ich das beheben kann ?

Grüße

BlackScript

Nee, nicht wirklich, ich kenne ja deinen Quelltext nicht !

Aber du könntest dir mit einem "alert()" verschiedene Werte ausgeben lassen und so, evtl, den richtigen "Weg" finden.

~Arano

Hi Arano,

ja ich bin da auch auf die idee gekommen ... jedoch scheint der einfach den wert der textarea nicht auslesen zu können.
Ich habe den js teil erstma so geändert.

if(form.headline.value!='' || form.text.value !=''){  
      // ...gebe warnung aus und...
      alert('Das Formular enthaelt ungespeicherte Eingaben!');  
	  alert(form.text.value);
	  alert(form.headline.value);
      // ...beende funktion.
      return false;
     }

Die Value der Headline zeigt er so richtig an .. dort funktioniert das script ja auch jedoch in der Textarea kann ich eintragen was ich will die value bleibt auf leer...

Hier den Quellcodeteil bei dem ich dein script eingebaut habe..

<script type="text/javascript">  
   <!--
    extendNaviLinks('navilinks'); 
   -->
  </script>
<script type="text/javascript" src="jscripts/tiny_mce/tiny_mce.js"></script>  
<script type="text/javascript">  
	tinyMCE.init({
	convert_urls : false,
		// General options
		mode : "textareas",  
		theme : "advanced",  
		plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",  

		// Theme options
	theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",  
	theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",  
	theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,charmap,iespell,advhr,|,print,|,ltr,rtl",  
	theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,visualchars",  
	theme_advanced_toolbar_location : "top",  
	theme_advanced_toolbar_align : "left",  
	theme_advanced_statusbar_location : "bottom",  
		theme_advanced_resizing : false,
		theme_advanced_path : false,

		// Drop lists for link/image/media/template dialogs
		template_external_list_url : "lists/template_list.js",  
		external_link_list_url : "lists/link_list.js",  
		external_image_list_url : "lists/image_list.js",  
		media_external_list_url : "lists/media_list.js",  
		<!-- /TinyMCE -->
	});
</script>

<form name="post" method="post" >  
  <table width="100%" border="0" cellspacing="1" cellpadding="2" bgcolor="$border">  
    <tr> 
      <td class="title" align="center" bgcolor="$bghead">Neue News verfassen</td>  
    </tr>
    <tr> 
      <td class="title" align="left" bgcolor="$bghead">Headline: <input type="text" width="60%" size="60%" name="headline"></td>  
    </tr>
    <tr> 
      <td class="title" align="left" bgcolor="$bghead"><input type="checkbox" name="public">News ver&ouml;ffentlichen</td>  
    </tr>
        <tr> 
      <td class="title" align="left" bgcolor="$bghead"><input type="checkbox" name="important">News hervorheben</td>  
    </tr>
    <tr> 
      <td bgcolor="$pagebg"></td>  
    </tr>
                  <tr> 
      <td class="title" style= "background-color:#FF0000; text-decoration:blink;" align="center" bgcolor="$bghead"><img src="./images/exclamation.png"> <input id="submit" type="submit" name="submit" value="News speichern"> <img src="./images/exclamation.png"></td>  
    </tr>
    <tr> 
      <td bgcolor="$bg1"><table width="100%" border="0" align="center" cellpadding="2" cellspacing="0" class="formtable">  
          <tr> 
            <td colspan="4"><br> <textarea id="elm1" name="text" rows="40" style="width:100%;"></textarea></td>  
          </tr>
        </table>
      </td>
    </tr>
  </table>
</form>

Ich werde weitersuchen und hoffe das du vielleicht eine idee dazu hast ...

Grüße

BlackScript

Ja, aber das liegt an TinyMCE !

Ich kenne es nicht, habe nur gerade etwas auf deren Website (bei den Beispielen) herumgespielt und weiss nun, das wenn Javascript aktiviert ist die Eingaben nicht in der Textarea getippt werden !
Daher ist deine Textarea auch immer leer.
Wenn du das Prüfen möchtest, dann belege eine Textarea mit einem Text, dieser wird dann auch in TinyMCE angezeigt. Wenn nun etwas dazu getippt wird und anschließende der Inhalt der Textarea per "alert()" ausgegeben wird, entspricht er der Vorbelegung der Textarea ohne die Änderungen !

Welches Feld bzw. Element du nun prüfen musst, konnte ich nicht heraus finden, da musst du jetzt mal selber weiter gucken.

Aber nicht vergessen, Das Javascript das die Prüfung durchführt muss nun auch erweitert werden denn wenn Javascript aktivier wird, muss Element "A" überprüft werden - andernfalls Element "B" !
"A" = Eingabefeld von TinyMCE
"B" = Sandart Textarea

Gruß Arano

ja ich habe mitlerweile auch rausgefunden das es daran liegt google spukt dazu auch mehrere sachena us jedoch nirgends gescheite Vorschläge.. mitlerweile bin ich auch daran mich durch die api zu wühlen um vielleicht rauszufinden wie ich auf den inhalt der textarea zugreifen kann... http://wiki.moxiecode.com/index.php/TinyMCE:API ich meine tinymce liest das doch auch aus und zeigt das dann an ... irgendwo müssen doch die eingaben bleiben da ich sie ja nach dem absenden auch wieder per post unter der normalem namen der textarea abrufen kann -.- gerade dort in der textarea ist es wichtig das das funktioniert

Grüße

BlackScript

EDIT:

Ich glaube unter http://wiki.moxiecode.com/index.php/TinyMCE:Configuration bei den callbacks kann man vielleicht was damit anfangen ..... vielleicht kannst du dir das ja mal anschaun du verstehst da sicher mehr als ich

ERNEUTER EDIT :D
ich hab jetzt mal was gefunden... und zwar die isDirty() funktion von tinymce dieser funktioniert auch ... jedoch will der mir jetzt das so nicht mehr mit dem normalen textfeld machen... also
jetzt grade umgekehrt wenn ich was in die textarea reinschreib meldet er auch aber wenn ich jetzt zum beispiel die headline setze dann nich ... hier mal der code

<script type="text/javascript">  
window.onbeforeunload = function(){
if (tinyMCE.activeEditor.isDirty() || document.form.headline.value!=''){  
 return "Sie haben das Formular noch nicht abgeschickt. Wenn Sie diese Seite verlassen gehen Ihre Eingaben verloren.";}  
}
</script>
währe nett wenndu mir sagen könntest wieso das dann so nich geht :D

Joa, das mag schon sein, aber es ist nicht gerade so als das ich Lust hät die Arbeit für andere zu erledigen.

Ich habe da aber trotzdem etwas gefunden was dir weiter helfen sollte: http://tinymce.moxiecode.com/punbb/viewtopic.php?id=12616

~Arano

naja ich meine das mit der textarea funktioniert so wie ich es oben geschrieben habe nur das zugreifen auf das textfeld names headline welche ja vorher funktioniert hat hatte nicht mehr funktioniert ... jetzt hab ich es hinbekommen nachdem ich form durch den namen desforms ersetzt habe der funktionierende Code ist jetzt:

<script type="text/javascript">  
window.onbeforeunload = function(){

	if (tinyMCE.activeEditor.isDirty() || document.post.headline.value!='')  
	{
 		return "Sie haben das Formular noch nicht abgeschickt. Wenn Sie diese Seite verlassen gehen Ihre Eingaben verloren.";  
	}
	
}
</script>

welchen ich einfach direkt über die init von tiny mce gesetzt habe... und wegen dem arbeit für andere machen ich hatte dich ja nur gefragt was an dem code den ich gepostet habe so nicht stimmen könnte dies hatte nicht damit zu tun das du die arbeit machen solltest sondern einfach nur mithilfe deines wissens über js vielleicht etwas findest was falsch ist was ich als anfänger ja nicht sehe....
Trozdem danke für deine Hilfe...

Grüße

BlackScript

Ja, gern geschehen :D

Deinen zweiten Edit ("ERNEUTER EDIT") hatte ich da noch nicht gesehen ;)

Schönen Tag noch
~Tobias

German solved Question JavaScript Development

Hotly discussed

Check of ZFW Firewallgleixnerd - 5 Comments

Wireguard VPN on UDM Pro behind Fritzbox - Handshake did not completejstricker - 3 Comments

How to set up and configure a Linux GRE tunnelAlexWisha - 3 Comments

End of Support dates for Office 2016, 2019 Apps und Productivity ServersDani - 1 Comment