Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

help: prevent form submit when return is pressed

Options
  • 08-01-2004 11:07am
    #1
    Registered Users Posts: 2,039 ✭✭✭


    Hi,

    I have a form with some basic javascript validation going on - valid email, no empty spaces, etc. It works fine - i.e. when you click the submit button everything gets checked and the form doesn't submit unless all entries are valid.

    However, if you hit the return key instead, the form submits without being validated.

    i found a couple of bits in google on this but wasn't able to apply them to my form. Anyone any experience of this?

    Cheers.


Comments

  • Registered Users Posts: 1,452 ✭✭✭tomED


    in your form tag put

    onSubmit=myfunction()

    instead of onClick on your button


  • Closed Accounts Posts: 304 ✭✭Zaltais


    You don't want to stop the form from being submitted when return is pressed, you want to put your validation call in the onSubmit event of the form, rather than the onClick event of the submit button.


  • Registered Users Posts: 2,039 ✭✭✭remoteboy


    I tried that, but its a php form and unless the validation call is put in the onlick (button) not onsubmit (form tag) the form submits anyway.


  • Registered Users Posts: 1,452 ✭✭✭tomED


    post your code - then we may be able to help...


  • Registered Users Posts: 2,039 ✭✭✭remoteboy


    Hi Tom,

    The validation code is about 3 screens long, I don't think posting it is a goer. To call the code the following tag is used -

    <input type="button" Value="Save and Preview" onclick="check(form,form.elements.length)">

    What I need is a piece of javascript to tag onto each form element which will suppress the enter key. I found this on google, but couldn't get it working -

    <script language="JavaScript"><!--
    var nav = window.Event ? true : false;
    if (nav) {
    window.captureEvents(Event.KEYDOWN);
    window.onkeydown = NetscapeEventHandler_KeyDown;
    } else {
    document.onkeydown = MicrosoftEventHandler_KeyDown;
    }

    function NetscapeEventHandler_KeyDown(e) {
    if (e.which == 13 && e.target.type != 'textarea' && e.target.type != 'submit') { return false; }
    return true;
    }

    function MicrosoftEventHandler_KeyDown() {
    if (event.keyCode == 13 && event.srcElement.type != 'textarea' && event.srcElement.type != 'submit')
    return false;
    return true;
    }
    //--></script>

    Cheers.

    Michael


    ps 50 posts :D


  • Advertisement
  • Registered Users Posts: 68,317 ✭✭✭✭seamus


    [Edit: Didn't read it properly.
    You're definitely going the awkward way about it. There's no reason why onSubmit shoudln't work, you just need to be persistant. Supressing the enter key may work, but it will annoy some, and won't affect others, as I say below.

    If it's quite important to you that the correct data is submitted, then you shouldn't rely solely on javascript.

    If someone has Javascript turned off, then their data will be submitted whether or not it's correct. Ideally, the script that processes the form should also verify the data, and return the user back to the form, with the incorrect fields highlighted, if any data is incorrect.

    Javascript should be considered a fringe benefit. It should be used to provide more simplicity and cooler effects for the user, but your site should work fine without it.

    I've always maintained you should write the site without Javascript, and add in the Javascript at the very end.


  • Registered Users Posts: 1,452 ✭✭✭tomED


    Ah thats completely different than your initial question.

    So you're saying that if someone is filling out a form - and they click enter instead of tab that the form doesn't submit?

    If so - for one I think you would be mad to do this. A lot of people like using the enter key for speedy form filling. You are forcing people to click the button to submit a form. What about people without a mouse?

    If you really need to do it - that code will work, but you should still place your form validation in the onSubmit= event.

    Should work with that.


  • Registered Users Posts: 1,452 ✭✭✭tomED


    Originally posted by seamus
    If it's quite important to you that the correct data is submitted, then you shouldn't rely solely on javascript.

    If someone has Javascript turned off, then their data will be submitted whether or not it's correct. Ideally, the script that processes the form should also verify the data, and return the user back to the form, with the incorrect fields highlighted, if any data is incorrect.

    Javascript should be considered a fringe benefit. It should be used to provide more simplicity and cooler effects for the user, but your site should work fine without it.

    I've always maintained you should write the site without Javascript, and add in the Javascript at the very end.

    i agree - it's too easy for someone to bypass javascript protection. They just have to turn it off in their browser config

    Some more code if ye really need it...
    http://www.jennifermadden.com/162/examples/stringEnterKeyDetector.html


  • Registered Users Posts: 2,039 ✭✭✭remoteboy


    There's no reason why onSubmit shoudln't work
    That's what I thought, but apparently if a form uses php - e.g. action="something.php", it will submit regardless of javascript commands in the <form> tag unless <input type="button"> is used.
    I've always maintained you should write the site without Javascript, and add in the Javascript at the very end.
    Me too - i've plenty of php checks in place in case the user doesn't have javascript enabled, the javascript is used as a first pass at validation.

    tbh I was just hoping that someone may have had some experience of this particular problem and had devised a solution for it. its the last step in what has been a loooong job and if i can't prevent it i'll just let the submission through and let PHP trap the errors.

    Thanks to all for the input.

    Michael


  • Registered Users Posts: 1,452 ✭✭✭tomED


    Originally posted by remoteboy
    That's what I thought, but apparently if a form uses php - e.g. action="something.php", it will submit regardless of javascript commands in the <form> tag unless <input type="button"> is used.

    It doesnt make a difference if its php or not - show me where you were told that - that would definitely be a first for me.

    Its the browser that controls the javascript not the php.


  • Advertisement
  • Registered Users Posts: 2,039 ✭✭✭remoteboy


    update: cheers for the link Tom - it's exactly what I'm looking for :D
    show me where you were told that
    shagged if i can find it now, but it involved a lot of googling - somewhere in the devshed forums if i recall correctly.

    Previous to finding the info i was banging my head off the wall trying to figure out why none of the form validation scripts available on the web would work with a php form - they'd pop up an error message as expected and then submit the form regardless. Found the type=button solution tried it and it worked!?


  • Registered Users Posts: 1,452 ✭✭✭tomED


    Originally posted by remoteboy
    shagged if i can find it now, but it involved a lot of googling - somewhere in the devshed forums if i recall correctly.

    Previous to finding the info i was banging my head off the wall trying to figure out why none of the form validation scripts available on the web would work with a php form - they'd pop up an error message as expected and then submit the form regardless. Found the type=button solution tried it and it worked!?

    Well your sources are wrong... Ill do up a script and show you!

    one sec!

    Tom


  • Banned (with Prison Access) Posts: 16,659 ✭✭✭✭dahamsta


    Whoever said that was wrong, the form handler has nothing do to with it -- in fact the browser doesn't know the difference between something.php and something.cgi. (Don't believe me? Map application/x-httpd-php to .cgi or even .htm.)

    The route you're taking is a really bad practice and should be avoided.

    adam


  • Closed Accounts Posts: 19,777 ✭✭✭✭The Corinthian


    As adam has correctly pointed out this issue has nothing to do with the form handler or the file type (PHP/ASP/etc) - as far as your browser cares it's dealing with a HTML page.

    For argument's sake let's say that you do your client side validation in a sepeate function called validateForm which takes in the form as an object parameter. Thus you call it using th onSubmit envent handler in the form tag/element as has been sugested thus:
    onSubmit="return validateForm(this);"
    
    If your function validateForm returns true then the form will submit normally, if it returns false then the form will not submit even if Retun/Enter have been pressed.

    HTH

    G.


Advertisement