Enter key to submit Ajax form

Question

I have a very simple AJAX form that asks for an email address and sends it to me after submitting.

How can I can I get the form to submit when hitting the enter key?

This runs when user clicks submit button:

<script type="text/javascript">
    $(document).ready(function () {
        $("#submit_btn").click(function () {
            // Get input field values:
            var user_email = $('input[name=email]').val();

            // Simple validation at client's end
            // We simply change border color to red if empty field using .css()
            var proceed = true;
            if (user_email === "") {
                $('input[name=email]').css('border-color', 'red');
                proceed = false;
            }

            // Everything looks good! Proceed...
            if (proceed) {
                /* Submit form via AJAX using jQuery. */
            }
        });

        // Reset previously set border colors and hide all message on .keyup()
        $("#contact_form input, #contact_form textarea").keyup(function () {
            $("#contact_form input, #contact_form textarea").css('border-color', '');
            $("#result").slideUp();
        });
    });
</script>

---

I know this question has been asked before -- I'm having trouble getting the keypress function to work.

I tried this to no avail:

$("#contact_form").keypress(function (e) {
    if ((e.keyCode == 13) && (e.target.type != "textarea")) {
        e.preventDefault();
        // Get input field values
        var user_email = $('input[name=email]').val();

        // Simple validation at client's end
        // We simply change border color to red if empty field using .css()
        var proceed = true;

        if (user_email === "") {
            $('input[name=email]').css('border-color', 'red');
            proceed = false;
        }

        // Everything looks good! Proceed...
        if (proceed) {
            /* Submit form via AJAX using jQuery. */
        }
    }
});

The form is #contact_form.

Any help would be would appreciated…

Predigest

Answer 1

Just bind the submit event to your form, and then the enter key will also work:

$("#contact_form").submit(function (e) {
    e.preventDefault();
    // Get input field values
    var user_email = $('input[name=email]').val();

    // Simple validation at client's end
    // We simply change border color to red if empty field using .css()
    var proceed = true;

    if (user_email === "") {
        $('input[name=email]').css('border-color', 'red');
        proceed = false;
    }

    if (proceed) {
        // Insert the AJAX here.
    }
});

And the code is here: http://jsfiddle.net/6TSWk/6/

Flats

Seems optional in fiddle but it doesn't work for me without a button. So I had to create a button and hide it. – Incontrovertible

Answer 2

add new class in every fieldbox or checkbox => class keypressbutton then replace your code on keypress with this, below :

$(document).on("keypress",".keypressbutton",function(event) {
    var keyCode = event.which || event.keyCode;
    if (keyCode == 13) {
        $("#submit_btn").click();
        return false;
    }
});

Castle

Answer 3

$("#myform").keypress(function(event){
    if(event.keycode===13){ // enter key has code 13 
       //some ajax code code here 
       //alert("Enter key pressed");
    }
});

Trawick

Answer 4

You have two opening brackets in your if statement and miss a closing bracket. Also, I would change e.target.type. Try this:

$("#contact_form").keypress(function (e) {
    if ((e.keyCode == 13) && ($('input[name="email"]').is(':focus'))) {

        e.preventDefault();
        //get input field values
        var user_email = $('input[name=email]').val();

        //simple validation at client's end
        //we simply change border color to red if empty field using .css()
        var proceed = true;

        if (user_email === "") {
            $('input[name=email]').css('border-color', 'red');
            proceed = false;
        }
    }
});

Drona

Answer 5

Instead of using button on click function you can use submit button. Load the validate.js file

function validateEmail(email)
{
 var reg = /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
 if (reg.test(email))
 {
 return true; }
 else{
 return false;
 }
} 

        $("#test-form").validate({



        submitHandler: function(form) {
            //form.submit();
                var email=$("#email").val();

            if(email=='' )
            {
                // Here you can type your own error message
                $('#valid').css("display","none");
                $('#empty').css("display","block");
                return false;
            }
             if (!(validateEmail(email))) {
                $('#empty').css("display","none");
                $('#valid').css("display","block");
 return false;
 }
            else {
            $.ajax({
            url: "signup.php",
            type: form.method,
            data: $(form).serialize(),
            success: function(response) {


            }            
        });
}
        }
    });

  });

Lashing

Answer 6

Simple way is this:

In HTML codes:

<form action="POST" onsubmit="ajax_submit();return false;">
    <b>First Name:</b> <input type="text" name="firstname" id="firstname">
    <br>
    <b>Last Name:</b> <input type="text" name="lastname" id="lastname">
    <br>
    <input type="submit" name="send" onclick="ajax_submit();">
</form>

In Js codes:

function ajax_submit()
{
    $.ajax({
        url: "submit.php",
        type: "POST",
        data: {
            firstname: $("#firstname").val(),
            lastname: $("#lastname").val()
        },
        dataType: "JSON",
        success: function (jsonStr) {
            // another codes when result is success
        }
    });
}

Divorce

Answer 7

<?php
  require_once 'db.php'; 
  if (!empty($_POST['id'])) { 
    $id = $_POST['id'];    
    $sql = "SELECT * FROM district WHERE id = $id"; 
    $query = pg_query($sql);
    echo'<option value=""> select your option </option>';

    if (pg_num_rows($query) > 0) {
      while ($row = pg_fetch_assoc($query)) {
        echo '<option value="' . $row['did'] . '">' . $row['dt'] . 
        '</option>';
      }
    } else {
      echo "<option value=''>No districts found</option>";
    }
  }
?>

Hide preview:

<?php
  require_once 'db.php'; 
  if (!empty($_POST['id'])) { 
    $id = $_POST['id'];    
    $sql = "SELECT * FROM district WHERE id = $id"; 
    $query = pg_query($sql);
    echo'<option value=""> select your option </option>';

    if (pg_num_rows($query) > 0) {
      while ($row = pg_fetch_assoc($query)) {
        echo '<option value="' . $row['did'] . '">' . $row['dt'] . 
        '</option>';
      }
    } else {
      echo "<option value=''>No districts found</option>";
    }
  }
?>

Nonjoinder