使用Ajax表单在Codeigniter上提交
[英]Using an ajax form submit on codeigniter
问题描述
我试图在jquery ajax的帮助下在codeigniter中创建一个表单，但我似乎在使其工作时遇到问题
我想做的是...
创建一个表单，该表单将在将数据插入数据库之前检查用户是否已填写所有必要字段
如果某个字段不包含任何答案，则会显示一个div，指出需要回答哪些字段
如果填写了所有字段，则将提交表单，更新数据库，然后将显示一个div，表示已成功提交表单
这是我的代码
控制者
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Site extends CI_controller {
public function __construct()
{
parent::__construct();
// Your own constructor code
$this->load->model("site_model");
//$cms_db = $this->load->database('cms', TRUE); /* database conection for write operation */
$site_db = $this->load->database('default', TRUE);
}
public function index()
{
//$this->load->helper('form');
$data = $this->_initialize_data();
$data['about'] = $this->site_model->get_about();
$this->load->vars($data);
$this->load->view('site/index');
}
public function learner()
{
$this->site_model->submit_learner();
redirect(base_url() . "site/index");
}
public function _initialize_data()
{
$data['cp'] = $this->site_model->get_cp();
$data['op'] = $this->site_model->get_op();
$data['learnedu'] = $this->site_model->get_learnedu();
$data['learnals'] = $this->site_model->get_learnals();
$data['learnbrgy'] = $this->site_model->get_learnbrgy();
$data['learnben'] = $this->site_model->get_learnben();
return $data;
}
}
模型
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
// CI 2.0 Compatibility
if(!class_exists('CI_Model')) { class CI_Model extends Model {} }
class Site_model extends CI_Model
{
function submit_learner()
{
//$this->load->helper('date');
$cms_db = $this->load->database('cms', TRUE);
$fname = $this->input->post("fname");
$mname = $this->input->post("mname");
$lname = $this->input->post("lname");
$ename = $this->input->post("ename");
$bday = $this->input->post("bday");
$opt = $this->input->post("opt");
$educ = $this->input->post("educ");
$als = $this->input->post("als");
$brgy = $this->input->post("brgy");
$guardian = $this->input->post("guardian");
$relation = $this->input->post("relation");
$benefit = $this->input->post("benefit");
$newdata = array('first_name'=>$fname,
'middle_name'=>$mname,
'last_name'=>$lname,
'extension_name'=>$ename,
'bday'=>$bday,
'gender'=>$opt,
'education'=>$educ,
'als'=>$als,
'brgy'=>$brgy,
'guardian'=>$guardian,
'relationship'=>$relation,
'added_by'=>'OTH',
'added_id'=>''
);
$cms_db->insert('records', $newdata);
$id = $cms_db->insert_id();
foreach($benefit as $b)
{
$ben = array('record_id'=>$id,'beneficiary_id'=>$b);
$cms_db->insert('is_beneficiary', $ben);
}
$date = date('Y-m-d g:ia');
$date_logged = array('action'=>'Added','action_date'=>$date,'activity'=>$fname . " " . $mname . " " . $lname . ' was added through the Abot Alam Website');
$cms_db->insert('date_logged', $date_logged);
}
}
视图
<?php
$attributes = array('class' => 'form-vertical','id'=>'form_learner','name'=>'form_learner');
echo form_open(base_url() . 'site/learner', $attributes);
?>
<div class="control-group">
<label class="control-label" >First Name</label>
<div class="controls">
<input type="text" class="input input-xlarge" name="fname" id="fname" placeholder="">
</div>
</div>
/*-------- Theres a bunch of other fields here that asks things like last name, middle name but i decided to omit it to make the post shorter ----------------*/
<input type="submit" class="btn btn-primary" value="Save" placeholder="" name="submit_learner" id="submit_learner">
</form>
</div>
script.js
$("#submit_learner").click(function(e) {
e.preventDefault();
fname = $("#fname").val();
mname = $("#mname").val();
lname = $("#lname").val();
ename = $("#ename").val();
bday = $("#bday").val();
educ = $("#educ").val();
als = $("#als").val();
brgy = $("#brgy").val();
guardian = $("#guardian").val();
relation = $("#relation").val();
if(fname==''){
$("#learner_status").show();
$("#learner_status").html("<h4>Input First Name</h4>");
$("#fname").focus();
}
else if(mname==''){
$("#learner_status").show();
$("#learner_status").html("<h4>Input Middle Name</h4>");
$("#mname").focus();
}
else if(lname==''){
$("#learner_status").show();
$("#learner_status").html("<h4>Input Last Name</h4>");
$("#lname").focus();
}
else if(ename==''){
$("#learner_status").show();
$("#learner_status").html("<h4>Input Extention Name</h4>");
$("#ename").focus();
}
else if(bday==''){
$("#learner_status").show();
$("#learner_status").html("<h4>Input Birthdate</h4>");
$("#bday").focus();
}
else if(educ==''){
$("#learner_status").show();
$("#learner_status").html("<h4>Input Highest Formal Education</h4>");
$("#educ").focus();
}
else if(als==''){
$("#learner_status").show();
$("#learner_status").html("<h4>Input ALS Programs Involved</h4>");
$("#als").focus();
}
else if(brgy==''){
$("#learner_status").show();
$("#learner_status").html("<h4>Input Barangay</h4>");
$("#brgy").focus();
}
else if(guardian==''){
$("#learner_status").show();
$("#learner_status").html("<h4>Input Guradian</h4>");
$("#guradian").focus();
}
else if(relation==''){
$("#learner_status").show();
$("#learner_status").html("<h4>Input Relationship to Guardian</h4>");
$("#relation").focus();
}
else{
var datastr = 'fname='+fname + '&mname='+mname + '&lname='+lname + '&ename='+ename + '&bday='+bday + '&educ='+educ + '&als='+als + '&brgy='+brgy + '&guardian='+guardian + '&relation='+relation;
$.ajax({
url:"<?php echo base_url(); ?>site/learner",
type:'POST',
data:datastr,
dataType:"json",
success:function(result){
$("#learner_status").show();
$("#learner_status").attr('class', 'span 12 alert alert-success');
$("#learner_status").html("<h4>Form Successfully Submitted</h4>");
}
});
}
});
我感觉到错误在我的javascript中
特别是这条线
$.ajax({
url:"<?php echo base_url(); ?>site/learner",
纠正我，如果我错了，但据我所知，您不能在脚本标签内使用php标签
但这就是人们如何在互联网上看到的其他例子中做到这一点
我想念什么吗？
谢谢
编辑：顺便说一句，我忘了提到我的代码的问题是它没有插入数据库。
1 个解决方案
解决方案1
0 已采纳 2013-02-04 15:17:16
在您的html中，就在您加载script.js之前，您可以输入以下内容：
<script>var base_url = '<?php echo base_url(); ?>' + 'site/learner';</script>
然后js-variable base_url应该可以被script.js访问，因此：
$.ajax({
url: base_url, //etc
使用ajax在codeigniter中提交表单
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.