This question is going to sound strange to many of you. I need a button where it can't be triggered by a click. That means it won't do an action. Like if the form attribute action is set to something like next.html the click won't cause it to go to the next page.
And when the user hovers over the button, it can go to the next site. The reason why I am doing this is because a bot can submit data without hovering over the button. I am hoping this will prevent bots from submitting anything into my site.
I don't really have any code, but is there any way to do this in Javascript/jQuery?
If this confusing please ask more questions in the comments and I will try to answer to the best of my capabilities.
Now I am not sure how effective this technique would be at blocking bots. If you still want to give it a go, I'd do something like this:
HTML:
<form class="form" action="1.php" type="post">
<input type="text">
<input class="submitbutton" type="submit">
</form>
Javascript/jQuery:
var $form = $('.form'),
$btn = $('.submitbutton');
// Disable submit button on page load
$btn.prop('disabled',true);
// Reactivate submit button on form hover
$form.hover(
function(e){
e.stopPropagation();
$btn.prop('disabled',false);
}, function(e){
e.stopPropagation();
$btn.prop('disabled',true);
}
);
I put together an example at JSFiddle.
Bots search for the <form> element
Bots query for the form's action value
Bots won't follow your form action if there's no form in your page. If that might sound strange:
Create your entire form using JS (No form? No bots.)
Either way (specially if you care about noJS visitors) you need to validate your form
on server side (that's what matter the most)
on client side (JavaScript; notify your users if they forgot to fill something - typos)
Here you can find an approach example
Why your hover approach/intent is bad:
You'll be only messing with UI creating a bad UX. Nothing more.
The form is already there on the page revealing all what a bot needs.
The bot does not need any button to submit your form.
Some users might use the TAB key to focus the SUBMIT button - so there's no hover involved whatsoever, just a poor form that does not work as it should.
In general, clicking the button should submit the form. If you want to force the issue, I think you should try to disable the button first.
<span style="padding: 8px; background: red;" onmouseout="this.firstChild.disabled='';"><input type="button" name="test" id="test" value="roll over me" onmouseover="this.disabled=true;"></span>
as provided in the answer here:
Javascript: enable/disable button with mouseover/mouseout
it seems your question is navigating to another page without clicking a button.
<html>
<head>
</head>
<body>
<button onmouseover="go()" id="button">hii</button>
<script>
var anchor=document.createElement("a");
var button=document.getElementById("button");
anchor.href="alarm2.html";
function go()
{
button.onmouseover= anchor.click();
}
</script>
</body>
</html>
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)"/>
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 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!
I have a test page here: http://www.problemio.com/test.php
and if you press "Click To Test Signup" you get a form. If on that form, you click "Log In" it recognizes that you clicked that, and opens the login form.
But the problem is that on the login form, if you press "create profile" it actually goes to the url of the href tag and not to the jQuery click event.
My quetion is what is the best practice of doing this? I hered of something called "prevent default behavior" but not sure how/when it should be used.
I am guessing that if the user has JS disabled, they should still be able to log in. How can I set it up so that users can log in and make accounts in the jQuery way first, and some default way if they have JS disabled?
Thanks!
You can do this with pure jQuery with
$("#createprofilelink").click(function(event) {
event.preventDefault();
{create profile logic}
});
more details of this can be seen in the jQuery documentation http://api.jquery.com/event.preventDefault/
Edit: I removed this because of #maxedison comment that it stops the jQuery event from firing but I have just tested this and the jQuery event fires but the link does not go to the address.
<a id="thelink" href="http://www.google.com" onclick="return false;">the link</a>
<script>
$('#thelink').click(function(){alert('alert me');});
</script>
As for the JS being disabled part of the question the link really should point to to a real form to fill in, as Taryn East correctly says, so the user gets the same functionality even if the user experience is lower by not using JavaScript.
You could even go down the noscript route
<noscript>
<div>Your user experience would be far improved if you
enable JavaScript but if you insist,
Click Here to create your profile</div>
</noscript>
To fix you link-gazumping problem, indeed, as #kamui says, use return false;
But as to your JS-disabled question - point the href at a real URL -> preferably the same URL as your JS-enabled stuff - or the same form, but in a new window.
I could not follow the link due to firewall restrictions on my side but...
You'll want to use whats called unobtrusive javascript.
http://en.wikipedia.org/wiki/Unobtrusive_JavaScript
This means if JS is available it will use it, if not continue working as plain html.
using jQuery you would first attach the click event to your button in the $.Ready() method.
<a id='btnTest' href='login.html' />
$(document).ready(function () {
// Attach click event to btnTest
$("#btnTest").click(function (e) {
// do logic
return false; // Returning false here will stop the link from following login.html.
});
});
Hope this helps.
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)"/>