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>
Related
I have a Button setup and I am wondering how I would run the meta only once the button is pressed.
Here is the button code:
<button type="button" class="btn btn-primary" onclick="waitingDialog.show();setTimeout(function () {waitingDialog.hide();}, 900000);">
Show dialog
</button>
and I want to run this meta once the button is pressed:
<meta http-equiv="refresh" content="3;url=http://www.example.com"/>
The onclick function basically opens a popup that tells the user that the page is loading
Thanks
-Tom
This code help you :
<html>
<head>
<style>
div {
background-color: yellow;
color: red;
width: 80px;
height: 20px;
display: none;
}
</style>
</head>
<body>
<div id="load">Loading...</div>
<br>
<button type="button" class="btn btn-primary">
Show dialog
</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#load").fadeIn(1000).delay(2000).fadeOut(1000);
$('head').append('<meta http-equiv="refresh" content="5;url=http://www.example.com"/>');
})
})
</script>
</body>
</html>
However there are several ways to redirect to a new page using javaScript and jquery, you can force the page to redirect using meta tag by adding a meta tag through jquery:
$('head').append('<meta http-equiv="refresh" content="3;url=http://www.example.com"/>');
This code should be inside your setTimeout function. As the code is too long I suggest to put it in a separate function and call it onClick.
<button type="button" class="btn btn-primary" onclick="mydialog()">Show dialog</button>
<scrtipt type="text-javascript">
function mydialog(){
waitingDialog.show();
$('head').append('<meta http-equiv="refresh" content="3;url=http://www.example.com"/>');
setTimeout(function () {
waitingDialog.hide();
}, 900000);
}
</script>
For some reason .hide works, but .show not?
This is my code:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<button onclick="alertShowAccount()">Add account</button>
<script>
function alertHideAccount() {
$("#addAccount").hide();
}
function alertShowAccount() {
$("#addAccount").show();
}
</script>
<div style="display:none" id="addAccount">
<button class="btn btn-md" onclick="alertHideAccount()">Cancel</button>
</div>
<body>
Anyone has an idea why it is not working? The function IS being called, I tested it with an alert. Also the console gives no errors.
Here's how I did man, it worked for me this way...
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<script>
$(document).ready(function(){
$('#addAccount').hide();
$('#hide_div').on('click',function(){
$("#addAccount").hide();
});
$('#show_div').on('click',function(){
$("#addAccount").show();
});
});
</script>
<body>
<button id="show_div">Add account</button>
<div id="addAccount">
<button class="btn btn-md" id='hide_div'>Cancel</button>
</div>
<body>
So here's what happened, we changed Onclick to just the ID of the element, and called it on the script with $(elem).on('event',function());
I have multiple divs inside a form tag.
<form id="RegdForm">
#Html.Partial("../Partials/_PatientEdit")
The partial view,
<div id="zafar"> <h3>Zafar</h3> </div>
When I try to hide all the divs its working like below
<script type="text/javascript">
$('Div').hide();
</script>
But when I try to hide specific Div it's not hiding at all.
<script type="text/javascript">
$('#zafar').hide();
</script>
I am using ASP.Net MVC 5 with Razor.
Any help appreciated.
Try this
<!DOCTYPE HTML>
<html>
<head>
<title> Untitled </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="zafar">
<h3>Zafar</h3>
</div>
<div class="well well-sm">
<button class="btn btn-success" type="submit">Save</button>
<button class="btn btn-primary" type="button" data-bind="click: printPatient">Print</button>
<button class="btn btn-danger" type="button" data-bind="click: resetForm">Reset</button>
</div>
<button id="hide">Hide</button>
<button id="hideAll">Hide All</button>
<script type="text/javascript">
$(document).ready(function(){
$("#hide").click(function(){
$('#zafar').hide();
});
$("#hideAll").click(function(){
$('Div').hide();
});
});
</script>
</body>
</html>
Here is your answer:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#zafar").hide();
});
</script>
Add your respective function inside this.
$(function() {
$('#zafar').hide();
})
After a long googling I found out one solution to this.
As the div was inside the form tag, the way accesing the div can be done as,
<script type="text/javascript">
$('#RegdForm #zafar').hide();
It helped me to achieve the task.
I'm newbie to web programming and I can't understand why the following code doesn't work.
It is supposed to remove permanently the content of the div element when the button is pressed, but it disappears for a while and then reappears.
The code is the following:
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<script type="text/javascript">
function prueba(){
document.getElementById('uno').innerHTML="";
}
</script>
<div id="uno">CONTENEDOR UNO</div>
<form onSubmit="prueba()">
<input type="submit" value="Entrar" >
</form>
</body>
</html>
I believe what's happening is that your button is submitting a form, which sends the form to the web server then reloads your page. So:
Your "onSubmit" JS runs immediately and clears the div content.
Your page reloads and the content comes back.
Try something like this instead of a form (i.e. remove the surrounding form tag):
<button onclick="prueba()">Entrar</button>
Try this. You don't need a form to hide a DIV
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<script type="text/javascript">
function prueba(){
document.getElementById('uno').innerHTML="";
}
</script>
<div id="uno">CONTENEDOR UNO</div>
<input type="button" onclick="prueba()" value="Entrar">
</body>
</html>
DEMO : http://jsfiddle.net/36pvts4t/2/
try this , for me this is working .This code is remove the text in div with id "uno" , on form submit .
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<script type="text/javascript">
function prueba(){
console.log("Inside the function preueba ");
document.getElementById('uno').innerHTML="";
}
</script>
<div id="uno">CONTENEDOR UNO</div>
<form action="#" method="get" onSubmit="prueba()" target="_blank" >
<input type="submit" value="Entrar" >
</form>
</body>
</html>
I want to make button to load a html page using javascript. (Like Ajax Codes I don't want the page redirection)....
but the code can't load html page & i want it to fill the page view.
so here is the code:
<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
<button type="button"
onclick="document.getElementById("demo").innerHTML='<object type="type/html" data="register.html" >
submit</button>
<p id="demo"></p>
</body>
</html>
try like this:
<!DOCTYPE html>
<html>
<style>
#demo{
width:700px !important;
height:600px !important;
}
</style>
<script>
function loadPage(){
document.getElementById("demo").innerHTML="<object type='type/html' data='register.html' >";
}
</script>
<body>
<h1>My First JavaScript</h1>
<button type="button"
onclick="loadPage();" >
submit</button>
<p id="demo"></p>
</body>
</html>
note: here register.html and this file should be in same folder or give relative path.
You have to escape the double quotes.
Example:
<button type="button"
onclick=" document.getElementById(\"demo\").innerHTML=
'<object type=\"type/html\" data=\"http://www.target.com/register.html\">' ">
submit</button>