<?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>Eric Hynds &#187; ie</title>
	<atom:link href="http://www.erichynds.com/tag/ie/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.erichynds.com</link>
	<description>Web Developer&#039;s Ramblings on JavaScript, jQuery, ColdFusion, MySQL, and other technologies.</description>
	<lastBuildDate>Mon, 02 Jan 2012 22:55:17 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>jQuery: modifying the submit button when a form is submitted</title>
		<link>http://www.erichynds.com/jquery/jquery-disabling-the-submit-button-when-a-form-is-submitted/</link>
		<comments>http://www.erichynds.com/jquery/jquery-disabling-the-submit-button-when-a-form-is-submitted/#comments</comments>
		<pubDate>Fri, 19 Jun 2009 13:53:59 +0000</pubDate>
		<dc:creator>Eric Hynds</dc:creator>
				<category><![CDATA[jQuery]]></category>
		<category><![CDATA[ie]]></category>

		<guid isPermaLink="false">http://www.erichynds.com/blog/?p=12</guid>
		<description><![CDATA[I&#8217;ve found it useful on certain apps to disabled the submit button once the form has been submitted to prevent the user from accidentally/deliberately clicking on it twice. There are two ways to accomplish this, and only one will work in IE. Can you guess which one? $&#40;&#34;form :submit&#34;&#41;.click&#40;function&#40;&#41;&#123; $&#40;this&#41;.attr&#40;&#34;disabled&#34;, &#34;disabled&#34;&#41;.val&#40;&#34;Please wait...&#34;&#41;; &#125;&#41;; $&#40;&#34;form&#34;&#41;.submit&#40;function&#40;&#41;&#123; $&#40;&#34;:submit&#34;, [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fwww.erichynds.com%2Fjquery%2Fjquery-disabling-the-submit-button-when-a-form-is-submitted%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwww.erichynds.com%2Fjquery%2Fjquery-disabling-the-submit-button-when-a-form-is-submitted%2F&amp;source=erichynds&amp;style=normal&amp;b=2" height="61" width="50" /><br />
			</a>
		</div>
<p>I&#8217;ve found it useful on certain apps to disabled the submit button once the form has been submitted to prevent the user from accidentally/deliberately clicking on it twice.  There are two ways to accomplish this, and only one will work in IE.  Can you guess which one?</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;form :submit&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</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: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;disabled&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;disabled&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Please wait...&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>


<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;form&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">submit</span><span style="color: #009900;">&#40;</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: #009900;">&#40;</span><span style="color: #3366CC;">&quot;:submit&quot;</span><span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;disabled&quot;</span><span style="color: #339933;">,</span><span style="color: #3366CC;">&quot;disabled&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Please wait....&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p><a href="/examples/jquery-submit.html">See this example in action</a></p>
<p>In the first example, the submit button will be disabled, its value will be changed, but the form will not submit.  Adding a <code>return true;</code> statement will not fix the issue.  In the second example, all the behaviors you would expect work in Firefox and IE.</p>
<p>I did some investigating and could not come up with an answer.  With the first example you could call a <code>.submit()</code> directly on the form, but this should not be necessary.  So, if you want to manipulate the submit button once the form has been submitted, intercept the submit event on the form instead of intercepting the click on the button itself.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.erichynds.com/jquery/jquery-disabling-the-submit-button-when-a-form-is-submitted/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
	</channel>
</rss>

