JQuery plugin form - how to submit form using onchange event
Question
I am new to JQuery - I need to use the JQuery form plugin for a file upload but I would like to submit the form as soon as the file is selected (onchange event of the the input tag:myfile, as shown below),
<html>
<body>
<form encType="multipart/form-data" method="post" action="file-echo.php" encoding="multipart/form-data" id='fileUploadForm'>
**<input name="myfile" type="file">**
<input value="Upload File to Server" type="submit">
</form>
<div class="progress">
<div style="width: 0%;" class="bar"></div>
<div class="percent">0%</div>
</div>
<div id="status"><br></div>
</body>
</html>
I copied the following sample JS code from plugin website but I would like to adapt it so that the form is submitted upon selecting the file. Any pointers please ? thanks in advance.
$(document).ready(function(){
$('#myfile').change(function(){
// alert("");
$('#fileUploadForm').ajaxForm({
beforeSubmit: ShowRequest,
success: SubmitSuccesful,
error: AjaxError
});
});
function ShowRequest(formData, jqForm, options) {
var queryString = $.param(formData);
alert('BeforeSend method: \n\nAbout to submit: \n\n' + queryString);
return true;
}
function AjaxError() {
alert("An AJAX error occured.");
}
function SubmitSuccesful(responseText, statusText) {
alert("SuccesMethod:\n\n" + responseText);
}
1 answers
solution1
3 2012-10-28 19:05:56
If it works at all (since the file upload object is fickle due to security concerns) AND you mean to SUBMIT the form as stated in the original question - then this could work:
$(document).ready(function(){
$('#myfile').change(function(){
$('#fileUploadForm').submit();
});
});
If you want to Ajax the data, then try adding some brackets you seem to have been missing
$(document).ready(function(){
$('#myfile').change(function(){
// alert("");
$('#fileUploadForm').ajaxForm({
beforeSubmit: ShowRequest,
success: SubmitSuccesful,
error: AjaxError
});
});
}); // close the .ready
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.