[jQuery] Submitting a form after input type="file" onchange
<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
<meta name=ProgId content=Word.Document>
<meta name=Generator content="Microsoft Word 10">
<meta name=Originator content="Microsoft Word 10">
<link rel=File-List href="cid:filelist.xml@01C6F28A.0D3A21C0">
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:DoNotRelyOnCSS/>
</o:OfficeDocumentSettings>
</xml><![endif]--><!--[if gte mso 9]><xml>
<w:WordDocument>
<w:SpellingState>Clean</w:SpellingState>
<w:GrammarState>Clean</w:GrammarState>
<w:DocumentKind>DocumentEmail</w:DocumentKind>
<w:EnvelopeVis/>
<w:Compatibility>
<w:BreakWrappedTables/>
<w:SnapToGridInCell/>
<w:WrapTextWithPunct/>
<w:UseAsianBreakRules/>
</w:Compatibility>
<w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel>
</w:WordDocument>
</xml><![endif]-->
<style>
<!--
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{mso-style-parent:"";
margin:0in;
margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:12.0pt;
font-family:"Times New Roman";
mso-fareast-font-family:"Times New Roman";}
a:link, span.MsoHyperlink
{color:blue;
text-decoration:underline;
text-underline:single;}
a:visited, span.MsoHyperlinkFollowed
{color:purple;
text-decoration:underline;
text-underline:single;}
pre
{margin:0in;
margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.0pt;
font-family:"Courier New";
mso-fareast-font-family:"Times New Roman";}
span.EmailStyle17
{mso-style-type:personal-compose;
mso-style-noshow:yes;
mso-ansi-font-size:10.0pt;
mso-bidi-font-size:10.0pt;
font-family:Arial;
mso-ascii-font-family:Arial;
mso-hansi-font-family:Arial;
mso-bidi-font-family:Arial;
color:windowtext;}
span.start-tag
{mso-style-name:start-tag;}
span.attribute-name
{mso-style-name:attribute-name;}
span.attribute-value
{mso-style-name:attribute-value;}
span.end-tag
{mso-style-name:end-tag;}
span.SpellE
{mso-style-name:"";
mso-spl-e:yes;}
span.GramE
{mso-style-name:"";
mso-gram-e:yes;}
@page Section1
{size:8.5in 11.0in;
margin:1.0in 1.25in 1.0in 1.25in;
mso-header-margin:.5in;
mso-footer-margin:.5in;
mso-paper-source:0;}
div.Section1
{page:Section1;}
-->
</style>
<!--[if gte mso 10]>
<style>
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:"Table Normal";
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-parent:"";
mso-padding-alt:0in 5.4pt 0in 5.4pt;
mso-para-margin:0in;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.0pt;
font-family:"Times New Roman";}
</style>
<![endif]-->
</head>
<body lang=EN-US link=blue vlink=purple style='tab-interval:.5in'>
<div class=Section1>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt;
font-family:Arial'>Hello,<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt;
font-family:Arial'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt;
font-family:Arial'>This is my first post to the list. I am still new to <span
class=SpellE>jQuery</span> and so far I think it is the best lib available. You
guys rock!<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt;
font-family:Arial'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt;
font-family:Arial'>Anyways, I have a question regarding a form I am trying to
submit using <span class=SpellE>jQuery</span>. I was using an inline <span
class=SpellE>onchange</span> event to trigger the form submit for <span
class=GramE>an</span> file input box. <o:p></o:p></span></font>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt;
font-family:Arial'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt;
font-family:Arial'>Here is the html and <span class=SpellE>js</span>:<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt;
font-family:Arial'><o:p> </o:p></span></font>
<pre><font size=2 face="Courier New"><span style='font-size:10.0pt'>$(document).<span
class=GramE>ready(</span>function() {<o:p></o:p></span></font></pre><pre><font
size=2 face="Courier New"><span style='font-size:10.0pt'><span
style='mso-tab-count:1'> </span>$("#file").<span
class=GramE>change(</span>function() {<o:p></o:p></span></font></pre><pre><font
size=2 face="Courier New"><span style='font-size:10.0pt'><span
style='mso-tab-count:2'> </span><span
class=GramE>alert(</span>"change");<o:p></o:p></span></font></pre><pre><font
size=2 face="Courier New"><span style='font-size:10.0pt'><span
style='mso-tab-count:2'> </span><span
class=SpellE><span class=GramE>uploadPhoto</span></span><span class=GramE>(</span>);<o:p></o:p></span></font></pre><pre><font
size=2 face="Courier New"><span style='font-size:10.0pt'><span
style='mso-tab-count:1'> </span>});<o:p></o:p></span></font></pre><pre><font
size=2 face="Courier New"><span style='font-size:10.0pt'>});<o:p></o:p></span></font></pre><pre><span
class=SpellE><span class=GramE><font size=2 face="Courier New"><span
style='font-size:10.0pt'>var</span></font></span></span> <span class=SpellE>uploadPhoto</span> = function() {<o:p></o:p></pre><pre><font
size=2 face="Courier New"><span style='font-size:10.0pt'><span
style='mso-tab-count:1'> </span>$("/html/body/div/form").<span
class=GramE>submit(</span>function() {<o:p></o:p></span></font></pre><pre><font
size=2 face="Courier New"><span style='font-size:10.0pt'><span
style='mso-tab-count:2'> </span><span
class=GramE>alert(</span>"inside");<o:p></o:p></span></font></pre><pre><font
size=2 face="Courier New"><span style='font-size:10.0pt'><span
style='mso-tab-count:1'> </span>});<o:p></o:p></span></font></pre><pre><font
size=2 face="Courier New"><span style='font-size:10.0pt'>}<o:p></o:p></span></font></pre><pre><font
size=2 face="Courier New"><span style='font-size:10.0pt'><o:p> </o:p></span></font></pre><pre><font
size=2 face="Courier New"><span style='font-size:10.0pt'><<span
class=start-tag>form</span><span class=attribute-name> name</span>=<span
class=attribute-value>"photo" </span><span class=attribute-name>id</span>=<span
class=attribute-value>"photo-upload-form" </span><span
class=attribute-name>action</span>=<span class=attribute-value>"/" </span><span
class=attribute-name>method</span>=<span class=attribute-value>"get" </span><span
class=SpellE><span class=attribute-name>enctype</span></span>=<span
class=attribute-value>"multipart/form-data"</span>><o:p></o:p></span></font></pre><pre
id=line38><font size=2 face="Courier New"><span style='font-size:10.0pt'><<span
class=GramE><span class=start-tag>div</span></span>><o:p></o:p></span></font></pre><pre><font
size=2 face="Courier New"><span style='font-size:10.0pt'><<span
class=start-tag>label</span><span class=attribute-name> for</span>=<span
class=attribute-value>"image"</span>>Find Your Photo</<span
class=end-tag>label</span>><o:p></o:p></span></font></pre><pre><font size=2
face="Courier New"><span style='font-size:10.0pt'><<span class=start-tag>input</span><span
class=attribute-name> id</span>=<span class=attribute-value>"file" </span><span
class=attribute-name>type</span>=<span class=attribute-value>"file" </span><span
class=attribute-name>name</span>=<span class=attribute-value>"image" </span><span
class=attribute-name>/</span>><o:p></o:p></span></font></pre><pre><font
size=2 face="Courier New"><span style='font-size:10.0pt'></<span
class=end-tag>div</span>><o:p></o:p></span></font></pre><pre><font size=2
face="Courier New"><span style='font-size:10.0pt'></<span class=end-tag>form</span>><o:p></o:p></span></font></pre>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt;
font-family:Arial'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt;
font-family:Arial'>I can get an alert to fire inside the <span class=SpellE>uploadPhoto</span>
function, but not inside the submit function. I was worried that I wasn’t
targeting the form correctly, so I used firebug to find the <span class=SpellE>XPath</span>
to it. I am not sure why it isn’t working.<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt;
font-family:Arial'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt;
font-family:Arial'>Thanks,
Marshall<o:p></o:p></span></font>
</div>
</body>
</html>
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/