How To insert data in mysql database using ajax in codeigniter? - php

Question

I am trying to validate my form and insert the data in mysql database using ajax.Neither on submit validation is happening nor data is being inserted.I am making this in codeigniter framework. I am new bie to ajax.I am not able to figure out where am going wrong .Here is my code
View :
<script type="text/javascript">
function validate_name(first_name){
if(first_name.trim() == '' || first_name.length == 0){
$('.first_name').show();
$('.first_name').text('Please enter your name');
return false;
} else {
$('.first_name').hide();
return true;
}
}
function validate_email(email_id){
var pattern = new RegExp(/^[+a-zA-Z0-9._-]+#[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i);
if(email_id.trim() == '' || email_id.length == 0){
$('.email-id').show();
$('.email-id').text('Please enter email address');
return false;
}else if(!pattern.test(email_id)) {
$('.email-id').show();
$('.email-id').text('Please enter valid email address');
return false;
} else {
$('.email-id').hide();
return true;
}
}
function validate_inquiry_form(first_name,email_id){
var username_validate = validate_name(first_name);
var email_validate = validate_email(email_id);
if(username_validate == true && email_validate == true){
return true;
} else {
return false;
}
}
$('#submit_enquiry').click(function(){
var first_name = $("input[name=first_name]").val();
var last_name = $("input[name=last_name]").val();
var dob = $("input[name=dob]").val();
var gender = $("input[name=gender] :radio:checked").val();
var email_id = $("input[name=email_id]").val();
var password = $("input[name=password]").val();
var address = $("input[name=address]").val();
var phone = $("input[name=phone]").val();
var zipcode = $("input[name=zipcode]").val();
var validate_form = validate_inquiry_form(first_name,email_id);
if(validate_form == true){
$.ajax({
url:'<?php echo base_url(); ?>member/register',
type:'POST',
data:{
first_name : first_name ,last_name : last_name ,dob : dob ,male : male ,female : female , email_id : email_id ,password : password ,phone : phone , address : address , zipcode : zipcode
},
success: function(data) {
console.log(data);
}
});
} else {
return false;
}
return false;
});
</script>
<form id="registration-form">
<div class="register">
<div class="row">
<div class="col1">
<label for="first_name">First Name<span>*</span></label> <br/>
<input type="text" name="first_name"/>
<li class="first_name error"></li>
</div>
<div class="col2">
Last Name<br/>
<input type="text" name="last_name"/>
</div>
</div>
<div class="row">
<div class="col1">
Date Of Birth <br/>
<input type="text" name="dob"/>
</div>
<div class="col2">
Gender
<br/>
<input type="radio" name="gender" value="Male" /> Male
<input type="radio" name="gender" value="Female" /> Female
</div>
</div>
<div class="row">
<div class="col1">
Email<br/>
<input type="text" name="email_id"/>
<li class="email-id error"></li>
</div>
<div class="col2">
Password<br/>
<input type="password" name="password"/>
</div>
</div>
<div class="row">
<div class="col">
Address<br/>
<textarea name="address" rows="2" ></textarea>
</div>
</div>
<div class="row">
<div class="col1">
Zipcode<br/>
<input type="text" name="zipcode"/>
</div>
<div class="col2">
Phone<br/>
<input type="text" name="phone"/>
</div>
</div>
<div class="row">
<div class="col3">
<input class="" type="button" id="submit_enquiry" name="submit_enquiry" value="Submit Enquiry" />
</div>
</div>
</div>
</form>
Controller:
public function register_user()
{
$register_user = $this->member_model->add_user();
if($register_user)
{
return true;
}
else
{
return false;
}
}
Model :
public function add_user()
{
$add_user = array(
'mem_name'=> $this->input->post('first_name'),
'mem_lastname'=> $this->input->post('last_name'),
'mem_dob'=> $this->input->post('dob'),
'mem_gender'=> $this->input->post('gender'),
'mem_email'=> $this->input->post('email_id'),
'mem_address'=> $this->input->post('address'),
'mem_zipcode'=> $this->input->post('zipcode'),
'mem_phone'=> $this->input->post('phone'),
'mem_password'=> $this->input->post('password'),
);
$insert = $this->db->insert('membership', $add_user);
$insert_id = $this->db->insert_id();
return $insert_id;
}
Please help me ....

Answer 1

change in this in your ajax add apostrophe (')
data:{
'first_name' : first_name ,'last_name' : last_name ,'dob' : dob , etc...
},
add this in your controler member
function register(){
$add_user = array(
'mem_name'=> $this->input->post('first_name'),
'mem_lastname'=> $this->input->post('last_name'),
'mem_dob'=> $this->input->post('dob'),
'mem_gender'=> $this->input->post('gender'),
'mem_email'=> $this->input->post('email_id'),
'mem_address'=> $this->input->post('address'),
'mem_zipcode'=> $this->input->post('zipcode'),
'mem_phone'=> $this->input->post('phone'),
'mem_password'=> $this->input->post('password'),
);
$this->member_model->add_user($add_user);
}
in your member_model
function add_user($add_user){
$insert = $this->db->insert('membership', $add_user);
}

Answer 2

You can use jquery validate and use ajay on submit handler. Please try following code:
$(function () {
$("#FormId").validate({
errorElement: 'span', errorClass: 'help-block',
rules: {
Tag: {
required: true
},
Table: {
required: true
},
Field: {
required: true
},
},
messages: {
Tag: {
required: "Tag is required."
},
Table: {
required: "Table is required."
},
Field: {
required: "Field is required."
},
},
highlight: function (element) {
$(element).closest('.form-group').addClass('has-error');
},
unhighlight: function (element) {
$(element).closest('.form-group').removeClass('has-error');
},
success: function (element) {
$(element).closest('.form-group').removeClass('has-error');
$(element).closest('.form-group').children('span.help-block').remove();
},
errorPlacement: function (error, element) {
error.appendTo(element.closest('.form-group'));
},
submitHandler: function (form) {
$("#saveButton").button('loading');
$.post('', $("#FormId").serialize(), function (data) {
//Write your code here
});
}
});
});```