I have two ajax calls on a page. There are text inputs for searching or for returning a result.
我在页面上有两个ajax调用。有用于搜索或返回结果的文本输入。
The page has several non ajax inputs and the ajax text input is within this . Whenever I hit enter -- to return the ajax call the form submits and refreshes the page prematurely. How do I prevent the ajax from submitting the form when enter is pressed on these inputs? It should just get the results.
该页面有几个非ajax输入，ajax文本输入在此范围内。每当我按Enter键 - 返回ajax调用时，表单提交并过早刷新页面。当按下输入时，如何阻止ajax提交表单？它应该得到结果。
However, I cannot do the jquery key press because it needs to run the ajax even if the user tabs to another field. Basically I need this to not submit the full form on the page before the user can even get the ajax results. I read return false would fix this but it has not.
但是，我不能按jquery键，因为即使用户选中另一个字段，它也需要运行ajax。基本上我需要这个在用户甚至无法获得ajax结果之前不在页面上提交完整表单。我读了返回false会解决这个问题，但事实并非如此。
Here is the javascript:
这是javascript：
<script type="text/javascript">
$(function() {
$("[id^='product-search']").change(function() {
var myClass = $(this).attr("class");
// getting the value that user typed
var searchString = $("#product-search" + myClass).val();
// forming the queryString
var data = 'productSearch='+ searchString + '&formID=' + myClass;
// if searchString is not empty
if(searchString) {
// ajax call
$.ajax({
type: "POST",
url: "<?php echo $path ?>ajax/product_search.php",
data: data,
beforeSend: function(html) { // this happens before actual call
$("#results" + myClass).html('');
$("#searchresults" + myClass).show();
$(".word").html(searchString);
},
success: function(html){ // this happens after we get results
$("#results" + myClass).show();
$("#results" + myClass).append(html);
}
});
}
return false;
});
$("[id^='inventory-ESN-']").change(function() {
var arr = [<?php
$j = 1;
foreach($checkESNArray as $value){
echo "'$value'";
if(count($checkESNArray) != $j)
echo ", ";
$j++;
}
?>];
var carrier = $(this).attr("class");
var idVersion = $(this).attr("id");
if($.inArray(carrier,arr) > -1) {
// getting the value that user typed
var checkESN = $("#inventory-ESN-" + idVersion).val();
// forming the queryString
var data = 'checkESN='+ checkESN + '&carrier=' + carrier;
// if checkESN is not empty
if(checkESN) {
// ajax call
$.ajax({
type: "POST",
url: "<?php echo $path ?>ajax/checkESN.php",
data: data,
beforeSend: function(html) { // this happens before actual call
$("#esnResults" + idVersion).html('');
},
success: function(html){ // this happens after we get results
$("#esnResults" + idVersion).show();
$("#esnResults" + idVersion).append(html);
}
});
}
}
return false;
});
});
</script>
1 个解决方案
#1
2
I would suggest you to bind that ajax call to the submit event of the form and return false at the end, this will prevent triggering default submit function by the browser and only your ajax call will be executed.
我建议你将ajax调用绑定到表单的submit事件并在结尾返回false，这将阻止浏览器触发默认提交功能，只会执行你的ajax调用。
UPDATE
UPDATE
I don't know the structure of your HTML, so I will add just a dummy example to make it clear. Let's say we have some form (I guess you have such a form, which submission you tries to prevent)
我不知道HTML的结构，所以我只添加一个虚拟示例来说明它。假设我们有一些表格（我猜你有这样的表格，你试图阻止提交）
HTML:
HTML：
<form id="myForm">
<input id="searchQuery" name="search" />
</form>
JavaScript:
JavaScript的：
$("#myForm").submit({
// this will preform necessary ajax call and other stuff
productSearch(); // I would suggest also to remove that functionality from
// change event listener and make a separate function to avoid duplicating code
return false;
});
this code will run every time when the form is trying to be submitted (especially when user hits Enter key in the input), will perform necessary ajax call and will return false preventing in that way the for submission.
每次尝试提交表单时都会运行此代码（特别是当用户在输入中点击Enter键时），将执行必要的ajax调用并返回false以此方式阻止提交。
#1
2
I would suggest you to bind that ajax call to the submit event of the form and return false at the end, this will prevent triggering default submit function by the browser and only your ajax call will be executed.
我建议你将ajax调用绑定到表单的submit事件并在结尾返回false，这将阻止浏览器触发默认提交功能，只会执行你的ajax调用。
UPDATE
UPDATE
I don't know the structure of your HTML, so I will add just a dummy example to make it clear. Let's say we have some form (I guess you have such a form, which submission you tries to prevent)
我不知道HTML的结构，所以我只添加一个虚拟示例来说明它。假设我们有一些表格（我猜你有这样的表格，你试图阻止提交）
HTML:
HTML：
<form id="myForm">
<input id="searchQuery" name="search" />
</form>
JavaScript:
JavaScript的：
$("#myForm").submit({
// this will preform necessary ajax call and other stuff
productSearch(); // I would suggest also to remove that functionality from
// change event listener and make a separate function to avoid duplicating code
return false;
});
this code will run every time when the form is trying to be submitted (especially when user hits Enter key in the input), will perform necessary ajax call and will return false preventing in that way the for submission.
每次尝试提交表单时都会运行此代码（特别是当用户在输入中点击Enter键时），将执行必要的ajax调用并返回false以此方式阻止提交。