Trying to code a button in HTML that opens a new tab to a website when clicked. However, when it is pressed, it just leads to a white page and nothing happens. Please give advice on what to do
HTML:
<input type="button" value="Save" onclick="editText()">
<script type="text/javascript" src="edit.js"></script>
<!-- This button is supposed to open a new tab to a website -->
<input type="button" value="Run" onclick="open()">
<script type="text/javascsript" src="edit.js"></script>
Javascript (edit.js) :
function editText() {
document.getElementById("status").innerHTML = "Saved!"
}
function open() {
window.open("https://www.google.com/?client=safari", _blank)
}
you should pass __blank as string
window.open("https://www.google.com/?client=safari", '_blank')
Related
I have a simple code in order to hide objects inside a div until a button is pressed.
The code works, but after execute the alert, the code roll back.
I understand there are several options to do the same, but same behavior occurs for others I have attempt (such as https://www.w3schools.com/jsref/prop_style_visibility.asp).
So I have attempt the removeAttribute style because it's easier to watch on Console.
I have attempt to put the script before the form, and after form, but same behavior occurs.
I have add some snapshots from Console in order to demonstrate it, please see below.
I am not sure what am I doing wrong. Tested on Chrome (89.0.4389.114) and Edge (89.0.774.75).
Any help is highly appreciated!
Thank you in advance.
PS. It is running inside a php code (using echo) due it has conditional values.
**PS. It works fine outside a form**
<body>
<form ...
(...)
<div class="field" id="pwdDIV" style="visibility: hidden">
..somocode..
</div>
<button class="button" onclick="showPwd()">Show Password</button>
</form>
<script>
function showPwd() {
var z = document.getElementById('pwdDIV');
alert("Get Style: "+z.style.visibility);
if (z.style.visibility === 'hidden') {
z.removeAttribute("style");
alert("Change to Style: "+"visible");
} else {
(...)
}
}
</script>
</body>
Before Press Show Password button
After press Show Password button - executing alert parameter
After execute Javascript code
Outside form sample (works fine outside forms)
<html>
<head>
<script type="text/javascript">
function showPwd() {
var z = document.getElementById('pwdDIV');
if (z.style.visibility === 'hidden') {
z.removeAttribute("style");
} else {
z.setAttribute("style", "visibility: hidden");
}
}
</script>
</head>
<body>
<button onclick="showPwd()">Show Password</button>
<div id="pwdDIV" style="visibility: hidden">
<input type="password" id="pwd1" name="pwd1">
</div>
</body>
</html>
I have an Input Field. When I click on this field it will add product into the Cart and moves on the Cart Page.
<input type="button" class="bgbutton"
value="Add to Shopping Cart" id="addtocart" name="addtocart"
onkeypress="window.event.cancelBubble=true;"
onclick="if (document.forms['form590'].onsubmit()) { document.forms['form590'].submit(); } return false;"
target="_blank">
I have given the tag target but unfortunately it does not work.
Kindly give me any Solution in JQuery / JavaScript etc.
SOLUTION
Simply I add target attribute in form tag. that's it.
$("form").attr("target", "_blank");
I resolved my issue.
Thanks
Simply you can use anchor tag instead of the button
<a
href="CART_URL" <-- here goes cart url you want to open in the new tab
class="bgbutton"
id="addtocart"
name="addtocart"
onkeypress="window.event.cancelBubble=true;"
onclick="document.forms['form590'].onsubmit() ? document.forms['form590'].submit() :; return false;"
target="_blank"
>Add to Shopping Cart</a>
To open a new tab you can use the following code.
<input type="button" class="bgbutton" value="Add to Shopping Cart" id="addtocart" name="addtocart" onkeypress="window.event.cancelBubble=true;" onclick="window.open('NewPage.aspx', 'NewPage');" >
To move between pages
<input type="button" class="bgbutton" value="Add to Shopping Cart" id="addtocart" name="addtocart" onkeypress="window.event.cancelBubble=true;" onclick="location.href = 'NewPage.aspx';" >
For more details you may want to refer to the following questions:
How to launch another aspx web page upon button click?
How can I make a button redirect my page to another page? [duplicate]
In JQuery you can use the following
<script>
$(document).ready(function () {
$(".bgbutton").click(function () {
window.location.href = "NewPage.aspx";
});
});
</script>
You can carry the variables to the other page through the URL like below.
<script>
$(document).ready(function () {
var name = "coder";
$(".bgbutton").click(function () {
window.location = 'NewPage.aspx?username=' + name;
});
});
</script>
To get the passed values to open up in new tab use the following
<script>
$(document).ready(function () {
var name = "coder";
$(".bgbutton").click(function () {
window.open('NewPage.aspx?username=' + name,"")
});
});
</script>
In order to understand how to retrieve a value from a URL, you might want to refer to the following question: Get url parameter jquery Or How to Get Query String Values In js
In JavaScript - If I want to fire a button I do this -
<button type = 'button' id='myButton'>HiddenButton</button>
<script>
function callAutoClick(){
document.getElementById('myButton').click();
}
</script>
When I want to fire this button click, say, onChange of a text field -
<input type= 'text' onchange ='callAutoClick()'/>
I am not able to do the same in DOJO. I have found a solution using Javascript -
var divId = document.getElementById('myDivID');
divId.getElementsByTagName("button")[0].click();
But I don't want to have the dependency with the DivID. Is it possible to click a button just knowing the button's controlID. All I could find online were methods to define an OnClick() using dojo for a button and not clicking the button itself.
Plus I am designing the page with a BPM Tool so on including sections the DivID changes. When I open the page in FireBug I can see this -
<div id="div_1_1_2_1" class="Button CoachView CoachView_invisible CoachView_show" data-ibmbpm-layoutpreview="vertical" data-eventid="boundaryEvent_2" data-viewid="Hidden_Cancel" data-config="config23" data-bindingtype="" data-binding="" data-type="com.ibm.bpm.coach.Snapshot_2d5b8abc_ade1_4b8c_a9aa_dfc746e757d8.Button">
<button class="BPMButton BPMButtonBorder" type="button">Hidden_Cancel</button>
</div>
If you guys could suggest me a way to access the DOM object using the data-viewId also it would cater to my need.
Thanks in advance :)
You can use dojo/query:
function progClick() {
require(["dojo/query"], function(query) {
query("div[data-viewid=myViewId] > button").forEach(function(node) {
node.click();
});
});
}
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.1/dojo/dojo.js" data-dojo-config="async: true"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.1/dijit/themes/claro/claro.css">
</head>
<body class="claro">
<div id="everChangingId" data-viewid="myViewId">
<button type="button" onclick="alert('my button got clicked!')">My Button</button>
</div>
<hr/>
<button type="button" onclick="progClick()">Programatically Click My button</button>
</body>
</html>
So i have two pages and one has a list of buttons (page a) and the other page only has one(page b). Im looking for a way that if you press the button on page b it will take me to page a with the second button with .focus() already targeting it. here are some links for the code i have written this is for page a http://jsfiddle.net/posgarou/S96zw/
HTML page a
<button type="button" id="button0" onClick="reply_click(this.id)">button0</button><p></p>
<button type"button" id="button1" onClick="reply_click(this.id)">button1</button><p></p>
<button type"button" id="button2" onClick="reply_click(this.id)">button2</button><p></p>
<textarea id="myArea"></textarea>
<button type"button" id="button0" onClick="reply_click(this.id)">focus on button 0</button><p></p>
JAVASCRIPT (just used the same for both pages)
function reply_click(clicked_id){
var id= clicked_id;
var myTextArea = document.getElementById('myArea');
myTextArea.innerHTML += id;
document.getElementById(id).focus();
};
and this is for page b http://jsfiddle.net/posgarou/S96zw/
HTML
<body>
<textarea id="result"></textarea>
<button type="button" id="return" onClick="reply_click(this.id)">Return</button>
</body>
You should be able to do that using either a cookie or (better) local/sessionStorage.
On page b, you would include the following code:
sessionStorage["focusedButton"] = "buttonId";
and on page a, you would include the following:
if (sessionStorage["focusedButton"] != undefined) {
document.getElementById(sessionStorage["buttonId"]).focus();
}
For more info, see this earlier question.
I want to disable link button after clicking of it & other enable. toggle enable/ disable between both link buttons using javascript
<a id="a1" href="page1.aspx">One</a><a id="a2" href="page2.aspx">Two</a>
Simple, just add listeners to the onclick events on both links, that disable the link in question and enable the other one.
Something like
document.getElementById('a1').onclick = function() {
document.getElementById('a1').disabled = true;
document.getElementById('a2').disabled = false;
};
document.getElementById('a2').onclick = function() {
document.getElementById('a2').disabled = true;
document.getElementById('a1').disabled = false;
};
Of course if you're going to be extending this to multiple buttons then you could easily abstract the above out to registration methods, looping over arrays of buttons etc. (possibly those that implement a particular class rather than explicitly specifying the array).
The simplest way is to hide the link rather than to make it disabled.
You can use this code to hide the link after click on it.
Its tested code & it worked perfect for me. :-)
<script type="text/javascript">
onclick = function() {
var chk= document.getElementById('myElementId');
chk.style.display="none";
};
</script>
To disable a LINK rather than a BUTTON, the only thing you can do apart from hiding it is to set it not to go anywhere.
onclick="this.href='javascript: void(0)';"
Your question can have any one of the following 3 possible scenario. Choose whichever suites your problem.
Case1) A catch in your question is that since they are links pointing to page1.aspx and page2.aspx respectively once you click on a link a new page loads in the browser. So the effect you want to achieve doesn't really matter.
Case 2) If, you have both the links 'One' and 'Two' on each of aspx pages then you can as well hardcode the disabling of the link pointing to itself. (Or as well not have the link at all).
Case 3) If you have a frame to display the links 'One', 'Two' and you have a another frame to load content of both links then your question has a meaning disabling the other link. Here is the code for the same.
<html>
<a id="a1" href="javascript:void(0)" onclick="toggle(objA1,objA2,'page1.aspx')">One</a>
<a id="a2" href="javascript:void(0)" onclick="toggle(objA2,objA1,'page2.aspx')">Two</a>
<br><iframe id="ifrm" src=""></iframe>
<script>
var objA1 = document.getElementById('a1');
var objA2 = document.getElementById('a2');
// d=element to disable, e=element to enable
function toggle(d,e,link)
{
//if already disabled do nothing(don't follow url)
if(d.disabled) return;
//enable/disable
d.disabled = true;
d.style.cursor = 'default';
e.disabled = false;
e.style.cursor = 'hand';
//follow link
ifrm.src = link;
}
</script>
</html>
You can access and set the "disabled" attribute like this:
if(somebutton.disabled == true){
somebutton.disabled = false;
}
I recommend using a JavaScript framework like jQuery.
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css">
.submit{
padding:8px;
border:1px solid blue;
}
</style>
</head>
<body>
<h1>Disabled submit form button after clicked with jQuery</h1>
<form action="#">
<p>
I'm a form ~
</p>
<input type="submit" value="Submit"></input>
<button>Enable Submit Button</button>
</form>
<script type="text/javascript">
$('input:submit').click(function(){
$('p').text("Form submiting.....").addClass('submit');
$('input:submit').attr("disabled", true);
});
$('button').click(function(){
$('p').text("I'm a form ~").removeClass('submit');
$('input:submit').attr("disabled", false);
});
</script>
</body>
</html>
<script type="text/javascript">
function validateForm(formObj) {
if (formObj.username.value=='') {
alert('Please enter a username');
return false;
}
formObj.submitButton.disabled = true;
formObj.submitButton.value = 'Please Wait...';
return true;
}
</script>
<form name="frmTest" action="" method="post" onsubmit="return validateForm(this);">
Username: <input type="text" name="username" value="" /><br />
<input type="submit" name="submitButton" value="Submit" />
</form>