I have a contact form on my website that emails me info from interested parties. I don't want to use a captcha for various reasons. I just want to do something simple, like disable the submit button on the form until the user answers a simple question. Hopefully this will keep out some bots at least.
I found this on the web but it does absolutely nothing:
<script>
document.getElementById("Submit").disabled=true;
</script>
Can someone either correct this or give me something better?
First of all make sure that if you are just testing that code that you have it in an onload function as such:
window.onload = function(){
document.getElementById("Submit").disabled=true;
}
Also make sure that the ID is actually Submit and not submit because JavaScript is case-sensitive.
JSFiddle: Example of disabling a button.
Related
I been looking all over the internet for a code that does this, no luck so far... This is the code for my facebook like button:
<script type="text/javascript">
$(function(){
$('<iframe scrolling="no" frameborder="0" style="width: 300px; height: 80px;'+
'" src="http://www.facebook.com/widgets/like.php?href='+
encodeURIComponent(location.href)+
'"></iframe>').appendTo('#like-button')
})
</script>
I want this button to disappear after is clicked (Im thiyin to make some sort of like gate)
Cheers
First, why this is a bad idea:
Like Gates are no longer allowed, check out the changelog and the platform policy
It is annoying for the user if he can´t unlike something directly where he liked it.
Users can´t comment on the like button if you hide it right after clicking
Sometimes it needs confirmation to like something (for spam reasons, for example) - if you hide the button after clicking, the user can´t confirm and the like will not get through
It´s pointless anyway, because you will not be able to detect it for returning users so you would need to show the like button every time you refresh the page. You may use a cookie, but that´s not really a reliable solution.
...and please don´t try to solve the most simple things with jQuery. Instead of jQuery.appendTo, you can use appendChild, innerHTML, ... Learn JavaScript before using a library for it, or you will end up using it for everything - which is usually a lot slower than Vanilla JavaScript and not even less code in many cases.
That being said, it´s not that simple to hide it, you would need to use FB.Event.subscribe to subscribe to the like event: https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/v2.2
See this thread, for example: Attach a click() event to the FaceBook 'Like' button?
And again, because it´s very important: Like Gates are not allowed!
You can add this to your script:
$('#like-button').click(function(){
$(this).hide();
});
I have a form to let people submit news articles to my site (a company intranet). Sometimes the form submission takes a few seconds to resolve due to some actions I have in place on the relevant model save method. I wanted to replace the text on the form page with a message saying "Sending your article. This may take a few seconds, please do not refresh the page." as soon as someone hits submit. I've seen these on a number of websites when buying things online.
My first attempt at doing this was to add an onClick event to the form button. Submitting then successfully replaced the text but did not submit the form. I had a look at this answer on binding two events to one submit button but it doesn't seem to address my need as it looks PHP-specific. I'm certain javascript is the right tool for the job but I can't think of how to do this other that binding to clicking the submit button. Does anyone know the correct way to do this?
JavaScript is indeed the right way to do so. If you are using jQuery you can go ahead and use something like:
$('form#your-form-id').submit(function(){
$(this).hide().after('Loading, please wait...');
});
Where #your-form-id would be the id of the form. This function is hiding the form content and showing that text, you could do anything instead actually.
I'm using the JQuery Form Plugin for a file upload.
now, at the moment i'm using a regular submit button, but i'd much rather like to have a div trigger the submit.
I tried this...
$(document).on('click', '#settings_changeprofilepic_dialog1_submit', function(event){
$(document).find('#UploadNewImage').submit();
});
('#settings_changeprofilepic_dialog1_submit' is my new submit div)
('#UploadNewImage' is my form)
But it just won't fire...
Can someone help me with this? I've tried to google this problem, but the terms JQuery, Form, Submit, File Upload, and so on seem too ambiguous to get the answer I'm looking for...
From what you have provided it is a bit difficult to determine the cause of the problem. Lets try some simple debugging to get an idea of what might be happening.
I would probably try logging the form to the console first to make sure jQuery has actually found the form. Just like this: console.log( $(document).find('#UploadNewImage') );
If you're still having trouble it would be great of we could see the code. Give us a link to where it's hosted or use a website like jsbin or jsfiddle.
I am working on learning JQuery and creating a simple HTML / JS calculator. I used a standard HTML form to allow the user to enter the data they want calculated and when the user clicks submit my JS / JQuery calculates and spits out the answer.
My question is what would be the semantically correct way to deal with the HTML form action being that Im not actually posting any data? I dont want to leave it default because when I click my to trigger an event it changes the URL and I dont want to use POST because Im not posting anything. Any help is appreciated!
I would replace the submit button with a normal button, and prevent the form being "submitted" at all. then use javascript to do the calculations on button click. This way the form never gets submitted, and you don't need a method or action at all.
If you really want to do a request at all, you probably just want to do a GET...check the list of HTTP request methods here to see if another one would better fit your needs.
If you are doing everything with javascript, though, you shouldn't be submitting anything at all. Try changing the submit button into a link (or just a regular button) and bind your calculator logic to its click event.
Don't specify any action(Default is GET). Use an html button which would call the js function on the click event. That would do the work on client side
You don't actually need to put input elements inside a form. Since you don't intend to submit the form, I would just omit it entirely.
Apologies for the title, I found it hard to define my question succintly and that was the best I could do. If someone wants to edit it to add a better title then please, be my guest.
Anyway, the question. We have on our webpage the capability for users to delete something. They do this by clicking on a delete link, something that looks something like:
<a href="http://localhost/a/path/remove-thing.html?ID=42" onclick="return confirm('Are you sure you want to remove this thing?');" >Remove this thing!</a>
Now, obviously, normally when the user clicks on that link they get a javascript confirm box which asks them to confirm that they want to delete the thing. If they click cencel, the onclick event is false and so the delete doesnt happen; if they click okay then it does.
My problem is that if the user clicks on another link in the page (to anywhere), then quickly clicks on the delete link before the first page loads, the javascript never gets fired, but the thing is deleted - when they clicked on "Remove this thing!" they fired off that URL instead of the one they originally clicked. Is there a way to avoid this? Are we doing the confirm 'wrong'? I assume it has something to do with the browser shutting off the javascript checking when you click the first link as it prepares to render a new page, but then still accepting a change in URL before the page has gone...
(This has been tested in Firefox 3.6 and confirmed a problem there. No other browsers tested yet.)
one way around this which would degrade a bit more gracefully would be something like:
create a separate confirmation page which these links send you to
use javascript to show the dialog, and if 'yes', send the user directly to the delete page
this way it works even without javascript, and should hopefully eliminate your issue
EDIT
if js will always be present, you can always have the default link be empty, and redirect the user after confirmation
You're really having a couple of problems. I think you would be better off taking a progressive enhancement approach.
What happens to your users if they don't have the JavaScript? I know that people rarely turn off JavaScript, but it's still a useful thing to consider. Without JavaScript, people will be deleting items without confirmation.
You're better off linking to a delete form that asks "Are you sure you want to delete X?" and has "Delete" and "Cancel" buttons. After the form submits or they press cancel, you can send them back to the original page. *
Now for the progressive enhancement: attach a click event handler to the "delete" link that pulls in the "are you sure?" form via AJAX or builds it from scratch. Have the form replace the delete link. If they click the "Delete" button, just submit the form as before. If they click cancel there's no need to reload the page - just remove the form and restore the original "delete" link.
* as an aside, make sure the form is a post form and that it has CSRF protection. If you don't know about CSRF attacks, definitely read up on them.