在codeigniter上使用ajax表单提交

时间:2021-08-15 08:52:13

im trying to create a form in codeigniter with the help of jquery ajax but i seem to be having problems in making it work

我试图在jigery ajax的帮助下在codeigniter中创建一个表单,但我似乎在使其工作时遇到问题

what im trying to do is...

我想要做的是......

  1. to create a form that will that will check if the user has filled up all the necessary fields before inserting the data into the database

    创建一个表单,该表单将检查用户是否在将数据插入数据库之前填满了所有必需的字段

  2. if there is a field that does not contain any answer, a div will appear that says which fields needs to be answered

    如果有一个不包含任何答案的字段,则会出现一个div,说明需要回答哪些字段

  3. if all fields are filled up the form will submit, update the database and a div will appear saying that the form has successfully been submitted

    如果填写完所有字段,表单将提交,更新数据库并显示一个div表示表单已成功提交

here is my code

这是我的代码

controller

    <?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;
        }
}

model

    <?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); 


        }
}

view

       <?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>");
                    }

                });

                }

         });

i have a feeling that the error is somewhere around in my javascript

我有一种感觉,错误是在我的JavaScript中的某处

specially this line

特别是这条线

$.ajax({
                url:"<?php echo base_url(); ?>site/learner",

correct me if im wrong but from what i know you can't use php tags inside script tags

纠正我,如果我错了,但从我知道你不能在脚本标签内使用PHP标签

but thats how people do it in other examples ive seen in the internet

但这就是人们如何在互联网上看到的其他例子中做到这一点

am i missing something?

我错过了什么吗?

thanks

edit: btw i forgot to mention that the problem with my code is that it doesnt insert into the database.

编辑:顺便说一句,我忘了提到我的代码的问题是它没有插入数据库。

1 个解决方案

#1


0  

In your html, right before you load script.js, you could put this:

在你的html中,在你加载script.js之前,你可以把它放在:

<script>var base_url = '<?php echo base_url(); ?>' + 'site/learner';</script>

The js-variable base_urlshould then be accessible to script.js, so:

然后,script.js可以访问js-variable base_url,因此:

$.ajax({
            url: base_url, //etc

#1


0  

In your html, right before you load script.js, you could put this:

在你的html中,在你加载script.js之前,你可以把它放在:

<script>var base_url = '<?php echo base_url(); ?>' + 'site/learner';</script>

The js-variable base_urlshould then be accessible to script.js, so:

然后,script.js可以访问js-variable base_url,因此:

$.ajax({
            url: base_url, //etc