我有一个包含两种表单的页面,一种用于提交一些数据并从数据库返回数据,另一种用于在数据库上进行自动完成搜索,然后应从数据库返回数据。 这两个表单在不同页面中按预期工作,现在我尝试将它们放在一个页面中,但如果我在第二个表单上执行自动完成/全文搜索,我会从第一个表单中获得结果。 我认为问题是 JavaScript 正在捕获第一个表单中的数据,无论按下哪个提交按钮,这两个表单都有不同的操作路线。 这是第一个脚本:
jQuery(function ($) {
$(document).ready(function () {
var form = $('form');
form.submit(function (e) {
e.preventDefault();
$.ajax({
url: form.prop('action'),
type: 'post',
dataType: 'json',
data: form.serialize(),
success: function (data) {
var obj = (data);
var resultStr = "";
//something
$("#results").html(resultStr);
}
});
});
});
});
第二个
$(document).ready(function () {
$('input:text').bind({});
$('input:hidden').bind({});
$("#models").autocomplete({
minLength: 1,
source: URL
});
});
那么,为什么页面返回 resultStr 并填充 div 而不是我在使用第二个脚本进行 fulltextsearch 后询问的数据?有什么想法吗?
最佳答案
好的,如果您想将相同的提交事件附加到所有表单,然后确定提交哪个表单,以便您可以检索表单的 action
例如,您需要按照您在首先放置,然后检索提交 block 内的表单对象,如下所示:
这是 jsFiddle 示例:http://jsfiddle.net/bu9v52fm/
jQuery(function ($) {
$(document).ready(function () {
//attach event to all forms
$('form').submit(function (e) {
//output $(this) form into a variable and proceed
//--------------
var form = $(this);
//--------------
e.preventDefault();
$.ajax({
url: form.prop('action'),
type: 'post',
dataType: 'json',
data: form.serialize(),
success: function (data) {
var obj = (data);
var resultStr = "";
//something
$("#results").html(resultStr);
}
});
});
});
});
关于javascript - 同一页面上有两个表单和两个脚本,无论是否提交都会调用第一个脚本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34141135/