I have a page where administrators can manage user accounts. This is done by clicking on an edit link next to the user's name on the main page (admin/usermanage/) which takes the administrator to the edit page for that user ID (admin/usermanage/?edit=x (where X is the user ID)).
On this page, there is a delete button which takes the user back to the main page that lists all the accounts.
function deleteaccount_confirmation() {
var answer = confirm("Are you sure you want to delete this account?")
if (answer){
window.location = "../usermanage/index.php";
}
}
This doesnt work though. The user stays on the same page with the URL unchanged (admin/usernamage/?edit=x)
Any possible solutions?
window.location.href = "../usermanage/index.php"
Try this
window.open('http://somefoler/yoursitename.php','','','_self');
This should work. I've tested. If doesn't spend a little time in google
Heres what I've done to fix it.
Rather than using javascript to move around pages, I've made a HTML form do it.
There is also no more GET variables in play anymore. The edit variable has been moved to POST.
Enough of my rambling, heres the code!
This part sits anywhere in the page.
<form method="POST" id="deleteacc">
<input type='hidden' name='delete_id' value='".$id."' />
</form>
This is the code for the button. It's location in the page is respective to where the button is displayed but otherwise didn't matter if it was in a form or not.
<button type="button" class="button" name="delete" value="Delete Account" onClick="deleteaccount_confirmation()" />Delete Account</button>
and lastly but not least the Javascript
function deleteaccount_confirmation() {
var answer = confirm("Are you sure you want to delete this account?")
if (answer){
$("#deleteacc").submit()
}
}
What the javascript does is simply triggers the submition of the form using jQuery. The javascript is assigned to any button which is why it doesn't need to be in the form. The form contains the data as a hidden variable which is triggered by the javascript.
Hope this helps everyone else!
Related
When I am clicking a submit button on my HTML form, the function related to the button is called and it does its work. After completing the work a mail notification is sent which is consuming too much time. After that a confirmation message is displayed on the same HTML page (without using Ajax; i.e., the page is refreshed).
I want to avoid letting the user click the submit button multiple times in confusion during the waiting period of sending mails. So I am thinking that I should disable the button after it is pressed once.
How can I do this?
Can you please suggest any other technique to achive this goal without disabling the button?
Simply:
<form action="file" method="post" onsubmit="this.submit_button.disabled = true;">
<input name="submit_button" type="submit" value="Submit" />
</form>
You can achieve this without disabling the button by using a nonce, however it is a bit more complex. Essentially, when the user requests the page that has the form that will be submitted, assign a unique id to that user's request (store it somewhere on the server, and make sure it's submitted along with the form). When the form is then submitted, look up the unique id to make sure it's not in process or already processed, and then if it's OK to proceed, mark the unique id as "in process", process the form, and then mark it as processed. If when you do the initial check and the page is in process or already processed, you'll need to take the necessary action (redirect them to a confirmation page if it was successfully processed, or back to the form if it was not successfully processed).
How can I do this?
You can take a look at the javascript code in this page:
http://www.codinghorror.com/blog/archives/000096.html
<input type="Button" onClick="this.value='Submitting..';this.disabled=true;" value="Submit">
Can you please suggest any other technique to achive this goal without disabling the button?
Show a busy panel:
"... Your request is being processed please wait..."
(source: vodafone.co.uk)
If you disable a button right before submitting, then the parent form will not be submitted. You need to disable the button after submitting. Best way it to use JavaScript's setTimeout() function for this.
<input type="submit" id="foo" onclick="setTimeout('document.getElementById(\'' + this.id + '\').disabled=true;', 50);">
50ms is affordable enough to give the form the chance to get submitted.
To enhance the user experience more, you could of course append a message or a loading image dynamically during the same onclick event as already suggested by others.
Assuming you don't want to disable the button you could always pop up a modal on the page. This will block the user's interaction with the page. You could throw some kind of loading spinner in there with a message that the submit is in progress.
I don't understand why it is a problem, as you are doing a regular submit, the user should see a white page while you are processing in the back end.. But in case if you want to disable the button, here is the code, use it on the button
onclick="this.disabled=disabled"
You could have the button be disabled, but still seem active to the user. In the function that gets called after the button is hit the first time, have the first thing it does set a global variable like disableButton to true. When the user presses the button, have that go to a function called something like checkSubmitStatus. If disableButton = true, return false. if disableButton = false, trigger the submit function.
You have still disabled the button, but your users can press away unaware.
I'm not submitting anything, but Google Chrome 31 doesn't update the button look while calculating, so i came up with this workaround:
<style>
.btnMenu{width:70px; font-size:12px}
.btnMenu:disabled{background-color:grey}
</style>
<input type="button" class="btnMenu" value="Total" onmousedown="b=this; b.disabled=true; b.v=b.value; b.value='Calculating...'; setTimeout('updateTotals(); b.value=b.v; b.disabled=false', 100)"/>
As part of my new job, I'm creating a small form where users answer a question and this is then saved and output at the end of the pages.
I started off with having a prompt where users were asked to explain their answers (which worked perfectly!), however I've been asked to change this to an input box.
Essentially the process I need to do is:
User enters in text box -> Clicks next button -> save input to session variable and move to next page
So far, I have the following HTML in the body:
<form name="next" action='#' method=post>
Explanation:<input type="text" id="xp" required><br>
<button class="nextButton" onclick="return explanation()">Next</button>
</form>
with the corresponding javascript:
function explanation() {
var exp = document.getElementById('xp').value;
sessionStorage.setItem("p1_reason", exp);
alert(exp);
document.location.href = 'page2.html';
}
So far the result of this is:
The text box is cleared, but nothing is saved or displayed onscreen
The next page is not displayed.
Any help/advice would be appreciated. I'm relatively new to js so I'd be grateful! I'm well aware that there are similar questions around, I just can't seem to see where I'm going wrong.
#David is right. You can add event.preventDefault() function to prevent the form from its default behaviour, which is submitting. Otherwise your code seems to work.
function explanation() {
event.preventDefault(); // <-- add here
var exp = document.getElementById('xp').value;
sessionStorage.setItem("p1_reason", exp);
alert(exp);
window.location.href = 'page2.html';
}
Also, don't use document.location.href, it's deprecated. It's better to use window.location.href instead.
When you click on nextButton, the browser run explanation() and then try to execute the action of your form. Because your action is action='#' it just try to reload the page, preventing document.location.href for working properly.
Actually, you can try to don't enter nothing on the box and click on the button. The redirect will work because the form is empty, so there is nothing to submit.
I have a button that I'm using to submit a form (quiz). I also have another button to do this, but it gets built dynamically. Note the workflow of the code below.
Ultimately, I want PHP to know which button was pressed to submit the form. So, I included name="save_progress" in the <button> code below. However, including that automatically submits the form and bypasses the setTimeout() in my javascript. Removing it makes the setTimeout() function properly, but I don't get the save_progress data via $_POST.
Button...
<button class="btn btn-primary btn-block btn-lg" name="save_progress" onclick="save_progress(); return false;">Save Progress</button>
Javascript...
//For saving quiz progress
function save_progress(){
$('#save_progress_submit_container').modal('show');
setTimeout(function() {
submit_quiz();
}, 1000);
}
//Submitting a quiz
function submit_quiz(){
$("#answers").submit();
}
Any ideas that will work with this workflow? I've already reviewed this (How can I tell which button was clicked in a PHP form submit?) and it doesn't apply here, unfortunately.
Came up with a better solution overall. I created <input type="hidden" id="submit_type" name="submit_type" value=""> in the form, then simply updated the value using jQuery based on which button was clicked.
For future readers, #Niloct's link in the comments caused me to get a save_progress() is not a function error, but it did prevent the submission.
I'm writing a userscript (javascript/jquery) to automate some things in a browser game. There's an auction where products can be bought with a discount. I want a script that automatically buys goods when it has 33% discount.
The script runs on the url of the auction (greasemonkey), then checks if there are products with at least 33% discount - if that's the case then it will press the button in that row to buy the product.
The problem I'm facing now is: Once you have pressed the button, you have to confirm you want to buy the goods via an alert box. Is there a way to automate this?
I've googled and also checked stackoverflow and people say it's not possible with javascript/jquery. Is this really the case? That would mean it's basically impossible to automate buying goods in the browser game i'm playing. I was thinking of letting the script automatically press ENTER because that would be the same as clicking 'Ok' in the alert box. But that also is impossible they say. So now i'm wondering: is there a way to automate this?
This is the code behind the button:
<input id="buybutton_3204781" class="button" type="button" onclick="if(confirm('Wil je deze producten kopen?')){document.submitForm.BuyAuctionNr.value=3204781; document.submitForm.submit();}{return false;}" value="Kopen">
EDIT:
Hooray, it works by changing the attribute onClick of the button!!
This is the code used:
$('element').attr('some attribute','some attributes value');
Can be closed now, thanks alot guys, appreciate your help!!
Depending on the browser, it may be possible to overwrite window.confirm such as
(function() {
'use strict';
// Might was well save this in case you need it later
var oldConfirm = window.confirm;
window.confirm = function (e) {
// TODO: could put additional logic in here if necessary
return true;
};
} ());
I didn't do any extensive testing, but I was able to override window.alert and window.confirm in firebug at the very least.
Note that this won't help you if their scripts have gained a reference to alert / confirm already (such as var a = window.confirm; a('herp');)
An alternate approach would be to override the function of the button you are auto clicking, or issue the AJAX / POST manually using some xhr.
With JavaScript, you have the ability to alter the HTML and JavaScript code in any way you like.
I would recommend altering the OnClick function so that
<input id="buybutton_3204781" class="button" type="button"
onclick="
if(confirm('Wil je deze producten kopen?'))
{
document.submitForm.BuyAuctionNr.value=3204781;
document.submitForm.submit();
}
{
return false;
}" value="Kopen">
simply becomes
<input id="buybutton_3204781" class="button" type="button"
onclick=
"document.submitForm.BuyAuctionNr.value=3204781;
document.submitForm.submit();"
value="Kopen">
Without changing much you can try this
$(".button").each(function() {
if (this.id.indexOf("buybutton")!=-1) this.onclick=function() {
document.submitForm.BuyAuctionNr.value=this.id.replace("buybutton_","");
document.submitForm.BuyAuctionNr.submit();
}
});
I use this and onclick because I want to replace the existing onclick handler, not add one
If you just want to buy, grab the IDs and submit the form with your user script
since i do not know how you know the discount, an example could be
$(".button").each(function() {
if (this.id.indexOf("buybutton")!=-1) {
var ID = this.id.replace("buybutton_","");
if ($("#discount_"+ID).val()<30) {
document.submitForm.BuyAuctionNr.value=ID;
document.submitForm.BuyAuctionNr.submit();
}
}
});
Which will submit the first it finds. Replace the submit with $.get or post to submit all the discounted stuff
You have to replace the original system alert by the jquery modal to achieve such requirement.
The following is a tutorial to introduce jquery modal:
http://www.jacklmoore.com/notes/jquery-modal-tutorial
When I am clicking a submit button on my HTML form, the function related to the button is called and it does its work. After completing the work a mail notification is sent which is consuming too much time. After that a confirmation message is displayed on the same HTML page (without using Ajax; i.e., the page is refreshed).
I want to avoid letting the user click the submit button multiple times in confusion during the waiting period of sending mails. So I am thinking that I should disable the button after it is pressed once.
How can I do this?
Can you please suggest any other technique to achive this goal without disabling the button?
Simply:
<form action="file" method="post" onsubmit="this.submit_button.disabled = true;">
<input name="submit_button" type="submit" value="Submit" />
</form>
You can achieve this without disabling the button by using a nonce, however it is a bit more complex. Essentially, when the user requests the page that has the form that will be submitted, assign a unique id to that user's request (store it somewhere on the server, and make sure it's submitted along with the form). When the form is then submitted, look up the unique id to make sure it's not in process or already processed, and then if it's OK to proceed, mark the unique id as "in process", process the form, and then mark it as processed. If when you do the initial check and the page is in process or already processed, you'll need to take the necessary action (redirect them to a confirmation page if it was successfully processed, or back to the form if it was not successfully processed).
How can I do this?
You can take a look at the javascript code in this page:
http://www.codinghorror.com/blog/archives/000096.html
<input type="Button" onClick="this.value='Submitting..';this.disabled=true;" value="Submit">
Can you please suggest any other technique to achive this goal without disabling the button?
Show a busy panel:
"... Your request is being processed please wait..."
(source: vodafone.co.uk)
If you disable a button right before submitting, then the parent form will not be submitted. You need to disable the button after submitting. Best way it to use JavaScript's setTimeout() function for this.
<input type="submit" id="foo" onclick="setTimeout('document.getElementById(\'' + this.id + '\').disabled=true;', 50);">
50ms is affordable enough to give the form the chance to get submitted.
To enhance the user experience more, you could of course append a message or a loading image dynamically during the same onclick event as already suggested by others.
Assuming you don't want to disable the button you could always pop up a modal on the page. This will block the user's interaction with the page. You could throw some kind of loading spinner in there with a message that the submit is in progress.
I don't understand why it is a problem, as you are doing a regular submit, the user should see a white page while you are processing in the back end.. But in case if you want to disable the button, here is the code, use it on the button
onclick="this.disabled=disabled"
You could have the button be disabled, but still seem active to the user. In the function that gets called after the button is hit the first time, have the first thing it does set a global variable like disableButton to true. When the user presses the button, have that go to a function called something like checkSubmitStatus. If disableButton = true, return false. if disableButton = false, trigger the submit function.
You have still disabled the button, but your users can press away unaware.
I'm not submitting anything, but Google Chrome 31 doesn't update the button look while calculating, so i came up with this workaround:
<style>
.btnMenu{width:70px; font-size:12px}
.btnMenu:disabled{background-color:grey}
</style>
<input type="button" class="btnMenu" value="Total" onmousedown="b=this; b.disabled=true; b.v=b.value; b.value='Calculating...'; setTimeout('updateTotals(); b.value=b.v; b.disabled=false', 100)"/>