Develop Reference

Is there a way to customise Kampyle, UserVoice, GetSatisfaction or OpinionLab to display the form inline (e.g: not Lightbox)?

The part of the website that I am working on is limited to HTML files only and my customer wants to add a "Was This Helpful - Yes / No " type of feedback message at the end of every help page.
I found a lot of third party scripts but they are all on the fixed either on the left hand side or on the right hand side of the page and the input field is made using Lightbox.
Is there a way to use these scripts and add the form inline something like a flash object or iframe embed code?
( Here I am talking about tools such us: webengage, Kampyle, UserVoice, GetSatisfaction or OpinionLab and so on ).

Kampyle can certainly do this and the feedback button can be easily customized to be a regular HTML link rather than the floating button image. You can get the standard (floating button) tag from the 'embed URL' page and then customize it like this:
Was This Helpful - <a href='https://www.kampyle.com/feedback_form/ff-feedback-form.php?site_code=<YOUR_ACCOUNT_ID>&form_id=<YOUR_FORM_ID>&lang=en' target='myFrame'>Yes</a>
You could even have links to two different forms – one for Yes and another for No. Each form could then be tailored to establish the reasons behind the different responses.
For a Kampyle account, you can either request a demo on the Kampyle site (http://www.kampyle.com/l/) or email your request to sales#kampyle.com.
Declaration: I work on the Support Helpdesk Team at Kampyle

What is the simplest, cross-browser way to submit POST form with <a href>?

I want to change many <a href> actions in my program to improve security and I'm looking to add hidden token to prevent CSRF attacks.
What is the simplest way to change <a href> action into POST request?
The solution should be cross-browser and work well on all major browsers i.e moz, IE, Chrome, Opera etc.
it would be nice to have a pure JavaScript, without external dependencies
it would be nice to avoid separate, quite large (comparing to <a href>) block of code
it should be quite DOM-safe, so wrapping a clickable element in some decorator should not break the code (breakable example: parentNode.submit();)
The clickable Tag should be an anchor i.e <a>, not <button> or <submit>
it should work with file upload/multipart form
Non-POST action:
DELETE
Target solution:
<form method="post" target="/user/delete/4">
DELETE
</form>
Maybe it would be better to style <input type="submit"> to look & layer exactly like an <a> element?

The solution should be cross-browser and work well on all major
browsers i.e moz, IE, Chrome, Opera etc.
mh, let's say you want that it works also on browsers like ie6
it would be nice to have a pure JavaScript, without external
dependencies
yeah probably the best solution
it would be nice to avoid separate, quite large (comparing to ) block of code
using an anchor tag is ok
it should be quite DOM-safe, so wrapping a clickable element in some
decorator should not break the code (breakable example:
parentNode.submit();)
not parentNode but you need submit else you can't send data over POST
modern ways allow the use of new FormData(), mixed with ajax.but if you want compatibility you need to use some sort of old school script.
The clickable Tag should be an anchor i.e , not or
ok
it should work with file upload/multipart form
a form yeah...
SO:
considered the first request ... compatibility there are not many solutions, you also should not use something like addEventListener() witch is not compatible with older ie browsers.
the only way is to create a custom function that could handle multiple actions.
This function is based on your example, delete something .... by adding a form with a name in the html you already have some security problems , so i decided to don't add a form to the page but create one dynamically.and send it just arfter i append it to the dom.
function deleteSomething(e){
if(token === whatever){
var D=document,
a=D.createElement('input'),
x=D.createElement('form');
x.method='post'
a.type='text';
a.name='id';
a.value=e.title;
x.appendChild(a);
D.body.appendChild(x);
x.submit();
}
}
Usage:
delete
delete
delete
here is a delete link ... as there are not many attributes to use on ie6 i'm using the title as a placeholder for the id href is a empty anchor and onclick executes the function.
Inside the function you can then add your custom check to see if the tokens are correct.
you could also add a form to the page tgive it a name then change the title to the forms name ... but if you want security... mh...
for multipart, basically upload form or registration form i would create a custom function like the above but instead of sending everything it just adds the form to the dom.. so you can fill it and then send it.
This is all i can think of if you want that it works on the oldest browsers , don't use external libs , secure forms, links to click.
I personally use ajax and formdata. works on all modern browsers.. ie10 also. i also dn't like to add inline functions inside anchors.
If you have any questions about the code or how to extend it just ask...
by adding the links dynamically you can improve the code and it's security further.
btw in js if a hacker wants to get the clinetside token , it's relatively easy.
you need to check serverside.
security && ie6 is not possible.
I WOULD NEVER USE THIS , this just prevents from simple attacks... if someone really wants to hack your site it's easy.
the only way to have a secure data over post you need to check each individual user, also adding cachpa or how it's called is not that secure....
i would: on the serverside check the referrer, user, and maybe a token.using ajax & formdata. this works on all modern browsers. if you have ie6 on your desktop pc and don't want to/can't install a modern browser use a your/your friends phone.
you can't hide javascript from user ... some time ago i wrote an answer about hiding js code... https://stackoverflow.com/a/17468822/2450730
and with the newset chrome , if you know where to look you can find the secret js code.
And that wexample uses base64 checks refere has custom headers and more.

You need to use javascript for this:::
<form id="form" action="" method="post">
<%=n%>
<input type="hidden" name="mess" value=<%=n%>/>

If you want cross browser compatibility its best to use jQuery 1.X
you can find it here: http://jquery.com/download/
$('.mySubmitA').on('click', function(){
$(this).parents('form').submit();
return false;
});

try this
delete
<script>
function confirmSubmit()
{
var agree=confirm("Are you sure you wish to delete this file?");
if (agree)
document.forms["form_name"].submit();
else
return false ;
}
</script>

HTML
My link
JS
$('.js-post-link').on('click', function(){
jQuery('body').append('<form action="'+ jQuery(this).attr('href') + '" method="post" id="1234567789" /></form>');
jQuery('#1234567789').submit();
return false;
});

I don't think you have to change GET request to POST request to prevent CSRF attack. One way to prevent CSRF attack is to carry some random string in your GET request. This random string is generated and validated at the server side.
When your server generates the link, instead of just generating
delete
you need to generate
delete
where the value of "csrf" parameter is the random string.

Forward to a new page based on the selection from a drop-down list without using JavaScript

I am trying to remove JavaScript from my JSP. Currently i am using something like this to forward to the page i need based on the selection in the drop-down list.
function STFS() {
var url = document.stform.typeOptions.options[document.stform.typeOptions.selectedIndex].value;
if (url!=0) {
window.location=url;
}
}
How can i do the same thing without using javascript.
I tried setting the window.location in the 'select onChange' as follows:
<select name="typeOptions" onChange="window.location=this.options[this.selectedIndex].value;">
But when i submit the form, it doesn't go to the expected url. I must be missing something.
This is a portlet environment and the URL is relatively long.
Any help is appreciated. Thanks

Use onchange instead of onChange (not the real problem since lot of browsers are forgiving on this, but it is plain incorrect) and ensure that you're running the code you think you're running (i.e. you're not running an old or browser-cached version) and that you're really changing the dropdown item instead of plain pressing the form submit button (the onchange doesn't run when you submit the form).
Update as per the comment
great! that's so noob of me. thanks. the reason for no javascript is to make the site work even when javascript is disabled. since the amount of script involved in this page is just that function, i thought it would be better to get rid of that. but, if anyone can suggest any other way to achieve this. i'll be glad. i am open to using as well
Change it as follows:
<form action="redirect">
<select name="url">
...
</select>
<input type="submit">
</form>
with a RedirectServlet class which is mapped on an URL pattern of /redirect and does basically the following job in doGet() method:
response.sendRedirect(request.getParameter("url"));

How to create a small widget with JavaScript

I really don't know how to describe it, but if you understood it and had experience on that field, may be you can help me with something 'Open Source' and 'Ready-made'.
I want to create something like a box 'or widget', where you can change its content by hitting some buttons on the top of the box. (Hey the box is on a web page and this should use Ajax and Javascript).
I have tried some ready scritps, but I found them limited and they drive me crazy, JS frameworks also don't seems to offer such solution.
Any body have any idea on that field?

Just because the box is on a Web page doesn't mean it should use AJAX, Omar. Have you thought about using a third-party solution like ClearSpring or WidgetBox? If you need to put your widget onto Myspace, you'll want one of these.
That said, I've taken a couple of JavaScript-only runs at this problem; see Twitterati and Put Your Digg In A Box for examples, and my Global Widget Summit presentation for explanations.

Have you tried Jquery?
Visit www.jquery.com
Some example can be found at
http://www.openjs.com/scripts/events/keyboard_shortcuts/
Also please check the In-place editing example at
http://www.appelsiini.net/projects/jeditable
http://docs.jquery.com/Tutorials:Edit_in_Place_with_Ajax

In JavaScript is it possible to launch a file browser dialog programmatically?

Instead of using the <input type="file"> tag I'd like to have a button that launches a file browser dialog.
My first thought was to have a hidden file input tag and a button. I'd use the button click on the button to fire the onclick of the hidden file input, but I haven't been able to get this working properly.
So the question is, is this even possible? And second is there a nicer way to do this and still be able to send the information back in a form?
This will be the bottom layer of degrading functionality (from Flash to JavaScript (our site doesn't work without JS)) so it has to work with just basic JS and HTML.

Yes, it's possible (in most browsers) via opacity. Here's a tutorial.

I've done this (see ceejayoz' answer) in the past, but now recommend against it. It is a security issue and can't be relied upon for the future. A much better solution is to progressively enhance your upload form so that the file input is replaced with a Flash- or Java-based uploader with more features (or use better features in HTML 5 if they become available).

Instead of trying to hack the browser's file input control, I'd suggest using a flash based file uploader like SWFUpload. I've started using this in one of my projects and have been VERY pleased with it.
You get javascript callbacks and you can do anything you want for a UI (the flash is just the uploading functionality).

I'd rather avoid transparency tricks.
This worked for me (uses jQuery):
$("#upload-box").change(function(){
$("#upload-click-handler").val($(this).val());
});
$("#upload-click-handler").click(function(){
$("#upload-box").click();
});
And the HTML:
<input id="upload-box" style="visibility:hidden;height:0;" name="Photo" type="file" />
<input id="upload-click-handler" type="text" readonly />
It creates a text input, and a hidden upload input, and patches (=routes) the click on the text input to the hidden file input.
When a file is selected, it will write back the name of the file in the text input, in line with what most users would expect from the interface.
Should work on FF, Chrome, IE9 and +. I didn't test it on IE8.
Here's a jsfiddle. Thank you for upvoting my answer if you like it.

You can do it without any security issues.
Just code that on onmouseenter will promote the zindex of the real upload button (you can use opacity on it or make it transparent) and then you will not need to trigger a click but just use the click from the user.