У меня очень простая форма AJAX, которая запрашивает адрес электронной почты и отправляет ее мне после отправки.
Как я могу получить форму для отправки при нажатии клавиши ввода?
Это выполняется, когда пользователь нажимает кнопку отправки:
<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> Я знаю, что этот вопрос задан раньше – у меня проблемы с работой функции keypress .
Я пробовал это безрезультатно:
$("#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. */ } } });
Форма – #contact_form .
Любая помощь была бы оценена …
Просто привяжите событие отправки к своей форме, а затем введите ключ ввода:
$("#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. } });
И код находится здесь: http://jsfiddle.net/6TSWk/6/
добавьте новый класс во все полевые поля или checkbox => class keypressbutton, а затем замените свой код на keypress следующим:
$(document).on("keypress",".keypressbutton",function(event) { var keyCode = event.which || event.keyCode; if (keyCode == 13) { $("#submit_btn").click(); return false; } });
$("#myform").keypress(function(event){ if(event.keycode===13){ // enter key has code 13 //some ajax code code here //alert("Enter key pressed"); } });
У вас есть две открывающие скобки в вашем заявлении if и пропустите закрывающий кронштейн. Кроме того, я бы изменил e.target.type . Попробуй это:
$("#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; } } });
Вместо того, чтобы использовать кнопку on click, вы можете использовать кнопку отправки. Загрузите файл validate.js
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) { } }); } } }); });
Простой способ:
В HTML-кодах:
<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>
В Js-кодах:
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 } }); }