stop the page refreshing when enter is pressed while cursor is in a form input element but still submit?

Question

I have been reading through many articles relating to this but they only show how to prevent anything happening not only the page refresh.

But I need to have it so when enter key is pressed the text field is submitted via a ajax request without the page refresh, like how I can use the input type button with a onclick event.

iv added a very basic mock up below to help explain what I mean.

<html>
    <head>
        <title>Demo</title>
        <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.2/jquery.min.js'></script>
    </head>
    <body>
        <form id="someForm" action="" method="post">
            <!-- 
                below is an example of the text field 
                id like to submit but without the
                page refreshing when "Enter" is pressed
            -->
            <input type="text" id="demoText"/>
            <button type="button" id="postBtn" onclick="postText()">Post</button>
        </form>
        <script>
            function postText() {
                alert("Random Function...");
            }
        </script>
    </body>
</html>

You can't submit a form without a page reload, if you have ajax functionality you should add it to the code above ? — adeneo, Sep 10 '14 at 23:22
And the way to make it work is simply by catching the form submit event, not the button click event. — adeneo, Sep 10 '14 at 23:23
@adeno thank you i will look into the catching it and I didn't include ajax due to the amount of code(php, jquery and html) that would be needed for it to make sense which is why i made the mock up(its for a chat function on a online radio page so cant have it disrupting the stream each post/refresh) — akaBase, Sep 10 '14 at 23:33
Well, here's what it should look like -> **http://jsfiddle.net/1rtu37cq/** — adeneo, Sep 10 '14 at 23:35

score 1 · Answer 1 · edited May 23 '17 at 11:49

1

You can do something like this to capture the keypress event of a control - say an input box.

$(function() {
    $('#demoText').keypress(function (e) {
     var key = e.which;
     if(key == 13)  // enter pressed
      {
        postText();
      }
    });
});

There are more examples here

To post using Ajax, do something like this:

var postText = function() {
    var stuff = $.post("serverpage.php", function() {
        alert( "success" );
    }).fail(function() {
        alert("error");
    }
)};

edited May 23 '17 at 11:49

Community

1
1

answered Sep 10 '14 at 23:22

Donal

31,121
10
63
72

@Parody no problem, glad to be of help. – Donal Sep 10 '14 at 23:35

score 0 · Answer 2 · answered Sep 10 '14 at 23:34

No need for any script, the browser will do it for you if you have a submit button ( not type="button") and bind your function to submit event of the form

<form id="someForm" action="" method="post" onsubmit="postText();return false">
    <input type="text" id="demoText" />
    <button type="submit" id="postBtn">Post</button>
</form>

DEMO

score 0 · Accepted Answer · answered Sep 11 '14 at 02:53

After the advise given here this is what i came up with and it is fully functional, so thought id add it here as an answer so anyone else with a similar question can view my solution.

<html>
    <head>
        <title>Demo</title>
        <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
    </head>
    <body>
        <form id="form">
                <input type="text" class="input" id="chatTxt"  placeholder="Chat post..."/>
                <input type="button" id="submit" value="Submit"/>
            </form>

        <script type="text/javascript">
            $('form').keypress( function( e ) {
              var code = e.keyCode || e.which;

              if( code === 13 ) {
                e.preventDefault();
                $( "#submit" ).click();

              };
            })
            $(document).ready(function(){  
                $("#submit").click(function(){
                var ChatText = $("#chatTxt").val();

                    if(ChatText ==''){
                    alert("Chat text is empty!");      
                    }
                    else{

                    $.post("demo.php",{ ChatText1: ChatText },
                        function(data) {
                        alert(data);
                        $('#form')[0].reset();
                        });

                    }
                });
            });
        </script>
    </body>
</html>

stop the page refreshing when enter is pressed while cursor is in a form input element but still submit?

3 Answers3