Develop Reference

Submit GCP POST form without changing page

I have a C# MVC website and I'm trying out Google Cloud Print(GCP) to print.
Google Provides this example
https://developers.google.com/cloud-print/docs/appDevGuide
<form action="https://www.google.com/cloudprint/submit" method="post" enctype="multipart/form-data" id="submitForm">
<input type="hidden" name="xsrf" value="xsrfTokenHere"/>
<input type="hidden" name="printerid" value="123456789"/>
<input type="hidden" name="ticket" value='{"version": "1.0", "print": {}}'/>
<input type="text" name="title" value="My Document"/>
<input type="text" name="contentType" value="application/pdf"/>
<input type="text" name="tag" value=""/>
<input type="file" name="content"/>
<input type="submit" value="Print"/>
</form>
Which does what it should.
But it sends the user to the Google website were it displays the JSON response.
Is there any way to skip this last part, e.g let the user submit the form without moving to the google website.
I've tried various jQuery AJAX and similar calls. I've also tried posting the form inside of an iframe but none of these work since Google does not allow Cross-Origin calls.
If there was a way to post this either in HTML, Javascript or C# without jumping to the google result page it would've been great.

Using a Form to Dynamically Change the URL in the Address Bar Part 2

Okay, so I asked a variant of this question before, but I think the thread has died at this point, and I have a followup question:
Using a Form to Dynamically Change the URL in the Address Bar
So, I was looking to find a way to use a form to quickly add a product to a Volusion cart by entering it's product code. Turns out, if you're on the cart page, the solution is this snippet:
<form action="ShoppingCart.asp" name="form" method="get">
<input type="text" value="" name="ProductCode">
<input type="submit" value="Add To Cart">
</form>
Well, this doesn't work at all on other pages...knowing very little about how GET forms work, I'd love to better understand why this is, and what I can do to make this work on, say, the homepage.
The site (currently) is: http://ezndb.cwjea.servertrust.com/
As you can see, I have the red area sporting the code that I used on the check out page, but it doesn't work...any suggestions? I know other threads have suggested javascript/jquery or php methods of getting this to happen...

any form with the method ="get" will append data to the url in name value pairs ( the name being the input name
<form action="#" name="form" method="get">
<input name="q" />
<input name="q2" />
<input type="submit" value ="click and look at the address bar, Probably won't work on stack though" />
</form>

It doesn't work because your store is a members only site so the customers cannot add items to the cart until they are confirmed members.

GET request through a window click with paramters

I am new to HTML. I have got an URL in the following format:
dosomething?param1=abc&param2-xyz
This URL is guaranteed to be valid.
How I have got an HTML page with a button on that. What I want to do is to send a GET request to the URL by clicking the button.
I have tried this:
<form method="GET" action="dosomething?param1=abc&param2-xyz">
<button>DO Something</button>
</form>
The problem is that the parameters are missing on the server side.
What is the proper way to do this? I cannot make an Ajax call on this as it will be a file downloading action and people told me that it won't work with Ajax.
Javascript solution is OK for me.
Please help.

You dont need Javascript for this as you can simply form your request like
<form method="GET" action="dosomething">
<input type="hidden" name="param1" value="abc">
<input type="hidden" name="param2-xyz" value="">
<input type="submit" value="DO Something">
</form>
see http://www.w3schools.com/html/html_forms.asp
Of course you could also use Javascript, you might want to look into using JQuery with http://api.jquery.com/jQuery.get/
see also HTTP GET request in JavaScript?
Furthermore, out of interest, what did "people" tell you about "Ajax won't work"?

The GET paramaters are passed by the input tag. This is a proper way :
<form method="GET" action="dosomething.php">
<input type="text" name="customparam" />
<input type="hidden" name="param1" value="value1" />
<input type="hidden" name="param2" value="value2" />
<input type="submit" />
</form>
When you will click on the submit button, you will be on dosomething.php?customparam=whatiwrote&param1=value1&param2=value2
On your page "dosomething.php", you can access these params with that :
<?php
$customparam = $_GET['customparam'];
$param1= $_GET['param1'];
$param2= $_GET['param2'];
echo "The value of param1 is : ".$param1;
?>
If the params don't move, you can also put them in a link directly with :
<a href="dosomething.php?param1=value1&param2=value2" >My link </a>

How can I fill the action parameter of a form with values from the form's input?

I know I can pass query parameters from a form and expect them in the query string:
<form method="GET">
<input type="text" name="param" value="value" />
<input type="submit" value="submit" />
</form>
This results in
http://blah-blah-blah/blah?param=value
However, in my webapp, I'm using path parameters. To access a single book, #459, in the library, you'd visit
/books/459
and to check one out, POST to
/books/459/checkout
where 459 is a path parameter. When I try
<form action="/books/{book_id}">...</form>
it takes me to
/books/%7Bbook_id%7D
rather than
/books/459
Do I need javascript or something to build the URI?

Thanks to RobG
I have used the same thing in calling WhatsApp from mobile application
It works beautifully
<form action="https://wa.me/"
onsubmit="this.action = this.action + this.mobile.value; this.submit();">
<input type="tel" name="mobile" size="10" value="91xxxxxxxxxx"/>
<input type="text" name="text" value="Thanks Vijayan!" />
<input type="submit" value="WhatsApp" />
</form>

You may need something like:
<form onsubmit="this.action = this.action + this.book_id.value;" ...>
However, making the action dependent on scripting is poor design. It is much more robust for your server to deal with the URI ...?book_id=value, which does not require any client script at all.

If you are generating your HTML with PHP, the code below should work (untested).
$book_id = 459;
<form action="/books/{$book_id}">...</form>
Alternatively, you could dynamically modify the html using JavaScript. It is better not to do it this way because some users may disable JavaScript. (untested)
$('form').attr('action','/books/' + book_id);

HTML: Copy form fields to another form including FILE input field?

I came to see that form file input field value cannot be set with javascript for security reasons.
I just want to copy a FILE input to another form and post it, I searched for a work around and could not find anything, is it possible?
UPDATE: my code:
function prepareUpload( filevalue ){
document.getElementById('logo').value =filevalue;
var mform = document.getElementById('sleeker');
ajaxUpload( mform,'<?php echo base_url(); ?>'); // a methods to upload...
}
<input class="input-file-upload" type="file" size="20" name="logodummy" id="logodummy" onchange="prepareUpload( this.value );" />
<form action="" method="post" name="sleeker" id="sleeker" enctype="multipart/form-data" onbeforesubmit="return false;">
<p><input type="hidden" name="logo" id="logo" /></p>
</form>
Anything other thatn file input are working fine, and I could receive with $_POST, but $_FILES doesn't have values. And this code alone working fine too. I think this coe is enough?

Yes, you can place the <input type="file"> outside your HTML form, and then use the onChange event to fill an <input type="hidden"> within the form that gets posted:
<input type="file"
onchange="document.getElementById('hidden_file').value = this.value;" />
<form method="POST">
<input type="hidden" id="hidden_file" value="" />
<input type="submit" />
</form>
However in modern browsers, you will only be able to access the file name, and not the full path. You may want to check the following Stack Overflow posts for further information on this topic:
Can’t get the complete address while uploading a file
How to get the file path from HTML input form in Firefox 3
UPDATE:
The original question made me think that you only needed to copy the "file name" to another HTML form, and not the whole <input type="file"> representation.
Further to the update, I assume you meant something like this:
<input type="file"
onchange="document.getElementById('hidden_file').value = this.value;" />
<form method="POST">
<input type="file" id="hidden_file" value="" />
<input type="submit" />
</form>
Unfortunately the above does not work. Firefox will return "Security error code: 1000" if you try the above example.
As for some workarounds, you may want to the check David Dorward's suggestions:
Using cloneNode
Moving the input field with appendChild before submitting the form

You could move the file input to the other form (with appendChild or insertBefore), submit the form, and then move it back.

I haven't tested this in depth, but it appears to work in Firefox.
Use cloneNode
var copy = file_input.cloneNode(1);
form2.appendChild(copy);

Very much similar to cloneNode except in jQuery
In an xulrunner browser (like firefox) I have successfully used something like the following:
$('input:file').clone().appendTo($('#mainform'));
This should copy all file input objects into the form with id=mainform.
Avoid using the id attribute in the objects to be cloned. id's should always be unique.

I realised that this might be late to the party, but with HTML5, you can use the "form" attribute to target a form, like [form id="the_form"]...[/form]....[input form="the_form type="file" ... /]