I'm trying to do a submit via ajax of a form that contains a file element.
<form id="classic_upload" enctype="multipart/form-data>
<input type="file" name="file" id="file"/>
<br/>
<!-- ...other inputs...-->
<button type="button" id="classic_save"> Send </button>
</form>
What I need to do is to submit this form and check if the file fulfills some requirements, so I wrote an ajax submit for this form
$('#classic_save').click(function(){
$.ajax({
type:"POST",
url:'<g:createLink action="classicUploadFile" controller="scan"/>',
success: function(msg){
alert("Data Loaded: " + msg);
}
});
});
However, I have no idea how to send the file through ajax.
Some context
Originally we were using swfUpload for this. However, we ran into some trouble with https and some certificate issues. So we decided to implement a basic html fallback. Plugins are nice, but we need to guarantee that this fall back is bullet proof (thinking of google mail "classic upload").
Any thoughts? Are iframes the way to go (read somewhere google mail uses them for their classic upload)
Thanks in advance.
If you like, there is jQuery Uploadify plugin to do exactly what you are looking for other than other great features.
I use the jQuery AJAX form plugin on my site to upload files.
Here you'll find a really good example/tutorial how to upload one file http://www.phpletter.com/Demo/AjaxFileUpload-Demo/
Hope it works for you.
Cheers
Related
I have a site hosted with Shopify. I would like to implement a form that posts to an external url. This is a custom form. My original thought is that I could just create a new page and add a form similar to these examples here - http://wiki.shopify.com/Contact_And_Signup_Forms#Signup_Forms
But, I don't see an option to post to an external url. I am completely new to Shopify. I had hoped that being a rails programmer would have helped, but it looks like I need to work with the liquid template system and not rails.
Any assistance would be appreciated.
Instead of using the liquid form tag, just use straight HTML and specify an action for your form that points to an external URL.
Example:
<form action="http://your-url.com" method="post">
<input type="text" name="email_address">
<input type="submit" value="Go!">
</form>
The above example will POST to http://your-url.com.
This is quite a common question but the solutions I found in other people posts are either related to a specific browser (mostly firefox) or incorrect usage of names (name="U12-678132-34")
My issues are with browsers other then Firefox (Firefox all ways works).
The form that I use is pretty standard HTML form but the submission of it is done with javascript (jQuery AJAX).
Firefox all ways asks to remember the password (if it is a new user) and refills the form if you land on that same page again. But when it comes to Chrome/Safari/IE8-9 then they never request to save a password if the form is submitted with javascript.
(By the way I did check if the browsers dont have the - never remember passwords turned on)
My submit happens when you click on the link inside the form or if you just click the "ENTER" button on your keyboard, then it initiates the $.submit() method.
Is there a specific way that the submit needs to occur so that the browser would request to save a password like firefox does? or is there a way to at least tell a specific browser like Chrome/IE to force that type of request?
Form example:
<form class="loginform" method="post" action="">
<div class="inputfield">
<input name="email" type="text" class="emailaddress inputclass" value="" title="Email Address" />
</div>
<div class="inputfield">
<input name="password" type="password" class="password inputclass" title="Password" value="" />
</div>
<div class="submit">
<div class="checking">
<img src="/preloaders/login-preloader.png"/>
</div>
<input type="submit" name="submit" value="submit" style="display:none"/>
</div>
</form>
This is browser behaviour and can't really be changed. Firefox might be "smart" enough to offer to save passwords without the form actually being submitted, but that risks having buttons in the form also trigger that option even if the button does something different. So in my opinion, it's a bad thing for Firefox to do (I've had many problems with Firefox submitting forms even though it shouldn't).
If you really want the save password option to show up, use an iframe and submit to the iframe, instead of using AJAX. You could then use AJAX from the iframe to keep the old behaviour.
attach click event to your submit button
$('#id_of_submit').click(function() {
/your ajax logic
return false;
});
and on link
$('#id_of_your_link').click(function() {
$('#id_of_submit').click();
});
this will do the trick.
Looking at the answer accepted on here - How can I get browser to prompt to save password? - it seems that a valid action might help.
But i would suggest its down to browser behaviour and cannot be controlled by HTML and/or JavaScript. If you want to remember the values entered use a Cookie
As u r doing an AJAX post, then-
Remove the <form> tags
instead of <input type="submit", use button
take the field values & AJAX post- on button click event
it might do the trick.
One of the reason is that site should have a valid certificate. If it is not secured site, password save prompt will not appear after login.
I want to implement file upload in RESTful way using openrasta but not able to find proper way to implement it.There are few ways like using Ajax file upload or using Iframe which i could find.
Can anybody suggest any way of doing this or provide me some resources from where i can refer.
Thanks in advance
It seems to me you're trying to build file uploading in an html environment.
You have two choices.
Use an HTML form to upload the file.
<form enctype="multipart/form-data" action="/files" method="post">
<fieldset>
<input type="file" name="filename" />
<input type="submit" />
</fieldset>
</form>
You can map that in OR very easily. Your handler would look like this:
public object Post(IFile filename) { /* do something with the file */ }
You can't do ajax-based file upload with progress bars as there is no way in pure xmlhttprequest to manipulate binary files. If you go down the route of using a flash / silverlight control behind the scene, you'll just need to make sure you post the content of the file to /files as in the previous example, the easiest way being to send the content with a Content-Type http header of application/octet-stram, and the same handler code will just work.
I need to take data from html page, so I am using LWP to get the page content.
the response I got is partial and not the full source of the page.
...
<div style="display:none" id="QUERY" query=""></div>
<div style="display:none" id="COLL" idcoll=""></div>
<div style="display:none" id="BROWSE" field=""></div>
<div id="center"></div>
<div id="loading"></div>
...
when using a web debugger(FIRE BUG) I can see a hidden content under:
<div id="center"></div>
<div id="loading"></div>
How can I get the hidden data using Perl ?
It breaks my mind for 3 days now !
Thanks ahead.
let's say it a JS running... How can i
see the content?
You could use WWW::Mechanize::Firefox. It seems to support Javascript.
If the content is indeed added using Javascript, you might be able to use WWW::Scripter with the Javascript or Ajax plugin.
If it is not present in the HTML source that LWP fetches, it is added in some other way. There probably is a Javascript running, or the webserver serves you and LWP different pages because of cookies or user agent string.
Install Firebug or use the Safari Develop menu to see what AJAX/XHR requests are being done to the server, and with what POST/GET parameters. You can then use LWP or any other HTTP client module to do such a request.
Does anybody know of a simple jQuery form processing tutorial that actually works?
I have a form I want to process via jQuery/Ajax nothing difficult in PHP but in jQuery and AJAX can I get it to work - no, all the tutorials are based round sending e-mails (or just lists of more lists of more lists of tutorials - hate those)
All I want to do is learn how to send a form via jQuery and AJAX to another page, save the data in a DB without having to leave the first page. I have tried all sorts but nothing works properly. Here is my form:
<form id="form">
<input type="text" name="abc" />
<input type="text" name="def"/>
<input type="text" name="ghi"/>
<input type="submit" name="try" id="try" />
</form>
Now what do I actually do? Sounds silly I know (and I guess I'll get another -1 star for this question) but I will be honest a GOOD simple tutorial would be really useful not just to me but to the others. I know php but jQuery/Ajax - just don't know/understand. I will not be alone
This is one of the good tutorials on how to submit forms using ajax and php.
This link is a reference teaching how to submit forms via jQuery/AJAX. Have the form post to a PHP page to handle the form data.
In short, your jQuery code would look similar to this:
$("#form").submit( function()
{
// Handle validation or any extra data here.
// Return true if validation passed and the data should be posted
// Return false if the form should not be submitted
// You can also do any extra work here that you like before returning,
// including changing something on the page or showing the user a message.
}
There's a cracking plugin for this:
http://plugins.jquery.com/project/form/
It's as easy as:
$('#myForm').ajaxForm(function() {
alert("Thank you for your comment!");
});