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>
Related
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/
I have a simple log on page here: www.mrpbennett.com. I am looking to refresh the page so it removes my password and user name. I currently have the following:
<button class="btn btn-signin" type="button" onclick="check(this.form)" value="login">login</button>
function check(form) {
if (form.userid.value == "admin" && form.pswrd.value == "123qwe!!") {
window.open('http://www.mrpbennett.com/mysite')
}
else {
alert("Error Password or Username")
}
}
This is a super super simple bit of JS but is there anything I can do here to make the page refresh after I have clicked log on? Also is there a way to make the log on button work on pressing enter as well as clicking in?
You should try form.reset() instead. It clears all elements in the target form.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset
USE
window.location.reload();
But, is much better clear the values
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 a using jquery mobile to create a mobile web page. I defined a button and an onclick event. After the onclick function is carried out my page is automatically refreshed. Does anyone know why this is happening or how i can stop it?
my button declaration:
<button id="rateButton" data-theme="a" data-icon="star" data-iconpos="right" onclick="BtnRatePressed();">Rate</button>
function:
function BtnRatePressed() {
var rateBtn = document.getElementById('rateButton');
rateBtn.style.visibility = 'hidden';
alert("yeh");
}
I receive the alert and then the page refreshes.
We need code for this to find out. Any way you can supply us with a live demo?
You might have forgotten to return false at the end of the onclick event. Neglecting the return of false will make the browser to execute the href of the link anyway, which might appear as a page reload.
As I stated, seeing the live example, add return false to either
your BtnRatePressed function
function BtnRatePressed()
{
var rateBtn = document.getElementById('rateButton');
rateBtn.style.visibility = 'hidden';
alert("yeh");
return false;
}
or within the onclick statement.
<button id="rateButton" data-theme="a" data-icon="star" data-iconpos="right" onclick="BtnRatePressed(); return false;">Rate</button>
Add return false; to the end of BtnRatePressed() so that the click even isn't propagated and doesn't cause the form to submit.
Edit: Also, change your attribute to onclick="return BtnRatePressed();"
The problem is that you're using an actual button and that is causing the form to action, you can accomplish the same thing by using a hyperlink button like this and avoid the problem...
Rate