Alert On Button Click And Move User To Opened New Tab - javascript

I have Created a Button With Link Which opens in new tab. I have also used javascript to alert.
Currently this code is working perfectly. But After Clicking OK in Alert, user stays on same page. But I Want To Move User To New Opened Tab. Is it possible ?
My Code Is -
<form><input type="button" id="anchor1" style="cursor:pointer" value="Click Here" onClick="window.open(href='http://www.google.com')"></form>
<script type="text/javascript">
var anchor = document.getElementById('anchor1');
// or anchor = getElementsByTagName('a') then do ('a')[0]
anchor.addEventListener('click', doSomething, false);
function doSomething() {
alert('You Are About To Open New Tab');
}
</script>
Help Needed
Here Is My
JSFIDDLE

This one is super simple.
You need to remove the onclick attribute from the input tag.
Then, put your code to open new tab using JS after your alert line.
<form><input type="button" id="anchor1" style="padding:5px; cursor:pointer" value="Click Here"></form>
In your JS code, do this:
var anchor = document.getElementById('anchor1');
anchor.addEventListener('click', doSomething, false);
function doSomething() {
alert('You Are About To Open New Tab');
var win = window.open("http://google.com", '_blank');
win.focus();
}
Fiddle

Style the anchor tag by changing the text color to black and changing text-decoration to none:
<button>Click here</button>

HTML
<form><input type="button" id="anchor1" style="padding:5px; cursor:pointer" value="Click Here" ></form>
JS
var anchor = document.getElementById('anchor1');
// or anchor = getElementsByTagName('a') then do ('a')[0]
anchor.addEventListener('click', doSomething, false);
function doSomething() {
alert('You Are About To Open New Tab');
window.open(href='http://www.google.com')
}

Related

jQuery preventDefault onclick function

I have this simple jQuery script that asks to confirm action when you click on a link. And it works great when it's a normal a href link, but I have onclick script assigned to the button and it does not prevent it from firing. I need it to prevent it only once. How can I achieve that?
$(".mybutton").one('click', function() {
event.preventDefault();
$(this).html("Are you sure?");
});
function test() {
$(".forthebutton").html("button click function worked");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="mybutton" onclick="test();">Button</button>
<br /><br /><br />
<span class="forthebutton">button click should change this text</span>
You need to remove original onclick and give it back in this case because you can't influent on onclick handler.
const btn = $(".mybutton");
const onclick = btn.prop('onclick'); // save onclick fn
btn.prop('onclick', null); // remove onclick from button
btn.one('click', function() {
$(this).html("Are you sure?");
btn.on('click', onclick); // add onclick back to button
});
function test() {
$(".forthebutton").html("button click function worked");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="mybutton" onclick="test();">Button</button>
<br /><br /><br />
<span class="forthebutton">button click should change this text</span>

page reloads when using document.getElementById

Im using the js function shown below to make a part of page disappear when user clicks on the button.
but when i click on the button, the part does disappear, but then page reloads.
why is it like this?
<button id="myDIV" onclick="fncShowHide()">Try it</button>
<script>
window.fncShowHide = function() {
document.getElementById("idein").className = "display-none";
}
</script>
See What's the standard behavior when < button > tag click?.
Return false from the onclick handler to prevent any default browser action.
<button id="myDIV" onclick="fncShowHide(); return false;">Try it</button>
?
window.fncShowHide = function() {
document.getElementById("idein").className = "display-none";
}
window.other_ = function() {
document.getElementById("idein").style.display = "none";
}
.display-none{
display:none;
}
<button id="myDIV" onclick="fncShowHide(); return false;">Try it</button>
<div id="idein">BYEEEEEEEEEEEEEEEEEEEEEEEEEEE!</div>
<script>
</script>

Can't change a paragraph text in javascript through DOM

it changes for about a second and returns to the previous text.The "Loading..." line has to change into "hi, Please click the next text box to see more instructions!".
I have tried it latest chrome and Edge browsers.
function greetMe() {
var yourName = document.getElementById("textbox").value;
info1 = "hi, Please click the next text box to see more instructions!"
document.getElementById("textToChange").innerHTML = info1
}
#myForm {
float: left;
width: 30%
}
#myformInfo {
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>HEllO ThERE!</h1>
<div id="myForm"><form >
<input id="textbox" placeholder="Your name">
<button onclick="greetMe()">click!</button>
<br><br>
<input id="">
</div></form>
<div id="myFormSteps">
<p id="textToChange">
<script>var info1 = "Loading..."
document.write(info1)
</script>
</p>
</div>
</body>
</html>
It's probably because you haven't set the type attribute for your button. A button's default type is submit. Try adding the attribute type="button" to your <button>.
When you click the button your form is submitting and the page is reloading - that's why it returning to its initial state. To stop this happening pass in event as a parameter to the function and then use that argument in the function with preventDefault():
HTML
<button onclick="greetMe(event);">click!</button>
JS
function greetMe(e) {
e.preventDefault();
// ...
}
As an aside it's better is to remove your inline JS and use an event listener instead.
var button = document.querySelector('button');
button.addEventListener('click', greetMe, false);

toggle what an iframe displays

I have an iframe on my webpage, now I want 2 buttons above this iframe which will change what is being displayed in that iframe.
So it remains only one iframe always showing, but one button makes it one url then the other button changes it to another url.
How would this be done, Thank you.
Something like this:
<input type="button" onclick="load('page1.html')" value="page 1"/>
<input type="button" onclick="load('page2.html')" value="page 2"/>
<iframe id="my_iframe"></iframe>
<script>
function load(page) {
document.getElementById("my_iframe").src = page;
}
</script>
You'll need to set up event listeners on the buttons to listen for a click event. Inside the event, determine which button was clicked and change the src attribute of your iframe to the content you're wanting to show.
HTML
<button id="one">Test 1</button>
<button id="two">Test 2</button>
<iframe id="iframe" src="http://jsfiddle.net/ChaseWest/Zfq7v/" width="100%" height="600px"></iframe>
JavaScript
var buttonOne = document.getElementById("one");
var buttonTwo = document.getElementById("two");
var iframe = document.getElementById("iframe");
buttonOne.addEventListener("click", buttonClick, false);
buttonTwo.addEventListener("click", buttonClick, false);
function buttonClick(e){
if(e.target.id === "one"){
iframe.src = "http://jsfiddle.net/ChaseWest/Zfq7v/";
}else{
iframe.src = "http://jsfiddle.net/ChaseWest/u73rF/";
}
};
Note: You could just as easily have two separate event functions and not just one buttonClick event`
EXAMPLE

How to enable/disable Anchor Tag

Below example is working for enable/disable of href but not for onclick. I need to enable/disable for both attributes
Note: I cant simply remove/bind the onclick event to dummy function() as it need once we enable it.
Script Code:
<script type="text/javascript">
$(document).ready(function () {
$("#b1").click(function () {
$("#yahoo").attr("disabled", "disabled");
$("#yahoo").css("background-color", "silver");
})
$("#b2").click(function () {
$("#yahoo").removeAttr("disabled");
$("#yahoo").css("background-color", "white");
})
$("#yahoo").click(function (e) {
if ($("#yahoo").attr("disabled") == "disabled") {
e.preventDefault();
}
});
});
</script>
HTML Code:
<div>
<input type="button" id="b1" value="Disable Yahoo Link">
<input type="button" id="b2" value="Enable Yahoo Link">
</div>
<a id="yahoo" target="_blank" href="javascript:alert('href alert')" onclick="javascript:alert('onclick alert')">Yahoo.com</a>
Working Example
http://jsfiddle.net/nunnakirankumar/suYe4/
Inside your click() function, you need to explicitly return false (after discovering it's disabled). Otherwise the default handler will cause the browser to go to or run the designated href.
The OP has most likely moved on, so this answer is really just for google searchers' sake.

Categories