www.webdeveloper.com
Results 1 to 10 of 10

Thread: Disable submit buttons if Enter is pressed

  1. #1
    Join Date
    Jul 2007
    Posts
    44

    Disable submit buttons if Enter is pressed

    I have form within a form and I would like to disable the submit button in the inner form.

    Currently I have this for some other forms, and it works just fine
    PHP Code:
    <form method="post" action="index.php" onkeypress="return event.keyCode!=13">
    <
    input type="text" name="first" value=""  />
    <
    input type="text" name="last" value=""  />
    <
    input type="submit" name="insert" value="Insert" />
    </
    form>
    <
    form method="post" action="index.php">
    <
    input type="text" name="first" value=""  />
    <
    input type="text" name="last" value=""  />
    <
    input type="submit" name="insert2" value="Insert" />
    </
    form
    That way I know that only one of the forms will be sent when the user presses the Enter key and the other will not send at all.
    However, if the form that I don't want to be sent is within a form, keyCode does not work. Like this:
    PHP Code:


    <form method="post" action="index.php">
    <form method="post" action="index.php" onkeypress="return event.keyCode!=13">

    <input type="text" name="first" value="<?php echo $_POST['first']; ?>"  />
    <input type="text" name="last" value=""  />
    <input type="submit" name="fetch" value="F"  />
    </form>
    <input type="submit" name="insert" value="Insert" />
    </form>
    The inner calls other PHP code to fetch a value for the "first" text field without actually submitting the outer/main form. That way the user can prefill some of the fields. It all works well but when the user presses the enter key, the inner form will be submitted and the onkeypress="return event.keyCode!=13" code snippet does not work all of a sudden.
    How can I fix this? It would also work to set a submit button priority if such even exists, that way, the outer form will be submitted if the user presses the enter button.

    To summarize, I want the outer form to be sent when the user presses the enter button, regardless of what field the cursor (or is active) is in and the inner form should never be submitted unless the user clicks on the button.

    Anyone have any ideas how to accomplish this?

  2. #2
    Join Date
    Jun 2007
    Posts
    667
    Nested forms are invalid. Whatever you're trying to achieve can and should be done another way.
    Y_U U_G_A_E_U_ B_S_A_D_

  3. #3
    Join Date
    Jul 2007
    Posts
    44
    I have now changed the code so there is only one form and the events are driven based on the name of the submit buttons.
    So how do I go about to disable submit on hitting enter on all but one of the buttons? If I use
    Code:
    onkeypress="return event.keyCode!=13"
    in the form tag, none of the buttons will be triggered when the user hits enter.

  4. #4
    Join Date
    Jun 2007
    Posts
    667
    I have now changed the code so there is only one form and the events are driven based on the name of the submit buttons.
    So how do I go about to disable submit on hitting enter on all but one of the buttons?
    Do you mean if a submit button is focused, pressing Enter has no effect except on one of them? I think you should show what you have now and the exact operation you want.
    Y_U U_G_A_E_U_ B_S_A_D_

  5. #5
    Join Date
    Mar 2010
    Posts
    2,803
    you could probably do what you need by toggling the buttons' "disabled" property from true to false and vicky-vercky.

  6. #6
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by MockY View Post
    I have now changed the code so there is only one form and the events are driven based on the name of the submit buttons.
    If you have a single form, why do you need more than a single submit button?

  7. #7
    Join Date
    Jul 2007
    Posts
    44
    Quote Originally Posted by Kor View Post
    If you have a single form, why do you need more than a single submit button?
    Two of the submit buttons fetches information from an external source based on a number the user enters in the field next to the button and automatically populates many of the fields in the form. That way the user doesn't need to manually enter this information which in the end saves time and hence enhances productivity.
    The problem is that if the user then hits enter once the form is filled out, one of the submit button inside the form get triggered instead of the button that submits the form and therefore re-fetches information and subsequently clears some of the fields the previously filled. That behavior can be changed with some PHP trickery so it's not the end of the world, but I want the form to be submitted without having the user to hit the tab key many times in order to get to the button.
    Bottom line is, I don't want the user to ever have to use the mouse which is slower and to many, annoying.
    So disabling submission when the enter key is pressed for all but one button would solve all these issues.

  8. #8
    Join Date
    Jul 2010
    Posts
    6
    Code:
    <script type="text/javascript">
    function disableEnterKey(e)
    {
    	var key;
    	if(window.event)
    		key = window.event.keyCode;
    	else
    		key = e.which;
    		
    	return (key != 13);
    }
    </script>
    
    <input onKeyPress="return disableEnterKey(event)"></input>

  9. #9
    Join Date
    Jul 2007
    Posts
    44
    Quote Originally Posted by brad145473 View Post
    Code:
    <script type="text/javascript">
    function disableEnterKey(e)
    {
    	var key;
    	if(window.event)
    		key = window.event.keyCode;
    	else
    		key = e.which;		
    	return (key != 13);
    }
    </script>
    
    <input onKeyPress="return disableEnterKey(event)"></input>
    Thanks for your reply, but it does not seem to work.

  10. #10
    Join Date
    Jul 2010
    Posts
    6
    are you sure? it disables whatever input it is attached to, to disable submit on pressing enter key.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles