Question

此处的代码在搜索框为空时禁用搜索按钮。当搜索按钮的输入类型设置为submit时，既没有提交也没有键盘输入键提交空表单，但是当我将输入类型更改为button并将光标放在输入字段内并按下回车键时发布空表单导致重新加载页面。当搜索字段为空时，如何阻止在按Enter键时提交搜索表单？

<form action="search.php" method="post">
<input type="text" class="search" placeholder="search here"/>
<input type="submit" class="Button" value="search"/>
</form> 

<script>
$(document).ready(function(){
$('.Button').attr('disabled',true);
$('.search').keyup(function(){
if($(this).val().length !=0)
    $('.Button').attr('disabled', false);            
else
    $('.Button').attr('disabled',true);
 })
});
</script>

Answer 1

为表单提交添加事件侦听器

$('form').submit(function(e){
    // check logic here
    if ($('.search').val().length < 1)
       e.preventDefault()
});

如果没有值

，e.preventDefault将避免提交表单

否则表格将正常提交

Answer 2

您可以尝试这样

$('form').submit(function(e){
    if ($('.search').val().length<=0)
        return false;
});

Answer 3

这是您的代码，有一些修改：

JsFiddle Demo

$(document).ready(function(){
	// By default submit is disabled 
	$('.Button').prop('disabled', true);

	$('.search').keyup(function() {

		if($(this).val().length !=0 ) {			
			$('.Button').prop('disabled', false); 
		} else {
			$( ".search").focus();		
		    $('.Button').prop('disabled', true);
		    e.preventDefault();
		}
		
	});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="search.php" method="post">
	<input type="text" class="search" placeholder="search here"/>
	<input type="submit" class="Button" value="search"/>
</form>

JsFiddle Demo

Answer 4

如果您想更改attr

，则应使用prop代替disabled

$(function() {
  $('.Button').prop('disabled', true);
  $('.search').keyup(function() {
    $('.Button').prop('disabled', !$(this).val());
  });
});

如何在搜索字段为空时阻止提交搜索表单？

4 个答案: