Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    891
    Thanks
    174
    Thanked 102 Times in 102 Posts

    how to make submit behave like real submit?

    Hi all

    Is using the real form submit button a problem in any way? Can it actaully send a form when a person uses 'enter' in a text field.



    When I use this submit, it triggers my validation which is great.

    Code:
    <input type="submit" value="OnSubmit validate" />

    However this way doesn't seem to trigger my validation although It may solve the above form send problem (if that realy exists). How do I get it to act the same as real submit so it will trigger validation like onsubmit above?

    Code:
    <input type="button" value="Send Feedback" onclick="this.form.submit()" />
    LT

    does any of that make sense?

    all ideas helpful and appreciated
    Last edited by low tech; 07-19-2010 at 09:48 AM.

  • #2
    New Coder
    Join Date
    Jul 2010
    Posts
    61
    Thanks
    0
    Thanked 21 Times in 21 Posts
    Quote Originally Posted by low tech View Post
    Is using the real form submit button a problem in any way? Can it actaully send a form when a person uses 'enter' in a text field.
    Assuming your function is called validate and it returns true on success, just use:
    Code:
    <form onsubmit = "return validate( this )" ... >
    Then the form cannot submit until validated.
    Never call the submit method in preference to using a submit-type button, it makes the form script-dependent.
    Last edited by RandomUser531; 07-20-2010 at 04:55 AM.

  • Users who have thanked RandomUser531 for this post:

    low tech (07-20-2010)

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,603
    Thanks
    80
    Thanked 4,634 Times in 4,596 Posts
    Never call the submit method, it makes the form script-dependent
    ?????????

    HUH??? If you have <form onsubmit="return validate();"> you *ARE* script-dependent!!! If the user disables javascript, that validation is *GONE*!

    So if you are *depending* on JS validation--if you aren't also doing server-side validation--it really doesn't matter.

    I'm guessing that Phil was referring to exactly that: If the user disables JS he expects to do server-side validation. And that's a reasonable model if you have server-side capabilities.

    But if you really want to do it as you described, and you are willing to depend on JS being enabled, it's easy:
    Code:
    <form ... onsubmit="return validate(this);" >
    ...
    <input type="button" onclick="if ( validate(this.form) ) this.form.submit();" />
    That is, have the button invoke the same validation that the onsubmit would.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    low tech (07-20-2010)

  • #4
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    891
    Thanks
    174
    Thanked 102 Times in 102 Posts
    Thank you Phil Ippen and Old Pedant

    My form does have server side valiadation of sorts --- it strip unwanted stuff from text area and checks the email name etc. Tho It doesn't seem to act as I think it should.

    Anyway, the form and teh site is semi js dependant -- ie even with js off most of the site is still accessable but a noscript notice is there to inform the user. The form page simply tells them alternative ways to contact.

    I tried this code which I found, but I couldn't get it to work hence the post.

    Code:
    function validate(form) {
    // validate form
    if (formIsValid) {
    form.submit();
    return true;
    }
    else {
    return false;
    }
    }
    So now i'm doing this
    <input type="submit" value="Send" />

    <form action="feedback.php" method="post" name="feedback_1" onsubmit="return validate(this.form)"; >

    Thank you to all. Very helpfu.

    LT

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,603
    Thanks
    80
    Thanked 4,634 Times in 4,596 Posts
    Code:
    function validate(form) {
    // validate form
    if (formIsValid) {
    form.submit();
    return true;
    }
    else {
    return false;
    }
    }
    That's bad code!!! If you invoke that function from <form onsubmit=> or from <inputy type=submit> then it will try to submit the form *TWICE*!!!

    And if you invoke it from <input type=button> then you don't need the "return" lines, at all.

    So it makes no sense at all to use that code.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    891
    Thanks
    174
    Thanked 102 Times in 102 Posts
    Hi Old Pedant

    I'm using the way as posted above BUT

    I did try that 'bad code' I found tho I didn't realsie it was bad --- didn't work for me anyway.

    I also came across this code --- but not tried.

    Code:
    <form name="myform" action="handle-data.php">
    
    <script type="text/javascript">
    function submitform()
    {
        if(document.myform.onsubmit && 
        !document.myform.onsubmit())
        {
            return;
        }
     document.myform.submit();
    }
    </script>
    can be found here
    http://www.javascript-coder.com/java...m-submit.phtml
    Last edited by low tech; 07-20-2010 at 05:19 AM.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,603
    Thanks
    80
    Thanked 4,634 Times in 4,596 Posts
    You did not quote the *ENTIRE* code there!
    Code:
    <form name="myform" action="handle-data.php">
    Search: <input type='text' name='query' />
    <a href="javascript: submitform()">
    <img src="go.gif" width="33" height="19" border="0" />
    </a>
    </form>
    <script type="text/javascript">
    function submitform()
    {
        if(document.myform.onsubmit && 
        !document.myform.onsubmit())
        {
            return;
        }
     document.myform.submit();
    }
    </script>
    That is *ONLY* to be used for <a> tags invoking a form submit. Something that has always seemed pointless to me, but which is possible.

    But WHY would you use
    Code:
    <a href="javascript: submitform()">
    <img src="go.gif" width="33" height="19" border="0" />
    </a>
    instead of just
    Code:
    <input type="image" src="go.gif" style="width: 33px; height: 19px; border: none;" />
    ??????????

    (Of course, that code is pretty old hat, anyway, using width=, et al., instead of a <style>.)
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •