大家好,我对JS还是个新手,所以我想问一下提交表单时调用函数的问题。
[更新] 表格
<div id="dashboard-side">
<form id="report" class="form-horizontal" method="post" action="<?= site_url('api/load_report') ?>"> <!-- onsubmit="location.reload()" -->
<fieldset>
<div class="control-group center_div">
<label class="control-label">Sales Name</label>
<div class="controls">
<input type="text" name="sales_name" class="form-control input-xlarge txt-up" value="<?php echo set_value('cust_name'); ?>" placeholder="Enter Customer Name" style="height: 30px;"/>
</div>
</div>
<div class="control-group center_div">
<div class="controls form-inline">
<input id="get_report" type="submit" class="btn btn-success btn-inline " value="Get Report" style="width:110px; margin-left: -155px;"/>
</div>
</div>
<table border="1" width="100%" style="background-color: #dfe8f6;">
<tr>
<td width="154px"><strong>Customer Name</strong></td><td width="128px"><strong>Activity</strong></td>
<td width="244px"><strong>Detail</strong></td><td width="141px"><strong>Start Time</strong></td>
<td width="142px"><strong>Finish Time</strong></td><td width="39px" style="text-align:center"><strong>Note</strong></td>
<td style="margin-left: 50px"><strong>Action</strong></td>
</tr>
</table>
<!------------------------------------------------------------------------------------->
<div id="xreport" class="table-hover" style="background-color: #EAF2F5"></div>
</fieldset>
</form>
</div>
控制器
公共函数 load_report() {
$this->db->where('user_id', $this->input->post('sales_name'));
$query = $this->db->get('activity');
$result = $query->result_array();
$this->output->set_output(json_encode($result)); }
JS
var load_report = function() {
$.get('api/load_report', function(o){
var output = '';
for (var i = 0; i < o.length; i++){
output += Template.dodo(o[i]);
}
$("#xreport").html(output);
}, 'json');
};
如果我在表单加载时调用该函数,它工作正常,但我想在表单提交时调用它,该怎么做?
这是我尝试过的
var load_report = function () {
$("#report").submit(function(){
$.get('api/load_report', function(o){
var output = '';
for (var i = 0; i < o.length; i++){
output += Template.dodo(o[i]);
}
$("#xreport").html(output);
}, 'json');
});
};
它没有将数组分配到我的 #div 中,而是在新的空白选项卡中显示数组数据,如下所示:到目前为止我的当前结果
任何帮助将不胜感激,谢谢。
更新:新的调用函数
var load_report = function () {
$("#report").submit(function (evt) {
evt.preventDefault();
var url = $(this).attr('action');
var postData = $(this).serialize();
$.post(url, postData, function (o) {
if (o.result == 1) {
var output = '';
Result.success('Clocked-in');
for (var i = 0; i < o.length; i++) {
output += Template.dodo(o[i]); //this data[0] taken from array in api/load_report
console.log(output);
$("#xreport").html(output);
}
} else {
Result.error(o.error);
console.log(o.error);
}
}, 'json');
});
};
使用这个新的调用函数,我可以从中检索数据api/load_report
而不会卡在 e.preventDefault 甚至打开一个新选项卡上,我console.log
和结果在控制台中正确显示,但它没有以某种方式显示在 div 上。
我的 template.js(如果需要)
this.dodo = function(obj){
var output ='';
output +='<table border=1, width=100%, style="margin-left: 0%"';
output += '<tr>';
output += '<td width=120px>' + obj.user_id + '</td>';
output += '<td width=120px>' + obj.cust_name + '</td>';
output += '<td width=100px>' + obj.act_type + '</td>';
output += '<td width=190px>' + obj.act_detail + '</td>';
output += '<td width=110px>' + obj.date_added + '</td>';
output += '<td width=110px>' + obj.date_modified + '</td>';
output += '<td style="text-align:center" width=30px>' + obj.act_notes + '</td>';
output += '</tr>';
output +='</table>';
output += '</div>';
return output;
};
结果(注意,user_id = form.sales_name)结果预览
首先,我建议不要像这样直接在 dom 上使用onclick
或onsubmit
。
<form onsubmit="myFunction();"></form>
对我来说最大的原因是它对可读性产生负面影响,有时甚至会对项目的未来维护产生负面影响。最好将 html 和 javascript 分开,除非您使用的是提供模板特性/功能的框架,例如 angularjs。
另一大问题是您只能有一个内联事件,并且很容易意外覆盖,这会导致令人困惑的错误。
它转到新选项卡的原因是因为.submit()
. 这将调用您的函数,然后继续进行内部 jQuery 事件处理,包括刷新页面。我认为这里有两种最可行的解决方案。
第一个解决方案:
event.preventDefault();
在函数的开头添加一个以阻止 jQuery 刷新页面。
$("#report").submit(function(e) {
e.preventDefault();
});
第二种解决方案(可能更好):
您正在使用 ajax 调用$.get(...)
。您可以在触发 ajax 调用的按钮上(可能在用于提交表单的按钮上)添加一个事件侦听器。这是一个假设提交按钮的 id 为 的示例loadData
。
$("#loadData").click(function(){
$.get('api/load_report', function(o){
var output = '';
for (var i = 0; i < o.length; i++){
output += Template.dodo(o[i]);
}
$("#xreport").html(output);
}, 'json');
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句