I have an alert where if the answer is OK then it should redirect the user to a different page and if they click cancel they should stay on the page. But no matter what button they press it will redirect them to the new page. What is going on?
<script>
function validation() {
if (window.confirm("Click OK if you have entered Anthropometric Data")){
window.location.replace = "send_PhysiologicalMeasures.html";
}
}
</script>
Your HTML button is wrapped in an a tag, which is effectively a link. a elements will always take you to their link specified in href, so just remove that a element: change your HTML to:
<button class="button PhysiologicalMeasures" onclick ="validation()">Record Physiological Measures</button>
Another method would be to change the link's onclick to return the status:
Link
and the JS:
<script>
function validation() {
if (window.confirm("Click OK if you have entered Anthropometric Data")){
return true;
}
return false;
}
</script>
By returning false, you will prevent the execution of the link, and returning true will allow the link to work.
You can see it here: https://jsfiddle.net/am0adszu/
Related
I am trying to open a pop-up window by clicking a button inside a form. MY code is as follows
HTML
<form>
<div class="form" align="center">
<button class="form_sub_btn" onclick="popitup()">Next</button>
</div>
</form>
JavaScript:
function popitup(url) {
newwindow=window.open(url,"","height=400,width=350");
if(!newindow){
alert('We have detected that you are using popup blocking software.');}
if (window.focus) {newwindow.focus();}
}
function popitup(){
window.open("","","height=300, width=300");
}
The latter function I put cause the former one wasn't getting executed with the url given.
Any help is appreciated. Thanks!
Delete the second popitup function. You need only the first one. Pass the URL to open in the argument. E.g., popitup('/popup.html');.
Since this button is inside a form, the button will cause the form to be submitted, which will navigate away from the current page before the popup can be opened. To prevent this, you need to return false from the onclick handler:
<button class="form_sub_btn" onclick="popitup('/popup.html'); return false;">Next</button>
Also, to make this work, it will be necessary to fix the typo in popitup: if(!newindow){ should be if(!newwindow){, because any error in that function will prevent the return false; from executing.
This may be a duplicate question but there is one thing I need to know and I wasn't able to find it on any other questions.
How can I pop up an alert box when the browser's refresh of back button is clicked but not any other buttons like homepage, etc. that refirects the page to another page?
I was able to make an alert box using this code:
<script type="text/javascript">
window.onbeforeunload = function() {
return 'If you resubmit this page, progress will be lost.';
};
</script>
But when I click on my homepage button, which loads the page to another page, the alert box still triggers. I need the alert box only for the refresh and back button of the BROWSER.
Any help is very much appreciated. Thanks in advance. :)
UPDATE
This is the code that works with jsfiddle.net but not with my browser.
<html>
<head>
<script>
var btn = document.getElementById('homepage'),
clicked = false;
btn.addEventListener('click', function () {
clicked = true;
});
window.onbeforeunload = function () {
if(!clicked) {
return 'If you resubmit this page, progress will be lost.';
}
};
</script>
</head>
<body>
<form method="post" action="something.php" name="myForm">
<input type="submit" name="homepage" value="Please Work" id="homepage" href="something.php">
</form>
</body>
</html>
Now my questions is what can be the reason why it's not working in my browser but works with jsfiddle.net? Is there something that i missed? Something to configure, etc? Thanks.
JSFIDDLE LINK: http://jsfiddle.net/bawvu7yy/4/
Determining what was clicked on to trigger navigation is only possible if the button clicked on exists within your document. Assuming this "homepage" button is an element in the document in question, perhaps you can use a flag to keep track of if that button was clicked on.
// assume that the homepage button has an id "homepage".
var btn = document.getElementById('homepage'),
clicked = false;
btn.addEventListener('click', function () {
clicked = true;
});
window.onbeforeunload = function () {
if(!clicked) {
return 'If you resubmit this page, progress will be lost.';
}
};
That way the popup only happens when anything else causes the page navigation.
EDIT: I've provided a working demo on jsfiddle of this. The link does not trigger the popup, but the other two buttons which behave exactly like "back" and "refresh", do trigger the popup. In this update, clicked = true; is commented out and this shows that the popup begins to appear for the Home button as well when this is not executed.
SECOND EDIT: You're running the script before the element exists. Move the <script> tag with the JavaScript inside to the bottom of the <body>.
Just use window.onbeforeunload function in javascript use the code below.
<script type="text/javascript">
window.onbeforeunload = function() { return "Are you sure you want to leave?"; }
</script>
Hope this helps you
I have a script that gets throught parameter the new page andthe redirects to this page.
my function:
function openPage(page) {
alert("Pressed the button!"); //working
window.location.href = "http://localhost:8080/Edas/" + page; //not working
}
and my button:
<button id="btnViewMonthlyPurchaseReport" onclick="openPage('monthlyPurchaseReport.html')">View Monthly Purchase Report</button>
I think my problem is in my base URL ("localhost:8080/Edas/"), but really don't know how to fix it.
Thanks!!
Out of the comment the problem was that the button was inside of a form element.
The problem is that a button without a type attribute will submit the form, which would (not sure if in every browser) result into the described problem, that the window.location.href = ... has no effect and that the page would be redirected to the url defined in action. If action is not defined in the form then it is the the current url.
You have different options to solve this:
You could move the button out of the form (if it would not affect usability)
Change the type of the button to button (<button type="button">View Monthly Purchase</button>) - the default behavior without a type is submit
You could place a return false; at the end of your openPage function to prevent the default behavior (this is similar to 2. but with the difference that the button would still be marked as a submit button which could be important for usability in some situations).
Do this:
JS
var url = window.location.href;
var dirnames = url.split('/');
function openPage(page) {
alert("Pressed the button!"); //working
window.location.href = "http://"+ dirnames[2] +"/Edas/" + page;
}
I imagine you're correct in saying that your issue is in the URL.
Where is your monthlyPurchaseReport.html? If it is in the same directory as where the html with your button is, simple use:
function openPage(page) {
alert("Pressed the button!");
window.location.href = page;
}
My problem was: my button was wrongly inside a form, which #t.niese clearly explained why.
Thank you all for the help!
I have an div and inside that div I have a link as
<a href="#" onclick="Edit_popup();" >edit</a>
When I click on this link the whole page is getting refreshed. But I need only this div to be refreshed not whole page. I am calling this as :
function Edit_popup(){
var criteria=prompt("Please enter id");
if (id=="Login" || id=="login")
{
$("#criteria").load("page2.html");
}
Try with
<a href="#" onclick="Edit_popup(); return false;" >edit</a>
The reason the whole page is getting refreshed is because you have clicked on a link and the link's default behavior is to send you to it's href. (If you look at your browser's address line, you'll notice the URL ends in /#.)
The correct way to prevent this is to pass the event to the function
onclick="Edit_popup(e);"
and then stop the event's (in this case, the click's) default behavior:
function Edit_popup (e) {
var criteria=prompt("Please enter id");
e.preventDefault(); // this line cancels the link
if (id=="Login" || id=="login") {
$("#criteria").load("page2.html");
}
}
You can try using e.preventDefault(); inside your function so that you can do whatever you want then use e.preventDefault(); that 'll prevent the browser from performing the default action for that link.
kindly check this link to understand the difference between return false; and e.preventDefault(); return-false-and-prevent-default
I am working on a website using asp.Net, and it includes a page called from an iframe.
This page named Districting, has a javascript code in the aspx page.
I created a function, that is executed when "Done" button is clicked. This function tests if the conditions that the user made are true.
If yes, another page is loaded, if no, an alert appears, and nothing happens.
But actually, something is happening: the page is refreshing which is not what I want.
This is the button:
<button id="Button1" onclick="testing()">Done</button>
This is the function testing:
function testing() {
if (conditions are true)
//Go to another page
else{
alert("Wrong decision");
//Stay in the current page without refreshing it
}
}
So all I need is to prevent the page from refreshing when clicking on "Done" button.
Thanks in advance:)
Change your code to
function testing() {
if (conditions are true)
return true;
else{
alert("Wrong decision");
return false;
}
}
and your tag to
<button id="Button1" onclick="return testing()">Done</button>
Also, see How to confirm navigation for a link in a href tag?, as it's very similar.
A button is standard an submit button, so is the button in an form?
If that's true, you can takkle that problem when you define the type of the button:
<button type="button" id="Button1" onclick="testing()">Done</button>
Your javascript function that's firing onclick needs to return false. The following should work:
<button id="Button1" onclick="testing(); return false;">Done</button>