防止只输入提交按钮，而不是表单的其余部分
防止只输入提交按钮，而不是表单的其余部分
提问于 2014-05-31 18:15:23
好的，所以我一直在寻找一段代码来完成这个任务，但是没有什么适用于我的情况。
我的问题是:当按下" enter“键时，我试图阻止表单提交，但当按下enter键时，允许表单中的搜索脚本提交。
我发现的是阻止输入键句点的脚本，或者脚本无法工作，因为我认为我使用的是<button>而不是<input>作为提交按钮，我不太确定。
我的表格
<form action="" method="post" onsubmit="return false;" id="myform">我的javascript做我的搜索
function showSub(str) {
var xmlhttp;
if (str=="") {
document.getElementById("txtSub").innerHTML="";
return;
}
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("txtSub").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","findLogo.php?q="+encodeURIComponent(str),true);
xmlhttp.send();
}
$(document).on('change', '#searchText', function() {
// Get the search text
var searchText = $(this).val();
// Make sure it isn't empty
if (searchText.length > 0) {
// Send the update request
showSub(searchText);
}
});我的搜索输入
<input type="text" id="searchText" value="" />
<div id="txtSub"></div>我的提交按钮
<input type="hidden" value="Post" name="submit" />
<button type="submit" style="height:33px; width:50px">
<img src="../css/images/plus_25.png" />
</button>我的java-script文章提交脚本
<script type="text/javascript">
$(function(){
$('button[type=submit]').click(function(e){
e.preventDefault();
$.ajax({
type: "POST",
url: "postadd.php",
data: $("#myform").serialize(),
beforeSend: function(){
$('#result').html('<div class="success"><img src="../images/loading-blue.gif" width="25" /></div>');
},
success: function(data){
$('#result').html(data);
$('html, body').animate({scrollTop:$(document).height()}, 'slow');
//document.getElementById('footer').scrollIntoView();
}
});
});
});回答 1
Stack Overflow用户
发布于 2014-05-31 19:18:00
解决方案基本上是基于检测按键和防止表单提交。
- 首先，将两个按钮作为
<input type="button" />进行搜索和表单提交。 - 为了区分搜索按钮和提交按钮，在这里我添加了
.submit和.Search。 - 另一件事是，在
.submit button上使用链接，如果按下的键是enter键，则用于防止单击事件块执行。 - 使用enter键阻止提交会导致另一个问题，如果选择了其他按钮，则将输入该按钮表单，以防止添加基于按钮的表单提交和提交按钮，另一个优点是您可以添加任何自定义按钮来提交。
- 接下来，Click块提交通过步骤4到达的表单，如果键按是开始执行进程的原因，该表单将停止。
两个示例添加了一个基于单击的提交按钮，另一个用于基于单击/输入的搜索
另一个加点是它并不阻止您使用enter for search按钮
解决了点击演示，了解不同的提交与输入键和搜索与输入键
HTML
<input type="button" class="Submit" value="Submit"/>
<input type="button" class="Search" value="Search"/>Jquery
$("input.Submit").keypress(function(event){
if(event.which=='13'){
alert("Key enter key entered ");
event.preventDefault();
}else{
event.preventDefault();
}
}).click(function(event){
alert("Here is the submit Button works on click write jquery ");
$( "#FormId" ).submit();
});
//The Code For Search Which could be triggered by both keypress and click
$("input.Search").click(function(event){
alert("Works for both enter and click");
});编辑：
使用搜索演示，就像google在输入文本、在文本框上搜索并单击enter触发搜索一样
在搜索框中输入某些文本，按enter键
Jquery
$("input.Search").keypress(function(event){
if(event.which=='13'){
alert("Key enter key entered ");
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23973519
复制相关文章
相似问题
腾讯云开发者
