[jQuery] Submitting a form after input type=file onchange
Hello,
This is my first post to the list. I am still new to jQuery and so far I think it is the best lib available. You
guys rock!
Anyways, I have a question regarding a form I am trying to
submit using jQuery. I was using an inline onchange event to trigger the form submit for an file input box.
Here is the html and js:
$(document).ready(function() { $(#file).change(function() { alert(change); uploadPhoto(); });});var uploadPhoto = function() { $(/html/body/div/form).submit(function() { alert(inside); });}form name=photo id=photo-upload-form action=/ method=get enctype=multipart/form-datadivlabel for=imageFind Your Photo/labelinput id=file type=file name=image //div/form
I can get an alert to fire inside the uploadPhoto
function, but not inside the submit function. I was worried that I wasnt
targeting the form correctly, so I used firebug to find the XPath
to it. I am not sure why it isnt working.
Thanks,
Marshall
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Submitting a form after input type=file onchange
You're nearly there. You've just got a slight problem in your understanding of what the $().submit(func) function does. What you're doing is adding an onsubmit handler to the form whenever the contents of the file input element is changed. But, that function won't fire until the form is actually submitted. I implemented your code, and the inside alert pops up just fine when I added a submit input element and used it. If you want it to submit automatically when you've changed the file input, add another empty .submit() function after the one you have. Your new function will look like this:
$(form#photo-upload-form) .submit(function() {alert(inside);})
.submit();Of course, if you just wanted the form to autosubmit, just remove your function from inside the first .submit() call and it will submit the form. In the form above it will allow you to run some arbitrary code before the submission.
I also changed your query from the xpath to the ID of the form tag. Why not use it since it was already there.On 10/18/06, Marshall Salinger
[EMAIL PROTECTED] wrote:
Hello,
This is my first post to the list. I am still new to jQuery and so far I think it is the best lib available. You
guys rock!
Anyways, I have a question regarding a form I am trying to
submit using jQuery. I was using an inline onchange event to trigger the form submit for an file input box.
Here is the html and js:
$(document).ready(function() {
$(#file).change(function() { alert(change);
uploadPhoto();
});});var
uploadPhoto = function() { $(/html/body/div/form).submit(function() {
alert(inside);
});}
form name=photo id=photo-upload-form action=
/ method=get enctype=multipart/form-data
divlabel for=imageFind Your Photo/
labelinput id=file type=file
name=image //div
/form
I can get an alert to fire inside the uploadPhoto
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 XPath
to it. I am not sure why it isn't working.
Thanks,
Marshall
___jQuery mailing listdiscuss@jquery.com
http://jquery.com/discuss/-- /IRS - fairtax.org
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Submitting a form after input type=file onchange
$(form#photo-upload-form)
.submit(function() {alert(inside);})
.submit();
That won't work. You have to get out the DOM node out of the jQuery
object first before calling submit() on it:
$(#photo-upload-form)
.submit(function() {alert(inside);})
[0].submit();
^^^
You have to be always careful with such code. Once the element
#photo-upload-form is not found for whatever reason an error will be
thrown, because yor are calling a function on undefined.
Speaking of optimizing queries, leave away the element type form in
front of your id selector as well.
-- Klaus
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Submitting a form after input type=file onchange
Thanks Klaus and Paul,
I was getting errors on the empty submit call. It works now.
Thanks!
-Marshall
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Klaus Hartl
Sent: Wednesday, October 18, 2006 8:41 AM
To: jQuery Discussion.
Subject: Re: [jQuery] Submitting a form after input type=file onchange
$(form#photo-upload-form)
.submit(function() {alert(inside);})
.submit();
That won't work. You have to get out the DOM node out of the jQuery
object first before calling submit() on it:
$(#photo-upload-form)
.submit(function() {alert(inside);})
[0].submit();
^^^
You have to be always careful with such code. Once the element
#photo-upload-form is not found for whatever reason an error will be
thrown, because yor are calling a function on undefined.
Speaking of optimizing queries, leave away the element type form in
front of your id selector as well.
-- Klaus
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Submitting a form after input type=file onchange
It did work. I tried it before submitting the suggestion. The jQuery submit() function works in 2 ways. If a function is passed it will set that function to the onsubmit handler, and if no arguments are passed, it will call the submit action on the elements. Your way will work as well due to the form element's built in submit function. But I believe that my way will not throw an error if the form element is not found because jQuery functions fail silently on and empty set, whereas using the [0] to get the dom element first will throw an error if it doesn't exist.
Please let me know if I'm wrong though. I could very well be. Though, as I said, I did test my code before offering the suggestion.On 10/18/06,
Klaus Hartl [EMAIL PROTECTED] wrote:
$(form#photo-upload-form) .submit(function() {alert(inside);}) .submit();That won't work. You have to get out the DOM node out of the jQueryobject first before calling submit() on it:
$(#photo-upload-form) .submit(function() {alert(inside);}) [0].submit(); ^^^You have to be always careful with such code. Once the element#photo-upload-form is not found for whatever reason an error will be
thrown, because yor are calling a function on undefined.Speaking of optimizing queries, leave away the element type form infront of your id selector as well.-- Klaus___
jQuery mailing listdiscuss@jquery.comhttp://jquery.com/discuss/
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Submitting a form after input type=file onchange
Paul McLanahan schrieb: It did work. I tried it before submitting the suggestion. The jQuery submit() function works in 2 ways. If a function is passed it will set that function to the onsubmit handler, and if no arguments are passed, it will call the submit action on the elements. Your way will work as well due to the form element's built in submit function. But I believe that my way will not throw an error if the form element is not found because jQuery functions fail silently on and empty set, whereas using the [0] to get the dom element first will throw an error if it doesn't exist. Please let me know if I'm wrong though. I could very well be. Though, as I said, I did test my code before offering the suggestion. Your code may have worked under certain circumstances. jQuery.submit() triggers any handlers that were attached via jQuery.submit(someFunction). If in the function someFunction the form gets submitted than it's going to work out. But this may change in the future. I think, John filed a bug, that jQuery.submit() should also call the built-in FormElement.submit() method if available. Not quite sure if I'm mixing up two different things here. At least there was another thread regarding this topic. If that has changed I really would have to know - it would have quite an impact on my project. John? -- Klaus ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Submitting a form after input type=file onchange
I would like to just say that I thought it would work as: $(#myform).submit(); inside the onchange event, but it would never submit the form. Using $(#myform)[0].submit(); worked immediately. Thanks again for your help! -Marshall -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Klaus Hartl Sent: Wednesday, October 18, 2006 12:35 PM To: jQuery Discussion. Subject: Re: [jQuery] Submitting a form after input type=file onchange Paul McLanahan schrieb: It did work. I tried it before submitting the suggestion. The jQuery submit() function works in 2 ways. If a function is passed it will set that function to the onsubmit handler, and if no arguments are passed, it will call the submit action on the elements. Your way will work as well due to the form element's built in submit function. But I believe that my way will not throw an error if the form element is not found because jQuery functions fail silently on and empty set, whereas using the [0] to get the dom element first will throw an error if it doesn't exist. Please let me know if I'm wrong though. I could very well be. Though, as I said, I did test my code before offering the suggestion. Your code may have worked under certain circumstances. jQuery.submit() triggers any handlers that were attached via jQuery.submit(someFunction). If in the function someFunction the form gets submitted than it's going to work out. But this may change in the future. I think, John filed a bug, that jQuery.submit() should also call the built-in FormElement.submit() method if available. Not quite sure if I'm mixing up two different things here. At least there was another thread regarding this topic. If that has changed I really would have to know - it would have quite an impact on my project. John? -- Klaus ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/ ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
