Why is a value not getting copied to the clipboard in javascript? - javascript

I'm using Google App Engine Go SDK and I want to put some basic javascript code into my HTML templates that will use parameters passed from the application. The template looks like this:
<script type="text/javascript">
function CopyToClipboard()
{
CopiedTxt = document.selection.createRange();
CopiedTxt.execCommand("Copy");
}
</script>
[...]
<form name="Form1">
<input type="hidden" name="link" value="{{.Link}}">
<input type="button" onClick="CopyToClipboard()" value="Copy to clipboard" />
</form>
What the code is supposed to do is copy the {{.Link}} value into the clipboard. But instead of getting things like http://example.com in the clipboard, I get {{.Link}}, even though the page source of the executed template clearly reads
<input type="hidden" name="link" value="http://example.com">
How can I make the javascript work properly with the GAE Golang template?

This has nothing to do with app engine, templates, or go. The problem is that .execCommand() will not generally work. Clipboard access is not something that can be done successfully through javascript. You must use a flash plugin.

Related

Displaying results on separate page

I have a beginner question. What is the easiest way to take data from a form on one html page and display it on another when the user clicks submit? I have two functions, a Submit() that calls the display() function (the display function displays the data on the page). I first displayed the result on the index.html page but realized it was too cluttered so I opted to print the results to a separate html page. However, I cannot recall the proper way of doing this. I tried putting location.href='results.html' inside my display() function by it didn't work.
You can use just HTML + Javascript to achieve this.
Just create a form with method="get". So the values will be passed by querystring to the another page.
Example:
index.html
<html>
<form method="get" action="results.html">
<input type="text" name="age" />
<input type="submit" value="Send" />
</form>
</html>
results.html
<html>
<h1></h1>
<script>
document.querySelector("h1").innerHTML = window.location.search.substring(1);
</script>
</html>
Whilst technically this is possible using HTML5 local storage, the best solution to your question is to use a server side language such as PHP, which you can read up on here as a beginners tutorial, or in more detail on the PHP Manual
Hope this helps
Here is an example. Write your html page (e.g. "index.html") like
<html>
<head>
<title>form with output</title>
</head>
<body>
<form target="out" action="tst.php">
<input type="text" name="a">
<input type="text" name="b">
<input type="submit" name="sub" value="OK">
</form>
</body>
</html>
and, assuming you have PHP available on your webserver you can write a second (php) script (filename: "tst.php") like this
<?php
echo json_encode($_REQUEST);
?>
(The php script simply outputs all passed variables as a JSON string). The important thing that will redirect your form's output into a separate window is the target="out" part in the <form> tag.

Echoing data from an iframe to the parent page

I have a hidden iframe where the submission of a form is handled. It goes like this:
<iframe name="foo" style="display:none;"></iframe>
So, I was wondering, if it is possible that after the stuff has happened that needs to be within the iframe, I can use javascript or something to print out data on the parent page? Thanks
EDIT: here is my form code.
<form id="bar" name="bar" method="post" target="foo" action="include/database.php">
<input type="text" name="betamount">
<input type='text' name="multipler">
<input type="checkbox" name="hilo" value="High" checked>
<input type="submit" name="submit" value="Bet">
</form>
<iframe name="foo" style="display:none;"></iframe>
Database.php handles these POST requests inside the iframe. Now, there is this one thing inside database.php which goes like this
$betamount = $_POST['betamount'];
$multiplier = $_POST['multiplier'];
$payout = (int)$betamount*(int)$multiplier;
What I want to do is, I want to use AJAX or something to echo out the 'payout' variables inside a div present on index.php
For the purposes of my answer, I'm assuming that the actions you are doing in server side cannot be replaced by a simple client-side one (using javascript).
If you are expecting a return, why don't you use AJAX directly, without iframes? Simply post the data to your php page, and return it asynchronously.
JsFiddle: http://jsfiddle.net/ericwu91/28U8n/
HTML Code:
<input type="text" id="amount" name="betamount">
<input type='text' id="multiplier" name="multipler">
<input type="checkbox" name="hilo" value="High" checked>
<button onclick="submit();return false;">Submit</button>
JS Code:
var yourData = {multiplier:$("#multiplier").val(),betamount:$("#amount").val()};
$.post("yourUrl.php",yourData,function(result){
//Success: Use the "result" parameter to retrieve the data returned from server
alert(result);
});
I'm using jQuery's ajax post method. Documentation here: http://api.jquery.com/jquery.post/
The perks of doing it this way is that it does exactly what you wanted to, but simplifies it by using an almost-native javascript property (asynchronous responses).
EDIT: I forgot to put the real jsfiddle link... And after I pasted all the HTML and JS code, I realized how useless the fiddle is, as it won't return any respose at all... xD

Loading External JavaScript file after view page is loaded in AngularJs

<div ng-app>
<form ng-submit="addTodo()">
<input type="text" ng-model="todoText" size="30"
placeholder="add new todo here" id="inputtext">
<input class="btn-primary" type="submit" value="add">
</form>
<script type="text/javascript" src="js/process1/Process1Controller.js"></script>
I want to load specified js file after html load since id of input textbox is used in js .
i have seen different thread and done many experiments for this like
$scope.$on('$viewContentLoaded', function(){
})
but issue not resolved
This is a hack, and not likely the proper way to do things, but try using ng-if to dynamically populate the items on the page:
//HTML
<script ng-init='myVariable = true' ng-if='myVariable' type="text/javascript" src="myJsToLoad.js"></script>
again, this is not the proper way to do things in angular, but it should work
As per my suggestion,
put the entire js code in a function, like below:
function loadmyjs(){
// put your entire related js code here...
}
And inside the current controller, call that js method like, When your id is created....
loadmyjs();

Android submit https login form which uses jquery

I am trying to see if it is all possible to login to a website after which I will make calls to extract some data. I am doing the latter from one website which doesn't require a login as so:
doc = Jsoup.connect("https://pilotweb.nas.faa.gov/PilotWeb/notamRetrievalByICAOAction.do?method=displayByICAOs").data("retrieveLocId", params[0])
.data("formatType", "ICAO").data("reportType", "RAW").data("actionType", "notamRetrievalByICAOs")
// .userAgent("Mozilla")
// .cookie("auth", "token")
.timeout(6000).post();
This is working perfectly so I want to do the same thing on this other website but I need to login first.
So I have stripped the webpage down to the barest amount to try and see what is required to make the login work and I have the following:
<script src="https://www.airservicesaustralia.com/naips/Scripts/2012.1.214/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="https://www.airservicesaustralia.com/naips/Scripts/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
<form action="https://www.airservicesaustralia.com/naips/Account/LogOn" id="frmLogon" method="post">
<input name="UserName" value="login_goes_here" />
<input name="Password" value="password_goes_here"/>
<input type="hidden" value="Submit" data-type="submit" />
</form>
<script src="https://www.airservicesaustralia.com/naips/Scripts/napis/naips.js?v0.0076" type="text/javascript"></script>
If I press the submit button now the login succeeds. However, I have now run out of knowledge about how this whole thing works in terms of the scripts. So my question at this stage is, is it even possible to construct a call from within Android to get a successful login such that I can then use the same style of jsoup.connect I am currently using?
I am thinking I have to look at the naips.js script and perhaps find out what it is finally using to submit but I'm not sure. Any help would be appreciated.
Gavin...
I actually solved this by looking at the element information in Chrome. I could see the submit button that the javascript was creating and then I just manually put that into the HTML and then could remove all the scripts

Submit HTML form to display entered info in new page

I have a HTML form (called form.html)and a JavaScript function such that when form is submitted, information in that form will be displayed.
Now I want all those info will be shown in new HTML page (called confirm.html), where should I go from?
NOTE: No php or sever-side or anything that really seriously related, it's just simple OFFLINE HTML-form problem, I just have 2 html place in same folder, I will test it on my browser, that's it. Only thing that I worry is how to use information from form.html file in confirm.html file since they are obviously separated.
Thank you very much, here is my form.html ( I dont have confirm.html yet)
<HTML>
<HEAD>
<TITLE>Contact</TITLE>
<script type="text/javascript">
function addtext()
{
var fname = document.myform.first_name.value;
var lname = document.myform.last_name.value;
var email = document.myform.email.value;
document.writeln("Thank you! You have just entered the following:");
document.writeln("<pre>");
document.writeln("First Name : " + fname);
document.writeln("Last Name : " + lname);
document.writeln("Email Address : " + email);
}
</script>
</HEAD>
<BODY>
<center>
<b>CONTACT US</b> <br></br>
<form name="myform">
<label for="first_name">First Name </label>
<input type="text" name="first_name" maxlength="50" size="30">
<br>
<label for="last_name">Last Name </label>
<input type="text" name="last_name" maxlength="50" size="30">
<br>
<label for="email">Email Address</label>
<input type="text" name="email" maxlength="80" size="30">
<br>
<input type="submit" value="Submit" onClick="addtext()">
</form>
</BODY>
</HTML>
Check out the window object of JavaScript: http://www.devguru.com/technologies/javascript/10855.asp
It has a property location, if you write into it, your browser will redirect:
window.location = "http://www.google.com";
Note though, that this will not post your data to confirm.html. what you are trying to do without server-side scripting is not very useful. An HTML form will use CGI (common gateway interface) to send data to a server, that can then process the information. If you use the file:// protocol (as you seem to be doing; all local, static files), there is no server-side to process the data, only JavaScript.
If using the GET method of sending the data through CGI, you could extract the data from the URL using javaScript (as mentioned in another question). To do this, just update your form like this:
<form action="confirm.html" method="get">
And do not put a onClick handler on the submit button, just let it submit.
Many other tools exist though that way more are suitable for the job: server-side scripting languages, examples include PHP, ASP, JSP. For local setups, your best best is using XAMPP.
If you don't want to rely on server-side technology, this becomes more complicated (and hacky, I might add). Probably the easiest would be to generate a url like this on submit -
http://localhost/confirm.html?first_name=val1&last_name=val2&email=val3
then add some code to confirm.html to unpack this. Here's a related question you may find helpful.
If you'd allow me a moment of editorializing, what exactly are you trying to do? If this is just a personal project to see how html works, then I'd strongly recommend starting to learn about server-side technology - once you start wanting to handle user data and persist state, you're pretty much forced to use the server. The web is by design pretty stateless; you can't pass variable in-between pages without either using the server, or through some very complicated AJAX & DOM updating techniques which tend to rely on specialized server files anyway. You can run a PHP & MySQL server locally using existing technology, and if you're interested in expanding your knowledge of web technology this is an inevitable step.

Categories

Resources