CODEWITHSUNDEEP
javascriptphpjqueryajaxforms
univers_
univers_

Reputation: 463

Enter key to submit Ajax form

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…

Upvotes: 8

Views: 23856

Answers (8)

Hashim Aziz
Hashim Aziz

Reputation: 6052

For AJAX requests

After a lot of iterating and experimenting I stumbled on the most concise way I could find to get my AJAX requests working: using a type="submit" button, but hooking into the click event instead of submit:

<button class="submitForm" type="submit"></button>

document.querySelector(".submitForm").addEventListener("click", submitForm() {
   // Function code here
});

This allows you to take advantage of the browser's native support for using Enter to submit the AJAX request, while preventing any double submissions. It also doesn't need any return false or preventDefault() calls. Like I said, concise.

I've confirmed this works in the latest versions of both Firefox and Chrome.

Upvotes: -1

user24037357
user24037357

Reputation: 1

<?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>";
    }
  }
?>

Upvotes: -1

Milad Ghiravani
Milad Ghiravani

Reputation: 1683

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
        }
    });
}

Upvotes: 0

limengjun
limengjun

Reputation: 183

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/

Upvotes: 12

Badshah Sahib
Badshah Sahib

Reputation: 184

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

Upvotes: 1

Nadeshwaran
Nadeshwaran

Reputation: 367

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) {


            }            
        });
}
        }
    });

  });

Upvotes: 0

display-name-is-missing
display-name-is-missing

Reputation: 4399

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;
        }
    }
});

Upvotes: 0

sonsonz
sonsonz

Reputation: 26

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;
    }
});

Upvotes: 1

Related Questions