I am working on a php form submit. the form is in a html file and method is submit.php. the fields are-
1. name (text)
2. phone (text)
3. email (test)
4. cv (file)
5. comment (textarea)
I am using jquery form validation plugin (bassistance.de), and jQuery Form Plugin (jquery.malsup.com/form). I want the form to submitted with ajax and email to an address. I have done it successfully. but problem is for file. I cannot understand the procedure. is the file has to be uploaded to server first and then send as attachment? or it can send the file as attachment from client's pc? I am really confused about this. Please help me about this. Also if the file has to be uploaded, then an example for ajax upload will be very helpful. I cannot upload the file when ajax submit the form.
You have to let users to upload the file and then attach it to the email.
name (text)
phone (text)
email (test)
cv (file)
comment (textarea)
Once user submit the form you you have to get the file (CV) Please note that default AJAX POST does not support file. So you have to use some kind of hidden iframe POST technique since you are uploading file as well. Once the file uploaded to the server. You can attach it to your mail and send it via PHP.
There are several jQuery plugins also available for this. You can use those if you prefer plugins.
See http://viralpatel.net/blogs/2008/11/ajax-style-file-uploading-using-hidden-iframe.html
Don't reinvent the wheel...
I would upload the file via the uploadify plugin - http://www.uploadify.com/. It's Gmail like and looks very crispy.
While You are uploading the file just disable the submit button or do some validation to prevent the submit without the file.
Below is a diagram how to implement the download:
Related
I have a form that contains both data inputs and file inputs. Now i want to upload files selected right after selection without submitting the form, because form submit will send other data. The reason that i want upload files before submitting form is saving the time, so when the user is filling the form, files will be uploaded.
As i understood i need to use iframes, because ajax can not simply send files, and formData is not supported in IE. But i couldn't find a clear example of it.
Any idea how to do it?
I have a form our guests use to submit a post to a very simple 'message board'.
Now we want to allow the users to upload 1-10 files, but the concern or requirement is to do this outside of the MAIN form submit.
MAIN FORM consists of:
input field 1
input field 2
text area 1
Submit button
I currently have it so there is an initial browse button.. ( below the text are and to the left of the main submit button) and once a file is picked.. and display a link for the user to add another 'browse' field..
What I would like to do is have an UPLOAD button below all these dynamically created browse/file upload fields... that will send all the file data to an external .php script to upload the files in question, and then just return the file path/name back to the main form (maybe in hidden fields? I dont care).. so that these file path/name string values are submitted when the MAIN FORM is submitted..
hope that make sense.
Is this possible? And if so how do I go about this? The concern is to handle the asset uploading/file handling outside of the main form submission so the users details are not lost if something goes wrong with the file upload portion of things.
You can do this with JQuery and Ajax. There are various plugins are available for this. You can try this - http://plugins.jquery.com/uploadfile/
Please refer this fiddle Click here
Here the $('#photoform').serialize(); not return the form field. This problem occurs only for the file field.
How to get this file field values
From the documentation: "Data from file select elements is not serialized."
A file cannot be uploaded using AJAX because you cannot access the contents of a file stored on the client computer and send it in the request using javascript.
An alternative to do this is to use a hidden iframe. This plugin can help you doing that (read this little tutorial for that plugin, too).
I have created a script to Upload a file using PHP. I have also added file validation checking for File size & File type. But the scenario here is, the Form contain 10-12 Text boxes & a File upload box. So whenever someone fill the complete form & submit and they get File upload validation error, they get back to the Form with the validation error message. But the form gets empty as obviously it get posted on server side.
Is there any way to do the file upload validation without reloading/refreshing the page ?
I strongly recommend this plugin for file uploads. http://malsup.com/jquery/form/
It will allow you to verify the file, and if theres an error you can use json to determine whether the file is valid or not. I use it in all my projects, it's fantastic.
EDIT: Also it allows you to submit files without page refresh, which is the most important part.
You can use ajax:
1) when submit an ajax synchrounous call send the form content to the php server page
2) the php page validates the input
3) if return is "false" (error in validation) the javascript that executed the call sympli insert into the html of the page a proper message. The form stands filled in with the values of the user
You can use $_POST array for the posted values from the form . You should have write form method as POST
Also the same way you can ajax form this will not loose any of your data and page will not refresh as well
As we know you cannot create a file download via ajax.
you can however submit a form which will create a download prompt.
I am generating quite a big file when the users presses a button so I display a "please wait" style message.
My question is,
How can I detect when the form submission has finished, hence the dialog box has been shown?
(this is to hide the message)
Place a redirect when form submission is successful. If redirect will hit the file which browser can't display - it will start download.
In my case I return JavaScript code from form submit handler, which form widget eval()s. That code could be a redirect to the fine which was just produced by the back-end.
Maybe my blog post about AJAX Forms best practices will be helpful:
http://agiletoolkit.org/blog/forms/
If you wish to keep things simple, then:
add form.onSubmit handler, it should prevent default action, collect form data and send to server. You can use some ajax submission plugin for jQuery.
server should parse data, prepare file and send back the name of the file to browser.
your JS code gets executed when transfer is complete (callback) and does redirect to the file through document.location.
In Agile Toolkit it would be as simple as this:
$f=$p->add('MyForm');
if($f->isSubmitted()){
$f->js()->univ()->location(prepare_file($f->getAllData()))->execute();
}
Maybe you should try something like this
http://www.iamkumaran.com/xdownloader-a-flash-javascript-library/
See the demo how file download works and I hope it may help you.