HTML Link that does POST (using Dojo) - javascript

I am new to web development so help is much appreciated!
I need to create a link in a form that will go to a separate window - the tricky part is that the link needs to be a POST request with arguments in this format (p_guid=55555555&f_name=someName&...) to a URL provided to me.
I'm using html + Dojo and have a link created:
HTML:
Identity Lookup Tool
In Dojo:
on(identityLookup, "click", function(evt) {
console.log("Post will go here 1");
// TODO
});
How can I get this pop up with a new window and do a post request to the URL?

Try embedding your POST parameters in a hidden form. Something like below.
<form id="myform" action="some_url_here" method="post" target="_blank">
<input type="hidden" name="p_guid" value="55555555" />
<input type="hidden" name="f_name" value="someName" />
</form>
Then when the link is clicked do something like:
dojo.byId("myform").submit();
This should submit the form against a new window because of the target="_blank" attribute on the form tag.

you can use dojo/request
on(identityLookup, "click", function(evt) {
console.log("Post will go here 1");
var request = require("dojo/request");
var promise = request.post("url", {
data: { "p_guid": 55555555, "f_name":"someName" },
handleAs: "json"
});
});

Related

How to change form url parameter on submit?

I have this form for processing..
<form action="driver.php" method="GET">
<input type="text" placeholder="Search" id="search" name="n">
<button type="submit">Submit</button>
</form>
by default the url is http://sites.com/driver.php?n=typedname
so i did modifications in .htaccess and convert it to http://sites.com/driver/typedname for SEO friendly urls modrewrite issue - 404 error thanks to anubhava
everything is well, but the problem now comes when I type and click the submit button, it will go to http://sites.com/driver.php?n=typedname
so how can I make it to go this url http://sites.com/driver/typedname instead after clicking submit?
I think javascript can do this, so i tagged it, hope im not wrong.
thanks.
jQuery
$('button[type=submit]').click(function(e){
e.preventDefault();
e.stopPropagation();
window.location = "http://sites.com/driver/" + $('#search').val();
return false;
});
or
$('form').submit(function(e) { // you really need to class/ID your form
// all that code
});
Now this is quick and dirty to give you the idea. You'd of course want to sanitize your input (good idea to do that on the front-end as well as the back-end).
You will have to handle form submit event yourself. Something like this:
document.querySelector('form').addEventListener('submit', function(e) {
e.preventDefault();
location.href = '/driver/' + this.elements.n.value;
}, false);

How to use form submit to load img tag using post?

I have an interactive plotting form like below:
<form method="post">
<img src="plot.cgi" alt="[plot]">
<input type="text" name="plot_settings" value="Type plot settings here.">
<input type="submit" name="submit" value="plot it">
</form>
(Simplified to the bare minimum above to show the point.)
The image is generated by plot.cgi, which sends the browser the new plot. At present, the user clicks the "plot it" button and the whole page reloads, but I'd like just the image to reload. Obviously, I could script each input into a GET request address and replace the img src with that, but post is more desirable, and it seems there should be a more elegant way to make use of the form's submit mechanism.
Is there a way to load the img using POST instead of setting a GET string to it's src?
(jQuery is okay.)
jQuery('form[method="post"]').submit( function( evt ) {
var url = jQuery(this).target();
var data = jQuery(this).serialize();
jQuery.post( url, data, function(data) {
jQuery(this).find('img').src( data.plotURL ); // use server-generated URL for plot img
});
evt.preventDefault();
}

Form submission recognition: works only when a textarea is active. What do I do wrong?

I have a page where Ajax updates the feed every once in a while. Under each post there's a textarea for a reply. JQuery/Ajax can post the reply to the database without any problems when the textarea is active. I press the submit button and everything goes well.
However, if I click somewhere else on the page and the textarea becomes inactive, the submit button doesn't work anymore like it should: it submits the form to root and doesn't run the Ajax function.
Can you figure out what's wrong in my code? Thank you for your help!
There are as many forms as there are messages on the pages. The forms look like this:
<form class="reply-form">
<textarea id="reply-11123" name="comment" class="plain-editor"></textarea>
<input type="submit" class="submit" value="Reply" />
<input type="hidden" value="URL HERE" name="url" />
</form>
Ajax code (at <head>) looks like this:
<script type="text/javascript">
$(document).ready(function()
{
$('.reply-form').on('submit', function (event) {
event.preventDefault();
var $form = $(this),
message_data = $form.find('textarea[name="comment"]').val(),
url = $form.find('input[name="url"]').val();
var postData = {};
var prefix = 'data';
postData[prefix + '[message]'] = message_data;
var posting = $.post(url, postData);
});
}
</script>
If your forms are being added to the page dynamically then you need a different event binding that will attach itself to all current and future forms. The current binding you have is called a direct binding, but what you really need is a delegated binding. A different usage of on() will give you that:
$(document).on('submit', 'form.reply-form', function (event) {
...
});

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

Javascript to open and paint a new window

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)

Categories