Javascript to open and paint a new window - javascript

I m sending an AJax POST request to a servlet and it returns a file. I need to print the contents of the file in a new window using javascript.
window.open() sends the request as GET by default. But i need to send a POST request. Can any one please help me?

It does not make any sense to have post to link to a PDF, but try this:
<form action="" method="post" target="_blank"></form>
<a href="someservlet?file=somepdf"
onclick="document.forms[0].action=this.href; document.forms[0].submit(); return false">Somepdf</a>

Open a new window.
var handle = window.open();
Write a form tag to the new page
handle.document.write('<form action="pdfsource.jsp" method="post" id="MyForm">' +
'<input type="hidden" name="xxx" value="0123">' +
'</form>');
handle.document.close();
Then post that form
handle.document.getElementById("MyForm").submit();
(Might be som syntax errors, have not had time to test)

Related

How do I remove the query-string from my URL redirect

So i made this script below so that someone can enter an order ID and it would redirect to the following http://domain.tld/order/254441.
but it give me a query-string of ?webid=254441 at the end the URL. How do I remove this?
function urlRedirect(){
var action_src = "/orders/" + document.getElementsByName("webid")[0].value;
var form_url = document.getElementById('form_url');
form_url.action = action_src ;
}
<p>Search by ID</p>
<form id="form_url" onsubmit="urlRedirect()"><input name="webid" type="text" /> <input type="submit" value="Search" /></form>
And if anyone has suggestions on making the code better that would be great! :)
Thanks.
Change the method of your form to "POST".
<form id="form_url" onsubmit="urlRedirect()" method="POST">
HTTP POST requests supply additional data from the client (browser) to the server in the message body. In contrast, GET requests include all required data in the URL. When the method is GET, all form data is encoded into the URL, appended to the action URL as query string parameters. With POST, form data appears within the message body of the HTTP request.
See the documentation.

Including imagegrabscreen php function to a button onclick without refreshing the page

I'm trying to create a button with an onclick function that activates the imggrabscreen php function. Problem is, I've done several codes and so far the only function that I was able to use was a submit input type in which this refreshes the page. I tried using button as an input type but unfortunately, it does not save any screenshots upon clicking the button. Here's the code that I'm using so far.
if(isset($_POST['btnscreen']))
{
$im = imagegrabscreen();
imagepng($im, "screenshot.png");
}
ob_end_flush();
?>
<form method="post" action="" enctype="multipart/form-data">
<br>
<input type="submit" value="Click to Screenshot" id="btnscreen" name="btnscreen"></center>
<br><br>
</form>
php is parsed and executed server side (pre-processing) so you cannot call any php functions after the page has been sent to the browser. The only way to do this is to make a new request to the server (ajax).
I can't quite grasp what your function does (php cannot make a screenshot of what your browser is displaying as it has no information of how it has been rendered - please note different browsers may display the page differently).
I would try reading up on html5 canvas element which can achieve that (e.g. https://html2canvas.hertzen.com/).
Hope this helps

Submitting an image to Facebook with Javascript and HTML form

I’m going crazy with image upload to Facebook. I’ve tried HTML5 drag and drop methods, Dropzone.js, as well as uploading to my own server before submitting the image via PHP. But the only one I can make work (because of my inexperience, I’ll admit) and that doesn't involve uploading the image to my own server, is by using a HTML form as shown in the Facebook documentation:
<form id=“upload_form” enctype="multipart/form-data" action=“https://graph.facebook.com/event_id/photos?access_token=an_access_token” method="POST">
Please choose a photo
<input name="source" type="file"><br/><br/>
Say something about this photo:
<input name="message" type="text" value=""><br/><br/>
<input type="submit" value="Upload"/><br/>
</form>
I dynamically generate it in Javascript and use var’s to fill in event_id and access_token.
This works fine, so all my permissions and authorising are correct. Now what I’d like to do is handle the response because the browser does as you’d expect when the user clicks submit and displays basic text showing the post id and whatnot.
So, I created a button and bound the following to it’s click event:
var fd = document.getElementById('upload_form');
if (fd) {
console.log('Sending');
var XHR = new XMLHttpRequest();
XHR.addEventListener('load', function(data) {
console.log('XHR finished:');
console.log(data);
});
XHR.addEventListener('error', function(data) {
console.log('XHR ERROR:');
console.log(data);
});
var graph_url = 'https://graph.facebook.com/'+event_id+'/photos?access_token=' + access_token;
XHR.open('POST', graph_url);
XHR.send(fd);
}
Once the user has selected an image and clicks my button to execute the above XHR completes the send and reports as finished, but Facebook replies with:
(#324)Requires upload file.
Please can someone show me where I’ve gone wrong - it’s been a problem for days now!
If you willing to use jquery and jquery.ajaxForm plugin
<!-- You form code stay Make sure your form.action url is valid ajaxForm use that as url -->
<form id=“upload_form” enctype="multipart/form-data" action=“https://graph.facebook.com/event_id/photos?access_token=an_access_token” method="POST">
Please choose a photo
<input name="source" type="file"><br/><br/>
Say something about this photo:
<input name="message" type="text" value=""><br/><br/>
<input type="submit" value="Upload"/><br/>
</form>
//your javascript to upload the image togather with message
// put this in a button, not submit button
$('#upload_form').ajaxForm({
complete: function(data) {
//process fb response
}
});
I suggest you use Fiddler to catch both connections, with and without XMLHttpRequest and see which is the actual difference between both request, I don't actually know what XHR.send(fd); does, but maybe it's sending the form content itself, not submitting it?
Fiddler is a very useful tool when connecting to external APIs

How can I save the entire form from the client by a servlet?

I create a form with some inputs and other information on a client by JSP,then i want to send the form to the server while a servlet runs on the server. My question is how to save the entire form which I post inside a html file, the html file will be created once I get the request.
<form name="myform" action="servlet on server" method="post">
<input type="button" id="sth" />
....
</form>
I want to use the File class to create the new html file, but how can I get the entire form and write it in the new file?Thanks.
I guess you could do some javascript to send a post request with a field containting the inside html of your document of your browser.
<script type="text/javascript">
myform.sth = document.innerHTML;
myform.submit();
</script>
I cannot give you the exact syntax, but that's the idea.
BUT it surely is a weird design you are building

post form to same site

Do you know how to post the form to the same site where the form is?
This does not work:
<form action="window.location.href();" method="post">...</form>
Empty action
<form method="post">...</form>
works!
http://binarious.de/sandbox/post.php
or with PHP
action="<?php echo $_SERVER['PHP_SELF'] ?>"
or with Smarty
action="{$smarty.server.PHP_SELF}"
Just render the absolute or relative URL in action
http://www.w3schools.com/tags/att_form_action.asp
Action attribute
Where to send the form data. Possible values:
An absolute URL - points to another web site (like
action="http://www.example.com/example.htm") A relative URL - points
to a file within a web site (like action="example.htm")
You cannot literally put JavaScript in HTML except for events.
Instead, set it dynamically through JavaScript:
document.forms[0].action = window.location.href;

Categories