I want to submit a form using jQuery in a CodeIgniter application. However, the function called in the Controller keeps wanting to send the user to a page (with the same name as the Controller function) that doesn't exist.
我想在CodeIgniter应用程序中使用jQuery提交表单。但是,Controller中调用的函数一直希望将用户发送到不存在的页面(与Controller函数同名)。
I have tried this:
我试过这个:
$('#contactForm').submit(function () {
});
And this:
$('#contactForm').submit(function () {
dataString = $("#contactForm").serialize();
$.ajax({
type:"POST",
url:"<?php echo base_url(); ?>about/contactSubmit",
data:dataString,
success:function (data) {
alert('test');
}
});
return false; //stop the actual form post !important!
});
The form is a simple form with id "contactForm". The jQuery submit function works in that it goes to the "contactSubmit" function in the Controller. This function looks like this:
表单是一个id为“contactForm”的简单表单。 jQuery提交功能的工作原理是它转到Controller中的“contactSubmit”函数。这个函数看起来像这样:
public function contactSubmit()
{
$this->load->model('customer_model');
$this->customer_model->addCustomer();
}
So it calls an addCustomer function in the Model that adds the info in the database. All that works fine. But then it tries to open a "customerSubmit" page that doesn't exist, and that's what I want to avoid. I just want it to stay on the same page, that has a jQuery function for telling the user that the form has been submitted ok.
因此它在Model中调用addCustomer函数,该函数在数据库中添加信息。一切正常。但后来它试图打开一个不存在的“customerSubmit”页面,这就是我想要避免的。我只是希望它保持在同一页面上,它有一个jQuery函数,用于告诉用户表单已经提交好了。
So how do I do this?
那我该怎么做?
EDIT:
It seems the key to not being sent to a new page by the Controller function contactSubmit is to return false in the submit jQuery function, judging from every tutorial on the subject I can find, but...when I do include that, the Controller function isn't called at all. This means that only the first option above really calls the Controller function (i.e. the .submit without return false).
似乎未通过Controller函数contactSubmit发送到新页面的关键是在提交jQuery函数中返回false,从我可以找到的主题的每个教程判断,但是...当我包括它时,控制器根本没有调用函数。这意味着只有上面的第一个选项真正调用Controller函数(即.submit而不返回false)。
So what am I doing wrong here? If I'm supposed to pass data to the database using a submit, but the "return false" stops it from actually calling the function in the Controller?
那么我在这里做错了什么?如果我应该使用提交将数据传递到数据库,但是“return false”会阻止它实际调用Controller中的函数吗?
EDIT 2: Found the answer, see my comment to Christophs post!
编辑2:找到答案,看看我对Christophs帖子的评论!
2 个解决方案
#1
6
Just a guess: Try event.preventDefault()
to stop the default behaviour of the submit action which is defined in <form action="...">
(Which is normally sending the form-data and forwarding to some kind of "request received" page).
只是猜测:尝试使用event.preventDefault()来停止在
The code would be something like this:
代码将是这样的:
$('#contactForm').submit(function (event) {
dataString = $("#contactForm").serialize();
$.ajax({
type:"POST",
url:"<?php echo base_url(); ?>about/contactSubmit",
data:dataString,
success:function (data) {
alert('test');
}
});
event.preventDefault();
});
#2
0
Probably you assign submit
handler when page isn't loaded yet, so js doesn't see any form object, try to assign it in page load event handler like this:
可能你还没有加载页面时分配提交处理程序,所以js没有看到任何表单对象,尝试在页面加载事件处理程序中分配它,如下所示:
$(function() {
$('#contactForm').submit(function () {
....
});
});
#1
6
Just a guess: Try event.preventDefault()
to stop the default behaviour of the submit action which is defined in <form action="...">
(Which is normally sending the form-data and forwarding to some kind of "request received" page).
只是猜测:尝试使用event.preventDefault()来停止在
The code would be something like this:
代码将是这样的:
$('#contactForm').submit(function (event) {
dataString = $("#contactForm").serialize();
$.ajax({
type:"POST",
url:"<?php echo base_url(); ?>about/contactSubmit",
data:dataString,
success:function (data) {
alert('test');
}
});
event.preventDefault();
});
#2
0
Probably you assign submit
handler when page isn't loaded yet, so js doesn't see any form object, try to assign it in page load event handler like this:
可能你还没有加载页面时分配提交处理程序,所以js没有看到任何表单对象,尝试在页面加载事件处理程序中分配它,如下所示:
$(function() {
$('#contactForm').submit(function () {
....
});
});