[英]Stop reloading page with 'Enter Key'
I have a search box at the top of page that makes an ajax call when a user hits the adjacent button.我在页面顶部有一个搜索框,当用户点击相邻按钮时,它会进行 ajax 调用。 I am trying to update the input tag so that when a user hit the 'enter' key , the apropriate JavaScript takes place without reloading the page.我正在尝试更新输入标签,以便当用户点击“输入”键时,无需重新加载页面即可执行适当的 JavaScript。 The problem is that the page keeps reloading.问题是页面不断重新加载。 Here is my latest attempt:这是我最近的尝试:
$("searchText").bind('keyup', function(event){
if(event.keyCode == 13){
event.preventDefault();
$("#buttonSrch").click();
return false;
}
});
<input type='search' id='searchText' />
<input type='button' id='buttonSrch' onclick="search(document.getElementById('searchText'))" value='Search' />
Don't bind to the input
s;不要绑定到input
s; bind to the form
.绑定到form
。 Assuming the form
has an ID of searchForm
:假设form
的 ID 为searchForm
:
$("#searchForm").submit(function() {
search($("#searchText").get(0));
return false;
});
It can also be done with plain JavaScript:也可以使用纯 JavaScript 来完成:
document.getElementById('searchForm').addEventListener('submit', function(e) {
search(document.getElementById('searchText'));
e.preventDefault();
}, false);
I know its a little late but I ran into the same problem as you.我知道它有点晚了,但我遇到了和你一样的问题。 It worked for me using "keypress" instead of bind.它使用“按键”而不是绑定对我有用。
$('#searchText').keypress(function (e) {
if (e.which == 13) {
e.preventDefault();
//do something
}
});
You are missing #
in the selector.您在选择器中缺少#
。 Try this试试这个
<input type='text' id='searchText' />
JS JS
$("#searchText").bind('keyup', function(event){
if(event.keyCode == 13){
event.preventDefault();
//$("#buttonSrch").click();
search(this.value);
}
});
Add onSubmit="return false;"
添加onSubmit="return false;"
on your form tag在你的表单标签上
<form onSubmit="return false;">
/* form elements here */
</form>`
$('#seachForm').submit(function(e){
e.preventDefault();
//do something
});
You could set the form action attribute to javascript:void(0);您可以将表单操作属性设置为 javascript:void(0); that way the form doesn't post/get so the page wont refresh.这样表单就不会发布/获取,因此页面不会刷新。
$(document).ready(function () {
$('#form1').attr('action', 'javascript:void(0);');
});
Just use the "action" attribute in <form>
tag.只需在<form>
标签中使用“action”属性。 Like this像这样
<form action="#"> // your content </form>
This is what ended up working for me.这就是最终为我工作的原因。 Please note that my struggle was to find the object that triggered the form submit:请注意,我的努力是找到触发表单提交的对象:
$('#missingStaff').submit(function (e) {
e.preventDefault();
var comment = $(document.activeElement)[0];
submitComments(comment);
}); });
$("searchText").keypress(function(event){
if(event.keyCode == 13){
$("#buttonSrch").click();
return false;
}
});
You just need to add this:你只需要添加这个:
<form @submit.prevent="search">
whatever function is triggered for search.触发搜索的任何功能。 When I press that search button search()
func is triggered.当我按下那个搜索按钮search()
func 被触发。 That is why: @submit.prevent="search"这就是为什么:@submit.prevent="search"
async search() {
let yuyu = document.getElementById('search').value
console.log('lsd', yuyu)
try {
let newRecipes = await this.$axios.$get(
`/api/videosset/?user=&id=&title=${yuyu}&price=&category=`
)
this.$store.commit('CHANGE_NAV_LAYOUT', newRecipes)
} catch (e) {
console.log(e)
}
},
Does your JS execute immediately or on document ready?您的 JS 是立即执行还是在文档准备好时执行? If it's not in a document ready the button won't exist at the time you're trying to call bind
.如果它不在准备好的文档中,则在您尝试调用bind
时该按钮将不存在。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.