Popup window using input text and onclick button - javascript

I'm looking for the solution :
opening the Popup window by inserting a value for example.
if your site is: www.example.com/
by inserting a value as a text let's take ' results ' and clicking on the button show us this Popup page:
www.example.com/results
actually I'm using this Code, but that shows the result in the same page
<!DOCTYPE html>
<html>
<head>
<title>Redirect url in Javascript</title>
</head>
<body>
<input id = "url" type = "text" name = "url"
placeholder = "Enter a url here">
<input type = "submit" name = "button" onclick = "fun()">
<script>
function fun() {
var url= document.getElementById("url").value;
document.write("Redirecting to the url in 3 seconds...");
setTimeout(function(){window.location = url;}, 3000);
}
</script>
</body>
</html>

You will need to window.open(url) with an extra parameter like below.
function fun() {
var url= document.getElementById("url").value;
document.write("Redirecting to the url in 3 seconds...");
var currentUrl = window.location.url;
setTimeout(function(){ window.open(currentUrl+"/"+url, '_blank', 'location=yes,height=500,width=1000,scrollbars=yes,status=yes')}, 3000);
}
Third Param describe how your new window would look like.(For ex. it's height and width)
For more info Read Article
Search for Window features in Article.

you should use
window.open(url)
and you can use `` or "" with + to create the url that you want

two issues with your code:
1) you need to include https:// in the url
2) on js fiddle and stackoverflow you can only test their domain
so if you enter www.stackoverflow.com you'll see that the code below works as intended
<!DOCTYPE html>
<html>
<head>
<title>Redirect url in Javascript</title>
</head>
<body>
<input id = "url" type = "text" name = "url"
placeholder = "Enter a url here">
<input type = "submit" name = "button" onclick = "fun()">
<script>
function fun() {
var url= document.getElementById("url").value;
document.write("Redirecting to the url in 3 seconds...");
setTimeout(function(){window.location = "https://" + url;}, 3000);
}
</script>
</body>
</html>

Related

How to insert a javascript variable inside an <a href> html tag?

I want to insert a javascript variable inside an html link such that each time the value of the variable is changed, it changes immediately in the html link.
I have tried already many possiblities but unsuccesfull.My code is as follows:
<head>
<title>Hello World</title>
</head>
<body>
CATEGORIE NAME: <input id="first_name">
DEVICE NAME: <input id="last_name">
<button id="say">Send!</button>
<hr>
<div id="result"></div>
<script>
function say_hi() {
var fname = document.getElementById('first_name').value;
var lname = document.getElementById('last_name').value;
var html = 'CODE: <b>' + fname + lname;
document.getElementById('result').innerHTML = html;
}
document.getElementById('say').addEventListener('click', say_hi);
</script>
Click this link
</body>
</html>
Please what should i so so that the link takes directly each time the value of the variable "html" and adds in as part of the link
The DOM API is fairly simple. It follows almost exactly the same convention as the HTML. For example, the href attribute of the a tag is the href property of the a object.
What you need to do is make your a tag easier to find:
<a id="this_link" href="">Click this link</a>
Now in your script you can simply do:
var link = document.getElementById('this_link');
link.href = "http://barcodes4.me/barcode/c39/" + html + ".png"

How to populate data and control when window.open

For example right, Google website.
I had found that Search textbox is name=q and Search button is name=btnK.
I am managed to open the browser by using the
var wdw = window.open(url, "_blank");
But I can't populate the data into the textbox as well as trigger the button.
I have tried like
wdw.document.getElementsByName("q").value = "something";
But still failed, please kindly advise. Thanks
2nd Attempt
var vWindow = window.open(GOOGLE_SITE, "_blank");
vWindow.onload = function() {
vWindow.document.getElementsByName("q").value = "Find ABC";
}
You meet the problem of security. Protocol, domain, etc
https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy
Another approach:
<!DOCTYPE html>
<html>
<body>
<button onclick="openNewWindow()">Open window</button>
<script>
function openNewWindow() {
// Open new window
var newWindow = window.open("", "My New Window", "width=500,height=500");
newWindow.document.write("<p>My New Widown</p>");
newWindow.document.write("<input type='text' id='name' />");
newWindow.document.write("<button id='ok'>OK</button>");
// populate the data into the textbox
newWindow.document.getElementById('name').value = "Test";
// Listen button click event
var btn = newWindow.document.getElementById('ok');
btn.addEventListener('click', clickOk);
}
function clickOk(){
console.log("Ok Click");
}
</script>
</body>
</html>

How to get current page title and add it to link directly as variable in JavaScript

Am trying to create a facebook share code in just html and javascript
I would want the link to be exactly like this:
share
But the problem now is, how can I get the page title through the help of ONLY javascript and then add it to the link at t=PAGETITLE.
I think you just want to append a "?t=" parameter to the query string passed into the FB share link with the document.title. If that is correct, you can do
var shareURL = fbShareURL + encodeURIComponent(linkURL + "?t=" + document.title));
which will make a URL like
https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Flmn.9nty.com%2F%3Ft%3DTITLE
which will include the page title as a query string parameter in url-encoded form. It's up to you what you do with that query string parameter, though. Using jQuery, you can update the share link dynamically:
var fbShareURL = "http://www.facebook.com/sharer/sharer.php?u=";
var title = document.title; // The current page
var linkURL = "http://lmn.9nty.com/";
$link = $("<a>");
$link.attr("href", fbShareURL + encodeURIComponent(linkURL + "?t=" + title));
$link.text("Share");
// Add the link to your page
$("body").append($link);
Demo: http://jsfiddle.net/7wst45gq/1/
Here is full, working HTML code as requested:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>How to get current page title and add it to link directly as variable in JavaScript</title>
<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
// Begin demo code
var fbShareURL = "http://www.facebook.com/sharer/sharer.php?u=";
var title = document.title; // The current page
var linkURL = "http://lmn.9nty.com/";
$link = $("<a>");
$link.attr("href", fbShareURL + encodeURIComponent(linkURL + "?t=" + title));
$link.text("Share");
// Add the link to your page
$("body").append($link);
// End demo code
});//]]>
</script>
</head>
<body></body>
</html>
sharer.php only takes the URL as parameter, the rest of the data will come from the Open Graph tags:
a href="http://www.facebook.com/sharer/sharer.php?u=http://lmn.9nty.com/">Share</a>
Btw, you should urlencode the shared URL.

Open popup in Javascript

I have a js rendered in HTML which would give a preview of the form. The code is functioning correctly but it gives me the output on the same page rather i want to open it in a pop-up window. I have tried using window.open () with no luck. Could you please help me out in how i can use window.open() for the below. The button ID is preview. When the button is clicked it executes a function similar to below
$("#preview").click(function() {
$("#formpreview").delete();
var fieldSet = ...................});
You can populate the html in the child window using the below example:
HTML
<!DOCTYPE Html />
<html>
<head>
<title></title>
</head>
<body>
<input type="button" id="launch" value="Launch Child Window"/>
<script type="text/javascript" src="theJS.js"></script>
</body>
</html>
JavaScript
var btnLaunch = document.getElementById("launch");
btnLaunch.onclick = function () {
var childWindow = window.open("", "", "height=500, width=500");
var html = "";
var theVariable = "Conent in Child Window";
html += "<p>" + theVariable + "</p>";
childWindow.document.body.innerHTML = html;
}
Store the popup as a variable, then set the popup's HTML to whatever you need.
$("#preview").click(function() {
var myWindow = window.open("", "Popup", "width=300, height=500");
myWindow.document.write("<html>This is where your content goes</html>");
});

How to document.write image hyperlink inside getjson?

Hi all i want to document.write a hyperlink image inside getjson i tried the following but it doesnt work. could you guys tell me what is wrong with my document write?
<script>
$.getJSON('http://anyorigin.com/get?url=http://www.somesite.com/handelit.ashx&callback=?', function(data){
var siteContents = data.contents;
//writes to textarea
document.myform.outputtext.value = siteContents ;
document.write("<a id="ok" href="http://www.mysite.com/master.m3u8?+siteContents+"><img src="./playicon.jpg"></a>");
});
</script>
Hi all i want to document.write a hyperlink image inside getjson
You can't (not reasonably*). document.write only works during the initial parsing of the page. If you use it after the page finishes loading, it completely replaces the page.
Instead, interact with the DOM. Several ways to do that, but the most obvious based on your code is to have the anchor initially-hidden and then show it after filling in the text area like this:
$("#ok").show();
Full Example: Live Copy | Live Source
(I've changed the playicon.jpg to your gravatar, since otherwise it shows as a broken image on JSBin)
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<form name="myform">
<textarea name="outputtext"></textarea>
</form>
<a id="ok" style="display: none" href="http://www.mysite.com/master.m3u8?+siteContents+"><img src="http://www.gravatar.com/avatar/f69cfb4677f123381231f97ea1138f8a?s=32&d=identicon&r=PG"></a>
<script>
(function($) {
$.getJSON('http://anyorigin.com/get?url=http://www.somesite.com/handelit.ashx&callback=?', function(data){
var siteContents = data.contents;
//writes to textarea
document.myform.outputtext.value = siteContents;
// shows the link
$("#ok").show();
});
})(jQuery);
</script>
</body>
</html>
* "not reasonably": IF your content were coming from the same origin as the document (it doesn't look like it is), you could do this with a synchronous ajax call. But that would be very bad design.
Please, use createElement instead of document.write
$.getJSON('http://anyorigin.com/get?url=http://www.somesite.com/handelit.ashx&callback=?', function(data){
var siteContents = data.contents;
//writes to textarea
document.myform.outputtext.value = siteContents ;
//Create A-Element
var link = document.createElement('a');
link.setAttribute('href', 'http://www.mysite.com/master.m3u8?' + encodeURIComponent(siteContents) );
link.id = 'ok';
//Append A-Element to your FORM-Element
var myForm = document.getElementsByTagName('form')[0];
myForm.appendChild(link);
//Create IMG-Element
var img = document.createElement('img');
img.setAttribute('src', './playicon.jpg');
//Append IMG-Element to A-Element (id='ok')
link.appendChild(img);
});

Categories