Home > javascript > How to make an Ajax form without capturing key press event on the input element

How to make an Ajax form without capturing key press event on the input element

OK this is a very common task: build a form, collect user input and send to server for processing (through Ajax therefore upon response the page should remain the same). One of the ways to accomplish this is to bind the ajax handling function to both the submit button (or an anchor link)’s click event and the input field’s key press event (only when Enter key is pressed):

<!DOCTYPE html> 
<html>
<head>                  
    <meta charset="utf-8">                                               
    <title>submit test using onclick and onkeydown event</title>
</head>             
<body>
    Name:   <input type="text" name="user_name" value="" id="user_name" onkeydown="kp_handler();">
    <p><input type="button" value="Continue &rarr;" onclick="handle_submit();"></p>
    <script type="text/javascript">
        function kp_handler(evt) {
                if(!evt && window.event) evt=window.event;
                if(evt.keyCode==13) {
                    handle_submit();
                }   
        }           
        function handle_submit() {                      
            // you might want to do ajax here to submit data to the server
            // as a demo I just print the data to the client's browser
            var msg='You have entered '+ document.getElementById('user_name').value;
            try {
                console.log(msg);
            } catch (e) {
                alert(msg);
            }
        }
    </script>
</body>
</html>

However, a better approach is to do it through a dummy form enclosing the text input and submit button. The benefit of of this is the Enter key event is automatically handled by form’s onsubmit attribute hence there’s no need to capture the onkeydown event on the text input element (figuring whether the Enter key is pressed is messy as you can see from the first approch):

<!DOCTYPE html> 
<html>
<head>                  
    <meta charset="utf-8">                                               
    <title>submit test using only onsubmit event</title>
</head>             
<body>
    <form id="some_form" onsubmit="javascript: handle_submit(); return false;">
        Name:   <input type="text" name="user_name" value="" id="user_name">
    <p><input type="submit" value="Continue &rarr;" ></p>
    </form>
    <script type="text/javascript">
        function handle_submit() {
            // you might want to do ajax here to submit data to the server
            // as a demo I just print the data to the client's browser
            var msg='You have entered '+ document.getElementById('user_name').value;
            try {
                console.log(msg);
            } catch (e) {
                alert(msg);
            }
        }
    </script>
</body>
</html>

It’s worth noting that the return false statement has to be put at the end of the onsubmit attribute (moving it into handle_submit will result in the form submitting to the page itself).
Comments and feedbacks are welcome.

Advertisements
Categories: javascript
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: