Form data sent when I press ENTER key.

Issues related to forms.
Post Reply
User avatar
gregbarnes
 
 
Posts: 31
Joined: Sun Oct 27, 2013 8:15 am
Location: Perth, Western Australia
Contact:

Form data sent when I press ENTER key.

Post by gregbarnes »

I have a simple form for music club members to submit a list of songs which they want to perform at our next show night.
I have editboxes for the input of the song titles. after entering a song title I press ENTER and the form is sent immediately and proceeds to the "Success" page. Is there a way to stop "ENTER" from sending the email? Thanks in advance - Greg
Link to the site: https://www.isacimages.com.au/ShadowsCl ... T_Form.php
The page above is not on the menu as yet until I have it all working correctly.
Cheers for now,
Greg
User avatar
BaconFries
 
 
Posts: 5328
Joined: Thu Aug 16, 2007 7:32 pm

Re: Form data sent when I press ENTER key.

Post by BaconFries »

A good idea is include a Recaptcha on the form so the user has to complete before pressing submit/enter. Or one of the following.

https://stackoverflow.com/questions/112 ... r/11235672
https://stackoverflow.com/questions/895 ... ting-enter
User avatar
gregbarnes
 
 
Posts: 31
Joined: Sun Oct 27, 2013 8:15 am
Location: Perth, Western Australia
Contact:

Re: Form data sent when I press ENTER key.

Post by gregbarnes »

Thanks for the reply - appreciated! I would like to try this:
$(document).ready(function() {
$(window).keydown(function(event){
if(event.keyCode == 13) {
event.preventDefault();
return false;
}
});
});
but I don't know where to insert the code.
As far as using Recaptcha, I have not grasped the entire process of using it as yet, ie: how to implement it and get it to work on my form.
Cheers for now,
Greg
User avatar
BaconFries
 
 
Posts: 5328
Joined: Thu Aug 16, 2007 7:32 pm

Re: Form data sent when I press ENTER key.

Post by BaconFries »

To use it will require jquery, you will need to install it first for it to work. If you already have jquery of some sort on the page (menu, carousel etc) you can use the code but wrapping it in <script> insert the code here</script> then open Page HTML and insert between <head></head>. If no jquery is used then you can still use but will need to call it externally like

Code: Select all

<script src="https://ajax.googleapis.com/ajax/libs/3.4.1/jquery.min.js"</script>

and as before use Page Properties between <head></head>

If this is maybe to much then it can be done with javascript and won't rely on and jquery libraries

Code: Select all

<script>
window.addEventListener('keydown',function(e){if(e.keyIdentifier=='U+000A'||e.keyIdentifier=='Enter'||e.keyCode==13){if(e.target.nodeName=='INPUT'&&e.target.type=='text'){e.preventDefault();return false;}}},true);
</script>
User avatar
gregbarnes
 
 
Posts: 31
Joined: Sun Oct 27, 2013 8:15 am
Location: Perth, Western Australia
Contact:

Re: Form data sent when I press ENTER key.

Post by gregbarnes »

I appreciate your prompt reply, so thank you. I am not good at the code side of things so I won't be doing anything like that. The SUBMIT button is DISABLED (which cancels the ENTER key) when the form is opened. I have put a checkbox on the form which must be checked before clicking on the SUBMIT button. It seems to be working OK. The only other problem I am having is how to change the order of items which get sent back to the member in the confirmation email. My "Success" page display is what goes in the email but I'd like to tidy it up to be the same as the order of entry in the form. It's on my website if you want to see what I mean.
https://www.isacimages.com.au/contact_us-smc.php
Cheers for now,
Greg
Post Reply