<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Der Informatikblog &#187; deaktivieren</title>
	<atom:link href="http://www.informatik-blog.net/tag/deaktivieren/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.informatik-blog.net</link>
	<description>Informatik &#38; Co.</description>
	<lastBuildDate>Mon, 19 Dec 2011 13:01:57 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1</generator>
		<item>
		<title>Formulare deaktivieren</title>
		<link>http://www.informatik-blog.net/2009/01/25/formulare-deaktivieren/</link>
		<comments>http://www.informatik-blog.net/2009/01/25/formulare-deaktivieren/#comments</comments>
		<pubDate>Sat, 24 Jan 2009 23:11:02 +0000</pubDate>
		<dc:creator>bleed_ch</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[deaktivieren]]></category>
		<category><![CDATA[formular]]></category>

		<guid isPermaLink="false">http://www.informatik-blog.net/?p=227</guid>
		<description><![CDATA[Was man öfters bei grossen Seiten wie PayPal o.ä. sieht, ist das deaktivieren von Formularen nach dem Versand. Das ganze wird mit JavaScript realisiert und dient dazu dem herkömmlichen Benutzer Doppelpostings zu verbieten. Ein wirklicher Schutz ist das natürlich nicht denn JavaScript ist deaktivierbar. Es hat aber dennoch seine Existenzberechtigung: function troughForms&#40;sent&#41; &#123; var len [...]]]></description>
			<content:encoded><![CDATA[
<!-- google_ad_section_start -->
<p>Was man öfters bei grossen Seiten wie <a href="http://www.paypal.com">PayPal</a> o.ä. sieht, ist das deaktivieren von Formularen nach dem Versand. Das ganze wird mit JavaScript realisiert und dient dazu dem herkömmlichen Benutzer Doppelpostings zu verbieten. <span id="more-227"></span> Ein wirklicher Schutz ist das natürlich nicht denn JavaScript ist deaktivierbar. Es hat aber dennoch seine Existenzberechtigung:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> troughForms<span style="color: #009900;">&#40;</span>sent<span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#123;</span>
	<span style="color: #003366; font-weight: bold;">var</span> len <span style="color: #339933;">=</span> document.<span style="color: #660066;">forms</span>.<span style="color: #660066;">length</span><span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> i <span style="color: #339933;">&lt;</span> len<span style="color: #339933;">;</span> i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> elem <span style="color: #339933;">=</span> document.<span style="color: #660066;">forms</span><span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>sent<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> disableForm<span style="color: #009900;">&#40;</span>elem<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span> appendEvent<span style="color: #009900;">&#40;</span>elem<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#125;</span>
	<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #003366; font-weight: bold;">function</span> disableForm<span style="color: #009900;">&#40;</span>form<span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#123;</span>
	<span style="color: #003366; font-weight: bold;">var</span> len <span style="color: #339933;">=</span> form.<span style="color: #660066;">elements</span>.<span style="color: #660066;">length</span><span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> i <span style="color: #339933;">&lt;</span> len<span style="color: #339933;">;</span> i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> element <span style="color: #339933;">=</span> form.<span style="color: #660066;">elements</span><span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
		element.<span style="color: #660066;">disabled</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">;</span>
		element.<span style="color: #000066;">blur</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #003366; font-weight: bold;">function</span> appendEvent<span style="color: #009900;">&#40;</span>form<span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#123;</span>
	form.<span style="color: #660066;">onsubmit</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
	<span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">submit</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		troughForms<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span>
window.<span style="color: #000066;">onload</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> troughForms<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">false</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#125;</span></pre></div></div>

<p>Erstmal tief Luft holen. Das sieht kompliziert aus &#8211; ist es aber nicht. Dreh- und Angelpunkt des ganzen ist troughForms(). Diese Funktion geht das gesamte Dokument durch und entscheidet anhand des Parameters ob er ein onsubmit-Event an das Formular anhängt oder es komplett deaktiviert. Beim ersten mal wird es natürlich dazu benutzt allen Formularen auf der Seite ein Event zu verpassen. Beim Versand passiert dann genau das Gegenteil. Die gleiche Funktion ist also für das Setup und den Gebrauch zuständig.</p>
<p><strong>Die Vorteile an diesem Beispiel sind:</strong><br />
- nichts muss am Markup geändert werden.<br />
- nicht nur der &#8220;Senden&#8221;-Knopf wird deaktiviert sondern das gesamte Formular.<br />
- nicht nur das versandte sondern jedes Formular auf der Seite wird deaktiviert.</p>
<p>Um das ganze zu verwenden, müssen wir den JavaScript-Code (oben) in eine Datei speichern. In unserem Fall wählen wir <strong>deactivate.js</strong>, die wir dann im HTML-Dokument folgendermassen einbinden:
</pre>

<div class="wp_syntax"><div class="code"><pre class="html" style="font-family:monospace;">&lt;script type=&quot;text/javascript&quot; src=&quot;./deactivate.js&quot;&gt;&lt;/script&gt;</pre></div></div>

<p>Geschafft. Übrigens wäre das ganze mit addEventListener('submit', ...) sicher moderner gewesen aber nicht jeder Browser unterstützt es. Und bei eingefügter Browserkompatibilität wäre der Code dann mindestens gleich gross aber nicht gleich schön.</p>
<!-- google_ad_section_end -->
]]></content:encoded>
			<wfw:commentRss>http://www.informatik-blog.net/2009/01/25/formulare-deaktivieren/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

