Databases
StackOverflow2013
Postsdbo
POUsing an ajax form submit on codeigniter
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POUsing an ajax form submit on codeigniter
    text
    copied!<p>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</p> <p>what im trying to do is...</p> <ol> <li><p>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</p></li> <li><p>if there is a field that does not contain any answer, a div will appear that says which fields needs to be answered</p></li> <li><p>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</p></li> </ol> <p>here is my code</p> <p><strong>controller</strong></p> <pre><code> &lt;?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-&gt;load-&gt;model("site_model"); //$cms_db = $this-&gt;load-&gt;database('cms', TRUE); /* database conection for write operation */ $site_db = $this-&gt;load-&gt;database('default', TRUE); } public function index() { //$this-&gt;load-&gt;helper('form'); $data = $this-&gt;_initialize_data(); $data['about'] = $this-&gt;site_model-&gt;get_about(); $this-&gt;load-&gt;vars($data); $this-&gt;load-&gt;view('site/index'); } public function learner() { $this-&gt;site_model-&gt;submit_learner(); redirect(base_url() . "site/index"); } public function _initialize_data() { $data['cp'] = $this-&gt;site_model-&gt;get_cp(); $data['op'] = $this-&gt;site_model-&gt;get_op(); $data['learnedu'] = $this-&gt;site_model-&gt;get_learnedu(); $data['learnals'] = $this-&gt;site_model-&gt;get_learnals(); $data['learnbrgy'] = $this-&gt;site_model-&gt;get_learnbrgy(); $data['learnben'] = $this-&gt;site_model-&gt;get_learnben(); return $data; } } </code></pre> <p><strong>model</strong></p> <pre><code> &lt;?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-&gt;load-&gt;helper('date'); $cms_db = $this-&gt;load-&gt;database('cms', TRUE); $fname = $this-&gt;input-&gt;post("fname"); $mname = $this-&gt;input-&gt;post("mname"); $lname = $this-&gt;input-&gt;post("lname"); $ename = $this-&gt;input-&gt;post("ename"); $bday = $this-&gt;input-&gt;post("bday"); $opt = $this-&gt;input-&gt;post("opt"); $educ = $this-&gt;input-&gt;post("educ"); $als = $this-&gt;input-&gt;post("als"); $brgy = $this-&gt;input-&gt;post("brgy"); $guardian = $this-&gt;input-&gt;post("guardian"); $relation = $this-&gt;input-&gt;post("relation"); $benefit = $this-&gt;input-&gt;post("benefit"); $newdata = array('first_name'=&gt;$fname, 'middle_name'=&gt;$mname, 'last_name'=&gt;$lname, 'extension_name'=&gt;$ename, 'bday'=&gt;$bday, 'gender'=&gt;$opt, 'education'=&gt;$educ, 'als'=&gt;$als, 'brgy'=&gt;$brgy, 'guardian'=&gt;$guardian, 'relationship'=&gt;$relation, 'added_by'=&gt;'OTH', 'added_id'=&gt;'' ); $cms_db-&gt;insert('records', $newdata); $id = $cms_db-&gt;insert_id(); foreach($benefit as $b) { $ben = array('record_id'=&gt;$id,'beneficiary_id'=&gt;$b); $cms_db-&gt;insert('is_beneficiary', $ben); } $date = date('Y-m-d g:ia'); $date_logged = array('action'=&gt;'Added','action_date'=&gt;$date,'activity'=&gt;$fname . " " . $mname . " " . $lname . ' was added through the Abot Alam Website'); $cms_db-&gt;insert('date_logged', $date_logged); } } </code></pre> <p><strong>view</strong></p> <pre><code> &lt;?php $attributes = array('class' =&gt; 'form-vertical','id'=&gt;'form_learner','name'=&gt;'form_learner'); echo form_open(base_url() . 'site/learner', $attributes); ?&gt; &lt;div class="control-group"&gt; &lt;label class="control-label" &gt;First Name&lt;/label&gt; &lt;div class="controls"&gt; &lt;input type="text" class="input input-xlarge" name="fname" id="fname" placeholder=""&gt; &lt;/div&gt; &lt;/div&gt; /*-------- 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 ----------------*/ &lt;input type="submit" class="btn btn-primary" value="Save" placeholder="" name="submit_learner" id="submit_learner"&gt; &lt;/form&gt; &lt;/div&gt; </code></pre> <p><strong>script.js</strong></p> <pre><code> $("#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("&lt;h4&gt;Input First Name&lt;/h4&gt;"); $("#fname").focus(); } else if(mname==''){ $("#learner_status").show(); $("#learner_status").html("&lt;h4&gt;Input Middle Name&lt;/h4&gt;"); $("#mname").focus(); } else if(lname==''){ $("#learner_status").show(); $("#learner_status").html("&lt;h4&gt;Input Last Name&lt;/h4&gt;"); $("#lname").focus(); } else if(ename==''){ $("#learner_status").show(); $("#learner_status").html("&lt;h4&gt;Input Extention Name&lt;/h4&gt;"); $("#ename").focus(); } else if(bday==''){ $("#learner_status").show(); $("#learner_status").html("&lt;h4&gt;Input Birthdate&lt;/h4&gt;"); $("#bday").focus(); } else if(educ==''){ $("#learner_status").show(); $("#learner_status").html("&lt;h4&gt;Input Highest Formal Education&lt;/h4&gt;"); $("#educ").focus(); } else if(als==''){ $("#learner_status").show(); $("#learner_status").html("&lt;h4&gt;Input ALS Programs Involved&lt;/h4&gt;"); $("#als").focus(); } else if(brgy==''){ $("#learner_status").show(); $("#learner_status").html("&lt;h4&gt;Input Barangay&lt;/h4&gt;"); $("#brgy").focus(); } else if(guardian==''){ $("#learner_status").show(); $("#learner_status").html("&lt;h4&gt;Input Guradian&lt;/h4&gt;"); $("#guradian").focus(); } else if(relation==''){ $("#learner_status").show(); $("#learner_status").html("&lt;h4&gt;Input Relationship to Guardian&lt;/h4&gt;"); $("#relation").focus(); } else{ var datastr = 'fname='+fname + '&amp;mname='+mname + '&amp;lname='+lname + '&amp;ename='+ename + '&amp;bday='+bday + '&amp;educ='+educ + '&amp;als='+als + '&amp;brgy='+brgy + '&amp;guardian='+guardian + '&amp;relation='+relation; $.ajax({ url:"&lt;?php echo base_url(); ?&gt;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("&lt;h4&gt;Form Successfully Submitted&lt;/h4&gt;"); } }); } }); </code></pre> <p>i have a feeling that the error is somewhere around in my javascript</p> <p>specially this line</p> <pre><code>$.ajax({ url:"&lt;?php echo base_url(); ?&gt;site/learner", </code></pre> <p>correct me if im wrong but from what i know you can't use php tags inside script tags</p> <p>but thats how people do it in other examples ive seen in the internet</p> <p>am i missing something?</p> <p>thanks</p> <p>edit: btw i forgot to mention that the problem with my code is that it doesnt insert into the database. </p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload