Open Appended URL in New Tab - javascript

I am working on a hub that allows me to put in a ticket number which is then appended to a URL so it opens directly in a ticketing system. I have this working. The final step is to have the ticketing system open in a separate tab.
Code
<form id="srs">
<input id="srbcp" name="srbcp" type="text">
<input type="button" onclick="pullsr('window.open')" value="Submit">
</form>
<script>
}
function pullsr() {
var action_src = $("#srbcp").val();
var srs = $("#srs");
var urlLink = "https://xxxxxxx.com/SR/";
var urlLink = urlLink + action_src;
console.log(urlLink);
location.href = urlLink;
}
</script>

replace
location.href = urlLink;
to
var win = window.open(urlLink, '_blank');
win.focus();
Hope it works for you.

You can do it by using window.open
Below is the code
<script src="https://code.jquery.com/jquery-3.1.0.js"></script><form id="srs">
<input id="srbcp" name="srbcp" type="text">
<input type="button" onclick="pullsr()" value="Submit">
</form>
<script>
function pullsr() {
var action_src = $("#srbcp").val();
var srs = $("#srs");
var urlLink = "https://xxxxxxx.com/SR/";
var urlLink = urlLink + action_src;
console.log(urlLink);
//location.href = urlLink;
window.open(urlLink, "_blank");
}
</script>

Related

Combine userinput and predefined phrase into url (to write into dom)

I want to combine userinput from a textfield with a preset url,
to then form a new url that is to be written into the dom below after pressing a button
My current code looks like this:
<body>
<form>
<input type="text" id="pixivurl" value="4165980"/>
<input type="button" id="btn" value="pixivuserid"/>
</form>
<html>
<script type="text/javascript">
document.getElementById('btn').onclick = function() {
var val = document.getElementById('pixivurl').value,
src = ' val,
var link = document.getElementById("link");
var a = document.createElement('a');
var linkText = document.createTextNode("pixivuser");
a.appendChild(linkText);
a.title = "pixivuser";
a.href = "https://rsshub.app/pixiv/user/" + pixivuser";
document.body.appendChild(a);
}
</script>
</body>
</html>
The base url here is: https://rsshub.app/pixiv/user/
and it is supposed to have a numeral added right after, defined by userinpu.
(the default result in this case is https://rsshub.app/pixiv/user/4165980 )
I can't quite figure out the part to combine and then write into the dom below,
something might be missing ?
You just have some typing mistakes and then your code will work. The input with the id pixivurl has the user id. And you are getting it and assigning it to the href property of the link element. If you want the url to be also the text of the link element then put it in the textNode you have created.
<form>
<input type="text" id="pixivurl" value="4165980"/>
<input type="button" id="btn" value="pixivuserid"/>
</form>
<script type="text/javascript">
document.getElementById('btn').onclick = function() {
var val = document.getElementById('pixivurl').value;
var url = "https://rsshub.app/pixiv/user/" + val;
var a = document.createElement('a');
var linkText = document.createTextNode(url);
a.appendChild(linkText);
a.title = "pixivuser";
a.href = url;
a.style.display = 'block';
document.body.appendChild(a);
}
</script>

Open in new tab JavaScript search

I am trying to get my code to open a new tab in the browser rather than opening in the same tab, so I added target="_blank" after the href, but this doesn't work as I don't think it is being sent.
does anyone know how to fix this code so it works in a new window?
<script>
function changeText1(){
var userInput = document.getElementById('userInput').value;
var lnk = document.getElementById('lnk');
lnk.href = "https://www.google.co.uk/search?q=" + userInput ;
lnk.innerHTML = lnk.href;
window.location = "https://www.google.co.uk/search?q=" + userInput;
}
function changeText2(){
var userInput = document.getElementById('userInput').value;
var lnk = document.getElementById('lnk');
lnk.href = "https://www.dogpile.com/serp?q=" + userInput;
lnk.innerHTML = lnk.href;
window.location = "https://www.dogpile.com/serp?q=" + userInput;
}
function changeText3(){
var userInput = document.getElementById('userInput').value;
var lnk = document.getElementById('lnk');
lnk.href = "https://uk.search.yahoo.com/search?p=" + userInput;
lnk.innerHTML = lnk.href;
window.location = "https://uk.search.yahoo.com/search?p=" + userInput;
}
</script>
<input type='text' id='userInput' value=' ' />
<input type='button' onclick='changeText1()' value='google'/>
<input type='button' onclick='changeText2()' value='Dogpile'/>
<input type='button' onclick='changeText3()' value='Yahoo'/>
<a href="" target="_blank" id=lnk </a> <br>
I tried adding target to this bit but, it didn't work.
<a href="" target="_blank" id=lnk </a> <br>
Maybe try adding "window.open(url, '_blank').focus();" in your function blocks.
lnk.href = "https://uk.search.yahoo.com/search?p=" + userInput;
lnk.innerHTML = lnk.href;
window.open(lnk.href, '_blank').focus();
window.location = "https://uk.search.yahoo.com/search?p=" + userInput;
Hard to say, try this and let me know if it works ! ??
The a tag does not work as you are expecting. The a tag is used to encapsulate a link.
What would work for having the effect that you want is to refactor your functions to look like this:
function changeText1(){
var userInput = document.getElementById('userInput').value;
var url = "https://www.google.co.uk/search?q=" + userInput ;
window.open(url, '_blank').focus();
}
Using the open method of window
You can follow the examples below: (a, button) tags
document.getElementById('btn').onclick = function () {
window.open('https://www.google.com', "_blank");
}
Link
</br>
</br>
<button id="btn">button</button>

Is there a way to do both this functions at once?

I have created an animation for a theme park. My goal is to let the user decide the total amount of tickets they want. For example if they've selected the button with "two persons" two carts ride across the screen. Then a hidden button shows up that redirects them to a new html page where they can pay two tickets. Here is the html page I have at the moment.
First off, this is my html file:
<!DOCTYPE html>
<html>
<head>
<title>Beginscene</title>
</head>
<link rel="stylesheet" type="text/css" href="./css/karretjestest.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<body>
<img id="rideeen" src="C:\Users\marin\Documents\avans\leerjaar2\Blok 7\PROG\ride.png">
<div class="allebuttons">
<button class="buttons" TYPE="BUTTON" id="editeen" onclick="changeImage();"><div class="myDIV">1 person</div></button>
<div><INPUT class="buttons" TYPE="BUTTON" id="saveeen"></div>
<button class="buttons" TYPE="BUTTON" id="edittwee" onclick="changeImagetwee();"><div class="myDIV">2 persons</div></button>
<div><INPUT class="buttons" TYPE="BUTTON" id="savetwee"></div>
<button class="buttons" TYPE="BUTTON" id="editdrie" onclick="changeImagedrie();"><div class="myDIV">3 persons</div></button>
<div><INPUT class="buttons" TYPE="BUTTON" id="savedrie"></div>
<button class="buttons" TYPE="BUTTON" id="editvier" onclick="changeImagevier();"><div class="myDIV">4 persons</div></button>
<div><INPUT class="buttons" TYPE="BUTTON" id="savevier"></div>
</div>
<script src="js/attractie.js"></script>
<script src="js/buttons.js"></script>
</body>
</html>
Now I've got two different Javascript files. The first one contains the following:
function changeImage()
{
var img = document.getElementById("rideeen");
img.src="C:/Users/marin/Documents/avans/leerjaar2/Blok 7/PROG/ride.png";
return false;
}
function changeImagetwee()
{
var img = document.getElementById("rideeen");
img.src="C:/Users/marin/Documents/avans/leerjaar2/Blok 7/PROG/ridetwee.png";
return false;
}
function changeImagedrie()
{
var img = document.getElementById("rideeen");
img.src="C:/Users/marin/Documents/avans/leerjaar2/Blok 7/PROG/ridedrie.png";
return false;
}
function changeImagevier()
{
var img = document.getElementById("rideeen");
img.src="C:/Users/marin/Documents/avans/leerjaar2/Blok 7/PROG/ridevier.png";
return false;
}
The second file looks like this:
var editeen = document.getElementById("editeen");
var saveeen = document.getElementById("saveeen");
var edittwee = document.getElementById("edittwee");
var savetwee = document.getElementById("savetwee");
var editdrie = document.getElementById("editdrie");
var savedrie = document.getElementById("savedrie");
var editvier = document.getElementById("editvier");
var savevier = document.getElementById("savevier");
editeen.onclick = function() {
saveeen.style.visibility = "visible";
}
edittwee.onclick = function() {
savetwee.style.visibility = "visible";
}
editdrie.onclick = function() {
savedrie.style.visibility = "visible";
}
editvier.onclick = function() {
savevier.style.visibility = "visible";
}
I've come across the problem that there seem to be only two options:
1: When the buttons with text are clicked the ride is changing to another amount of rides, but the hidden buttons don't work.
2: When the buttons with text are clicked the ride doesn't change, but the hidden buttons work.
Does anyone have a solution for this?
All help is appreciated!
if you wants to change the source of the image then show the link button it's will look like this
var double = document.getElementById("editeen");
var img = document.getElementById("rideeen");
var inp = document.getElementById("saveeen");
double.addEventListener("click", function () {
img.src = "/path/image.png";
inp.style.visibility = "visible";
});
or you can send them directly without clicking another button by location
var double = document.getElementById("editeen");
var img = document.getElementById("rideeen");
var inp = document.getElementById("saveeen");
double.addEventListener("click", function () {
img.src = "/path/image.png";
window.location.href = "https://example.com/";
});

PHP: use String as Source for Iframe

I have a custom Wordpress page, with 2 text input boxes, one for "yourvarname" and the other for "key"and an iframe displaying a google document.
Both these Text boxes are populated from variables obtained from the url. This works fine.
What I would like to do:
Have the iframe display the document as named in the textbox, yourvarname.
this is what I have so far
<?php /* Template Name: CustomPageT1 */ ?>
<p><input id="yourvarname" type="text" value="" /> <input id="key" type="text" value="" />
<script type="text/javascript">// <![CDATA[
var url_string = window.location.href; //window.location.href
var url = new URL(url_string);
var c = url.searchParams.get("yourvarname");
var d = url.searchParams.get("key");
document.getElementById("yourvarname").value = c;
document.getElementById("key").value = d;
// ]]></script>
</p>
<iframe src="https://docs.google.com/document/d/e/2PACX-1vTCJM2gUN4_aesXjEB7XtKWu0dB8anwWkjgolj1zRLU2aJieScUXF6WXzMbjYXs7g/pub?embedded=true"
width="110%"
height="500"
class="myIframe">
<p>Hi SOF</p>
</iframe>
<script type="text/javascript" language="javascript">
$('.myIframe').css('height', $(window).height()+'px');
</script>"
<script type="text/javascript" language="javascript">
global $wp_query;
if (isset($wp_query->query_vars['yourvarname']))
{
print $wp_query->query_vars['yourvarname'];
}
</script>
enter code here
Let's start with basic information. In Javascript you can get your iframes like this:
document.getElementsByTagName("iframe")
Since you have a single iframe, you can get it like this:
document.getElementsByTagName("iframe")[0]
but it would potentially save you from trouble to give an id to this tag. Let's define the src of your iframe
document.getElementsByTagName("iframe")[0].src = "somevalue";
Okay, let's apply this in your script:
var url_string = window.location.href; //window.location.href
var url = new URL(url_string);
var c = url.searchParams.get("yourvarname");
var d = url.searchParams.get("key");
document.getElementById("yourvarname").value = document.getElementsByTagName("iframe").src = c;
document.getElementById("key").value = d;
However, if you want it to change when the input changes, then you will need to define a change event for it.
so this is what i added, perhaps incorrectly, as i am now getting 404 error and nothing is displayed
<script type="text/javascript" language="javascript">
document.getElementsByTagName("iframe")[0].src = "yourvarname";
var url_string = window.location.href; //window.location.href
var url = new URL(url_string);
var c = url.searchParams.get("yourvarname");
var d = url.searchParams.get("key");
document.getElementById("yourvarname").value = document.getElementsByTagName("iframe").src = c;
document.getElementById("key").value = d;
</script>

Convert JSON objects from textarea to javaScript objects and print into table(strictly JavaScript)

I have a text-area(HTML) where i will be entering Json objects manually and i
want to convert that into javaScript object and print it into a table. I
tried but couldn't figure it out. (strictly javaScript only). For demo
purpose i am trying to print it in a paragraph.
function addJson(){
var textAreaValue = document.getElementById('jsonTextArea').value;
var jsObject = JSON.parse(textAreaValue);
document.getElementById("demo").innerHTML = jsObject.name+" "
+jsObject.city;
}
//example json object : { "name":"John", "age":30, "city":"New York"}
<p id="demo"></p>
<textarea id = "jsonTextArea" placeholder = "JSON Text..."></textarea>
<input type="button" id="addJson" onclick="addJson()" value="Add">
Should work fine once you have your javascript added properly with the word "function" before "addJson(){"
var addJson = function() {
var textAreaValue = document.getElementById('jsonTextArea').value;
var jsObject = JSON.parse(textAreaValue);
console.log( jsObject );
document.getElementById("demo").innerHTML = jsObject.name+" " +jsObject.city;
}
<p id="demo"></p>
<textarea id = "jsonTextArea" placeholder = "JSON Text..."></textarea>
<input type="button" id="addJson" onclick="addJson()" value="Add">
The only error I could find was the function wasn't declared correctly.
var addJson = function(){
var textAreaValue = document.getElementById('jsonTextArea').value;
var jsObject = JSON.parse(textAreaValue);
document.getElementById("demo").innerHTML = jsObject.name+" "
+jsObject.city;
}
<p id="demo"></p>
<textarea id = "jsonTextArea" placeholder = "JSON Text..."></textarea>
<input type="button" id="addJson" onclick="addJson()" value="Add">
If you want an inline script:
<p id="demo"></p>
<textarea id = "jsonTextArea" placeholder = "JSON Text..."></textarea>
<input type="button" id="addJson" onclick="addJson()" value="Add">
<script>
var addJson = function(){
var textAreaValue = document.getElementById('jsonTextArea').value;
var jsObject = JSON.parse(textAreaValue);
document.getElementById("demo").innerHTML = jsObject.name+" "
+jsObject.city;
}
</script>

Categories

Resources