Submit HTML form to 2 locations?

Hi,

I'm wondering if it's possible to submit a form, or rather the contents of the form on a web page to two different locations from the one submit.

I want a form on the web page, where the user will pick a file to upload from the local machine. On submitting, the file will go to one place (S3), while the file name, size (and some other data from JavaScript variables) will go to a Rails app I have running.

I'm not even sure how to begin this or of it's even possible. Any ideas?

Sorry if this isn't in the correct zones, given all the categories I wasn't sure which one it fits best.

Thanks.
CitizenSnipsAsked:
Who is Participating?
 
StealthyDevConnect With a Mentor Commented:
Hi, If you dont mind to use JQuery plugins, I have given a demo of JQuery-Forms plugin.

I have used AjaxSubmit of the same form twice to AJAX1.html and AJAX2.html.

Please find the files as below:

Best Regards.
P.S.: Execute MultipleSubmit.html
MultipleSubmit.html
AJAX1.html
AJAX2.html
jquery-1.4.2.min.js
jquery.form.js
0
 
Shinesh PremrajanEngineering ManagerCommented:
if you are using the PHP then you can make use of the curl to do this for you.

Hope this helps.

0
 
CitizenSnipsAuthor Commented:
HI shinug,

I'm not using PHP and would like to avoid it if possible as I'm very unfamiliar with it. Can JavaScript create the two forms dynamically and submit each one, or with this be a ludicrous idea? The user on the front end need only know that they have uploaded the file, not what happens behind the hood.

Thanks.
0
Protect Your Employees from Wi-Fi Threats

As Wi-Fi growth and popularity continues to climb, not everyone understands the risks that come with connecting to public Wi-Fi or even offering Wi-Fi to employees, visitors and guests. Download the resource kit to make sure your safe wherever business takes you!

 
Shinesh PremrajanEngineering ManagerCommented:
Its possible but the thing is it will open up a new popup window. which i guess will be annoying to the user.

Another possiblity is to do a submit the page, then automatically redirect to the next page
below is the example.

a.html // where your file upload is going

<script>

document.formname.action="y.html";
document.formname.method="post";
document.formname.submit();

</script>

in y.html page call this

<script>
 window.location.href="x.html?filename=x.php&filesize=1024";
</script>

Hope this helps
0
 
CitizenSnipsAuthor Commented:
Thanks shinug, but that solution has some more problems given what I need to do. Firstly, I have no control over the code on the page where the file is going (it's Amazon's S3), so I can't redirect from it. Secondly, my page is mostly Ajax enabled, so a whole page redirect is out of the question since the user will lose all the progress and current state that the page was in.

The pop-up window solution might not be too bad for now if you can elaborate on that one please?

This is the base of what I'm trying to do, but some details of the file must go to my own service. This may help you help me :-)
http://developer.amazonwebservices.com/connect/entry.jspa?externalID=1434

Thanks.
0
 
StealthyDevCommented:
Hi, can you give your form? How many controls do you have in your form?
0
 
StealthyDevCommented:
Do you mind using an external library like JQuery?
0
 
CitizenSnipsAuthor Commented:
The form will be something like described on the Amazon dev page (attached). The finer details of that form will be generated by my Rails service (eventually). The only visible input on the form will be the file location to upload which the user inputs.

So the main things are:
For S3:
The file (from user)
AWS ID (from my Rails app)
Signature (from my Rails app)
Policy (from my Rails app)

For My Rails app:
The File name (including extension)
The File size

There are some small background items involved, but they are generated and put into the form by the rails app.

I hope I'm being clear on what I'm trying to do :-( The Rails app needs to only receive two bits of information from the form.

Thanks.


<form action="https://s3-bucket.s3.amazonaws.com/" method="post" enctype="multipart/form-data">
      <input type="hidden" name="key" value="uploads/${filename}">
      <input type="hidden" name="AWSAccessKeyId" value="YOUR_AWS_ACCESS_KEY"> 
      <input type="hidden" name="acl" value="private"> 
      <input type="hidden" name="success_action_redirect" value="http://localhost/">
      <input type="hidden" name="policy" value="YOUR_POLICY_DOCUMENT_BASE64_ENCODED">
      <input type="hidden" name="signature" value="YOUR_CALCULATED_SIGNATURE">       

      File to upload: 
      <input name="file" type="file"> 
      <br> 
      <input type="submit" value="Upload File"> 
    </form>

Open in new window

0
 
CitizenSnipsAuthor Commented:
Sorry, I don't mind using any library (hopefully JS only) once I can get this working :-) In fact I already have JQuery in use, but for one very simple thing :-)  My head has been melted for a while trying to do this. I just imagined it would be so simple when I first thought it up, but I was wrong :-(
0
 
StealthyDevConnect With a Mentor Commented:
Ha ha.. Dont worry, just look at http://docs.jquery.com/Main_Page

JQuery is much simple than you imagine. In fact, I just love to write a script using it. It makes the script simple, as you can see from the above one. The same time, you can achieve a big goal. :)
Give a try reading the doc. Cos' you have got the issue solve. Spend the time useful :)

Warm Regards.
0
 
CitizenSnipsAuthor Commented:
Thanks senthurpandian, I'll spend a bit of time going through those. One question though - Am I correct in thinking that when this will be a file upload, the file will be sent to both locations as well? Baring in mind only one location needs the file, while the other needs only the file name.
0
 
StealthyDevCommented:
Glad to hear.

Do AJAX submit for the page that does NOT need FILE-UPLOAD. Do submit the form normally to the one that needs FILE-UPLOAD.

Regards.
0
 
CitizenSnipsAuthor Commented:
Hi senthurpandian,

I've been playing around with this a bit now and I'm not too sure what I'm doing wrong. I have my form uploading the file to S3, and I have it so that the page doesn't refresh or redirect, but no second submit is being made when I submit the form. You'll have to forgive me if I'm doing something so very stupid :-(

I have attached the code inside my web page that handles the form, but I'm not too sure if I'm missing something vital. There is rails code inside this which populates the form accordingly, but as for the JS I'm lost. I've made progress, but don't know where to go from here.

Also, on the second submit, how exactly would i extract the pieces I want for it? Sorry if this is really simple stuff, JS is still very confusing to me.

Thanks.
    <form name='upload_form' action="https://<%=@private_location%>.s3.amazonaws.com/" method="post" enctype="multipart/form-data">
      <input type="hidden" name="key" value="uploads/${filename}">
      <input type="hidden" name="AWSAccessKeyId" value="<%=@aws_id%>"> 
      <input type="hidden" name="acl" value="private"> 
	  <input type="hidden" name="policy" value="<%= Util.base_encode_policy_document %>">
      <input type="hidden" name="signature" value="<%= Util.generate_form_signature(@aws_key) %>">
      <input type="hidden" name="Content-Type" value="application/octet-stream">
      File to upload to S3: 
      <input name="file" type="file"> 
      <br> 
      <input type="submit" value="Upload File"> 
    </form> 
	
	
	<script>
	$(document).ready(function(){
		$("#upload_form").ajaxSubmit({
			beforeSubmit: showRequest,  // pre-submit callback 
			success: showResponse,  // post-submit callback 
			clearForm: true,        // clear all form fields after successful submit 
			resetForm: true,        // reset the form after successful submit 
			timeout:   10000 
		});

		$("#upload_form").ajaxSubmit({
			url: "https://<%=@private_location%>.s3.amazonaws.com/",
			success: function(res){
				alert(res);
			}
		});

		$("#upload_form").ajaxSubmit({
			url: "main/upload/",
			success: function(res){
				alert(res);
			}
		});
	});
</script>

Open in new window

0
 
CitizenSnipsAuthor Commented:
Hi senthurpandian,

Sorry about the earlier post, I see some of the silly mistakes I was making (which I have fixed). Now I have attached actual generated code from my rails app, but I get strange errors when I submit now. It seems that both requests want to go to my app and not to S3.

When I submit I get the following two requests:

http://86.42.253.230:3001/main/list?key=uploads%2F%24%7Bfilename%7D&AWSAccessKeyId=AKIAIGP3LN2JXPLKAZBA&acl=private&policy=eyJleHBpcmF0aW9uIjogIjIwMjAtMDEtMDFUMDA6MDA6MDBaIiwgCiAgImNvbmRpdGlvbnMiOiBbIAogICAgeyJidWNrZXQiOiAiYWtpYWlncDNsbjJqeHBsa2F6YmFfcHJpdmF0ZV9lYWlmc19kaXJlY3RvcnkifSwgCiAgICBbInN0YXJ0cy13aXRoIiwgIiRrZXkiLCAidXBsb2Fkcy8iXSwKICAgIHsiYWNsIjogInByaXZhdGUifSwKICAgIFsic3RhcnRzLXdpdGgiLCAiJENvbnRlbnQtVHlwZSIsICIiXQogIF0KfQ%3D%3D&signature=lW8k6nV61tctjqDhVhOr3AthHe8%3D&Content-Type=application%2Foctet-stream&file=screenshot.jpg

http://86.42.253.230:3001/main?login=invalid

Can you see what I'm doing wrong in the code?

Thanks for your help.

<form name='upload_form' id='upload_form'>
      <input type="hidden" name="key" value="uploads/${filename}">
      <input type="hidden" name="AWSAccessKeyId" value="AKIAIGP3LN2JXPLKAZBA"> 
      <input type="hidden" name="acl" value="private"> 
	  <input type="hidden" name="policy" value="eyJleHBpcmF0aW9uIjogIjIwMjAtMDEtMDFUMDA6MDA6MDBaIiwgCiAgImNvbmRpdGlvbnMiOiBbIAogICAgeyJidWNrZXQiOiAiYWtpYWlncDNsbjJqeHBsa2F6YmFfcHJpdmF0ZV9lYWlmc19kaXJlY3RvcnkifSwgCiAgICBbInN0YXJ0cy13aXRoIiwgIiRrZXkiLCAidXBsb2Fkcy8iXSwKICAgIHsiYWNsIjogInByaXZhdGUifSwKICAgIFsic3RhcnRzLXdpdGgiLCAiJENvbnRlbnQtVHlwZSIsICIiXQogIF0KfQ==">
      <input type="hidden" name="signature" value="lW8k6nV61tctjqDhVhOr3AthHe8=">
      <input type="hidden" name="Content-Type" value="application/octet-stream">
      File to upload to S3: 
      <input name="file" type="file"> 
      <br> 
      <input type="submit" value="Upload File"> 
    </form> 
	
	
	<script>
		$(document).ready(function(){
			$("#upload_form").ajaxSubmit({
				url: "https://akiaigp3ln2jxplkazba_private_eaifs_directory.s3.amazonaws.com/",
				success: function(res){
					alert(res);
				},
				clearForm: true,        // clear all form fields after successful submit 
				resetForm: true,        // reset the form after successful submit 
				timeout:   10000
			});
					
			$("#upload_form").ajaxSubmit({
				url: "main/upload/",
				success: function(res){
					alert(res);
				},
				clearForm: true,        // clear all form fields after successful submit 
				resetForm: true,        // reset the form after successful submit 
				timeout:   10000
			});
		});
	</script>

Open in new window

0
 
CitizenSnipsAuthor Commented:
Hi senthurpandian,

I'm not sure if your example will for, or I'm just doing it wrong, but unless I include an action in the form header, it defaults to the current page and the Ajax submits are never being called.

Can you please elaborate more on how it works? My code is still the same from the above snippet.

Thanks in advance.
0
 
CitizenSnipsAuthor Commented:
Didn't get working the exact way I wanted, but it was useful none the less.
0
 
StealthyDevCommented:
1) You are executing the AjaxSubmit on the document.load function. It will submit the form as soon as the page is loaded. Do it in a button click.

2) In your code, you are using:
clearForm: true,resetForm: true
 - which will reset the form after the first submit.

3) I have asked you to do the first submit to your APP using AjaxSubmit and the second submit (natural-form submit) to S3. B'cos, I am not sure AjaxSubmit will upload the file correctly. Please test if possible.

Please find a sample below:

Best Regards.

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>

<form name="testForm" id="testForm">
	<input name="input1" value="input 1">
	<input name="input2" value="input 2">
	<input name="input3" value="input 3">
	<input type="button" value="test submit" onclick="testSubmit();">
</form>

<script>
	function testSubmit(){
		//For Your Ref.
		//More info @ http://jquery.malsup.com/form/
		/*$("#testForm").ajaxSubmit({
			//target: '#output1',   // target element(s) to be updated with server response 
			//beforeSubmit: showRequest,  // pre-submit callback 
			//success: showResponse  // post-submit callback 
			// other available options: 
			//url:       url         // override for form's 'action' attribute 
			//type:      type        // 'get' or 'post', override for form's 'method' attribute 
			//dataType:  null        // 'xml', 'script', or 'json' (expected server response type) 
			//clearForm: true        // clear all form fields after successful submit 
			//resetForm: true        // reset the form after successful submit 
			// $.ajax options can be used here too, for example: 
			//timeout:   3000 
		});*/

		$("#testForm").ajaxSubmit({
			url: "AJAX1.html", // your app for the file name
			success: function(res){
				alert(res);
				//This means that the first form submit is done and response is returned!
				//Here using some text like "done" returned from your server, you can validate
				//if(res.indexOf("done") < 0) {alert("error in submittin the form, problem in my app");return}
				//else{//do the second submit
				//}
				document.testForm.action = "zzz.sd"; // S3 address
				document.testForm.submit();
			}
		});

		/*$("#testForm").ajaxSubmit({
			url: "AJAX2.html",
			success: function(res){
				alert(res);
			}
		});*/
	}
</script>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.