I tested it on IE. I am trying to open the URL in same tab, if exists. It does not work as expected if we use URL like (htp://www.google.com) and working if we use our domain page.
While it worked well for Firefox and chrome.
Following example does not work:
<script type="text/javascript">
function myfunction1() {
window.open('http://www.google.com', 'f');
}
function myfunction2() {
window.open('http://www.yahoo.com', 'f');
}
</script>
<body>
<form id="form2" runat="server">
<div>
<a href="#" onclick='myfunction1();'>myfunction1</a>
<a href="#" onclick='myfunction2();'>myfunction2</a>
</div>
</form>
</body>
</html>
And Following example works:
<script type="text/javascript">
function myfunction1() {
window.open('WebForm1.aspx', 'f');
}
function myfunction2() {
window.open('WebForm2.aspx', 'f');
}
</script>
<body>
<form id="form1" runat="server">
<div>
<a href="#" onclick='myfunction1();'>myfunction1</a>
<a href="#" onclick='myfunction2();'>myfunction2</a>
</div>
</form>
</body>
</html>
If you are trying to open in the same page, then you can change the location.href property. If you would like to open in a new tab, in the same browser, then window.open works in IE9.
I used this in a new .html file, opened in IE9 and it worked:
<!DOCTYPE html>
<html>
<head></head>
<script type="text/javascript">
function myfunction1() {
window.open('http://www.google.com', 'f');
}
function myfunction2() {
window.open('http://www.yahoo.com', 'f');
}
</script>
<body>
<form id="form2" runat="server">
<div>
<a href="#" onclick='myfunction1();'>myfunction1</a>
<a href="#" onclick='myfunction2();'>myfunction2</a>
</div>
</form>
</body>
</html>
Related
I am trying to make a page with several buttons(or links) that will direct to different pages.
I have tried this by using the following code that should redirect the user to google.com.
<!DOCTYPE HTML>
<html>
<body>
<form id='form' action="main.php">
<button id="allSetsButton" class="float-left submit-button"> main</button>
</form>
<script type="text/javascript">
document.getElementById("allSetsButton").onclick = function (){
location.href = 'http://google.com';
};
</script>
</body>
</html>
However, when I press the button, the page refreshes instead of redirecting me.
What am I doing wrong here?
Add type="button" to your button element so that it's not considered as a submit button for the form (which causes to submit the form before your event handler can do anything).
<button type="button" id="allSetsButton" class="float-left submit-button"> main</button>
Considering your requeriments, why don't you just use plain links and style them as you need?
<!DOCTYPE HTML>
<html>
<style>
.submit-button {
display: inline-block;
padding: 0.5em 1em;
background-color: #e1ecf4;
}
</style>
<body>
<form id='form' action="main.php">
Main
</form>
</body>
</html>
U can try this
<!DOCTYPE HTML>
<html>
<body>
<form id='form' action="main.php">
<button type="button" id="allSetsButton" class="float-left submit-button" onClick="gotoweb()"> main</button>
</form>
<script type="text/javascript">
function gotoweb(){
window.location.href = 'http://google.com';
};
</script>
</body>
or this in short
<button type="button" id="allSetsButton" class="float-left submit-button" onClick="window.location.href='http://google.com'"> main</button>
I must not understand how to change the content of my <div> tag.
Here is my html file:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="simple.js"></script>
<title>simple</title>
</head>
<body>
<div id="results" name="results"><!-- Results are displayed here -->
<form method="post" name="start">
<p>Enter url: <input type="text" name="myurl" size="100" /></p>
<button onclick="myFunction()">Click me</button>
</form>
</div>
</body>
</html>
Here is my .js file:
function myFunction() {
alert('hey');
document.getElementById("results").innerHTML = "Hello World";
}
When I click the button the alert pops up but the html does not change to "Hello World". It just stays the same :(
What am I doing wrong here.
Update: Thanks everyone! Here is what I have working now:
HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>simple</title>
</head>
<body>
<div id="results"><!-- Results are displayed here -->
<form method="post" name="start" target="_blank">
<p>Enter url: <input type="text" id="myurl" size="100" /></p>
</form>
<button id='clickme'>Click me</button>
<button id='noclickme'>No Click me</button>
</div>
<script src="simple.js"></script>
</body>
</html>
My .js file:
function say_something(s) {
document.getElementById("results").innerHTML = s;
}
document.getElementById("clickme").addEventListener("click", function(){
var url = document.getElementById('myurl').value;
if (url==null || url=="") { alert("Please supply a url"); return false; }
say_something( "Hello World [" + url + "]");
});
document.getElementById("noclickme").addEventListener("click", function(){
var url = document.getElementById('myurl').value;
if (url==null || url=="") { alert("Please supply a url"); return false; }
say_something( "Goodbye [" + url + "]");
});
A button's default behaviour is to submit the form. In this case, the action being blank, it will try to submit to the current URL. You need to prevent that from happening. Also it's bad form to put Javascript inside your HTML like that - use addEventListener instead:
document.querySelector("#results button").addEventListener("click", function(e) {
e.preventDefault();
alert('hey');
document.getElementById("results").innerHTML = "Hello World";
});
Note you'll need to include your script before the </body> rather than in <head> when using this method, or use the DOMContentLoaded event listener.
Example jsFiddle
The reason is the form label.
when you click the button, the form will take an action,but you did not have a certified action, so the chrome will take the defautl action,ie reload the html.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>simple</title>
<script src="simple.js"></script>
</head>
<body>
<div id="results" name="results"><!-- Results are displayed here -->
<form method="post" name="start" target="_blank">
<p>Enter url: <input type="text" name="myurl" size="100" /></p>
<button onclick="myFunction()">Click me</button>
</form>
</div>
</body>
</html>
Here is what I have so far:
<html>
<head>
<title>Major League Baseball</title>
</head>
<body>
<script type="text/javascript" language="JavaScript">
document.writeln( "2013 World Series" );
var today= new Date()
$(document).ready(function () {
});
function changeLang(lang) {
document.cookie = 'myCulture=' + lang;
window.location.reload();
return false;
}
link1.onclick = function(e) { return myHandler(e); };
</SCRIPT>
<BODY onload=alert(today)>
<a id="link1" href="http://boston.redsox.mlb.com/index.jsp?c_id=bos&sv=1">Red Sox homepage</a>
<body onload="onload();">
<input type="text" name="enter" class="enter" value="" id="lolz"/>
<input type="button" value="click" onclick="kk();"/>
</body>
</html>
I'm trying to add a javascript function when a link is clicked. I would like the link to open in a new window. Would this be considered a function?
The syntax is like
$('#link1').click(function(){
//any misc code
//window.open('URL','name of url'); <-- to open a new window/tab
});
edit -- missing 's
After reading your comments the following would achieve what you need - I think. (no Jquery, pure javascript)
<script>
function someFunction(){
alert("You called a function on the link click");
}
</script>
<a target="_blank" onclick="someFunction()" id="link1" href="http://boston.redsox.mlb.com/index.jsp?c_id=bos&sv=1">Red Sox homepage</a>
I would change
<a id="link1" href="http://boston.redsox.mlb.com/index.jsp?c_id=bos&sv=1">Red Sox homepage</a>
to
<a id="link1" href="http://boston.redsox.mlb.com/index.jsp?c_id=bos&sv=1" target="_blank">Red Sox homepage</a>
And I would use this to execute a function when this link is clicked.
<script type="text/javascript">
function myHandler(text) {
alert(text);
}
$(document).on('click', 'a#link1', function() {
myHandler($(this).attr('href'));
});
</script>
Edit: Should work when u use this:
<html>
<head>
<title>Major League Baseball</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript">
<script type="text/javascript">
function myHandler(text) {
alert(text);
}
$(document).on('click', 'a#link1', function() {
myHandler($(this).attr('href'));
});
</script>
</head>
<body>
<a id="link1" href="http://boston.redsox.mlb.com/index.jsp?c_id=bos&sv=1">Red Sox homepage</a>
</body>
</html>
All you need to do is change your link to have a target...so just change it to:
<a id="link1" href="http://boston.redsox.mlb.com/index.jsp?c_id=bos&sv=1" target="redsox">
No javascript required.
What I am doing is calling a Function passval() that itself is calling another function menu() that displays colorbox iframe:
<html>
<head>
<link rel="stylesheet" href="colorbox/colorbox.css" />
<script src="js/jquery.min.js"></script>
<script src="colorbox/jquery.colorbox.js"></script>
<script>
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
$(".inline").colorbox({inline:true, width:"40%"});
$(".iframe").colorbox({iframe:true, width:"90%", height:"80%"});
});
</script>
<script type="text/javascript">
function passval()
{
var vc = document.getElementById('vc').value;
var fc = document.getElementById('fc').value;
//checking inputs
//document.write(fc+" ");
//document.write(vc+" ");
//document.getElementById('inline').click();
menu();
}
function menu()
{
$('<a />').colorbox({fixedWidth:"500px", fixedHeight:"300px", iframe:true, href:"search.php", bgOpacity:0, open:true}); return false;
}
</head>
<body>
<form id="form1" name="form1" method="post">
<input type="submit" value="Submit" onclick="passval()" />
</form>
<a class='iframe' id="inline" href="chart.htm">iFrame</a>
</body>
</html>
But it opens and closes as soon as it was opened.. same is up with click [document.getElementById('inline').click();] called by the function
Any suggestions over it?
You need preventDefault() on your submit click. Now your page is reloaded OR change:
<input type="button" value="Submit" onclick="passval()" />
please look at the following sample code:
<html>
<head>
<script type="text/javascript">
function myfun()
{
alert('hi');
}
</script>
</head>
<body>
<h1> Hello </h1>
<input type="button" value="MyButton" onClick="myfun()"/>
</body>
</html>
When I run this using php, and when I click on the button, the alert box doesn't come up. However, if I write onclick="alert(hi')" it works fine. What might be the reason?
<html>
<body>
<h1> Hello </h1>
<input type="button" value="MyButton" onClick="alert('hi')"/>
</body>
</html>
Missing a ' in your code...