CodeIgniter JQuery Ajax Post Data - FormGet

29/8/2015
CodeIgniterjQueryAjaxPostData|FormGet
(http://www.formget.com/)
Create Account
Sign In
Form Builder (http://www.formget.com/formget/)

Lead Generation (http://www.formget.com/lead-generation/)
Email Marketing (http://www.formget.com/mailget/)
Online Payments (http://www.formget.com/online-payment/)
Marketplace (http://www.formget.com/marketplace/)
Blog (http://www.formget.com/blog/)
Search Technical Topic Related to Form

Search form topics..
Categories
http://www.formget.com/codeigniterjqueryajaxpost/
1/16
29/8/2015
AdvertiseHere(https://buysellads.com/buy/detail/265115/zone/1303475?
(http://www.formget.com/app/)
(http://www.formget.com/mailget/)
2/16
29/8/2015
(http://inkthemes.com/offers/ultimate-marketing-
deal/?utm_source=inkthemes-marketing-bundle&utm_medium=banner&utm_campaign=product)
CodeIgniter jQuery Ajax Post

Data
Fugo Of FormGet (http://www.formget.com/author/formget-fugo/)
jQuerys Ajax methods really made easy to post a data

and return that data without refreshing the page. We
can apply this jQuery Ajax post in CodeIgniter as well.
Syntax for Ajax:
$.ajax({name:value,name:value,...})
Before proceeding further we consider that you are a

bit familiar with CodeIgniter PHP framework.
Withthe help of an example you will learn how to post
data to a controller using the CodeIgniter jQuery Ajax
method.
3/16
29/8/2015
In this post we have created two files

ajax_post_view.php in view folder and
ajax_post_controller.php in controller folder.
The Ajax code in a view page will look like as shown
below:
Syntax
jQuery.ajax({
type:"POST",
url:"<?phpechobase_url();?>"+"index.php/ajax_post_con
troller/user_data_submit",
dataType:'json',
data:{name:user_name,pwd:password},
success:function(res)
In this example first the controller will load the view

page. After data submission jQuery Ajax post function
send data to controllers function and after performing
some task it will return data to view page without
refreshing.
Below given are the codes for the files we have
mentioned along with CSS file to design the view page.
You can copy the below code or can also download
the files.
Watch the live demo or download code from the link

given below
4/16
29/8/2015
(http://www.formget.com/wpcontent/uploads/2014/11/codeigniter_ajax_post.png)
DOWNLOAD SCRIPT
LIVE DEMO & GET WP THEME
How to run file:

http://localhost/codeigniter_ajax_post/index.php/ajax_post_
controller
5/16
29/8/2015
Tutorial Scripts in detail

Below are the details of the code used in this tutorial
with proper explanation.
Controller File : ajax_post_controller.php
In this controller file first index function will load the
view file.
<?phpif(!defined('BASEPATH'))exit('Nodirectscriptac
cessallowed');
classAjax_Post_ControllerextendsCI_Controller{
//ShowviewPage
publicfunctionindex(){
$this>load>view("ajax_post_view");
}
//ThisfunctioncallfromAJAX
publicfunctionuser_data_submit(){
$data=array(
'username'=>$this>input>post('name'),
'pwd'=>$this>input>post('pwd')
);
//Eitheryoucanprintvalueoryoucansendvaluetodatab
ase
echojson_encode($data);
}
}
View File : ajax_post_view.php
6/16
29/8/2015
In viewfilesubmits data to jQuery function by class

name and post data to controllers function
ajax_post_controller/submit
<html>
<head>
<title>CodeIgniterajaxpost</title>
<linkrel="stylesheet"type="text/css"href="<?phpechobas
e_url();?>css/style.css">
<linkhref='http://fonts.googleapis.com/css?family=Source+S
ans+Pro|Open+Sans+Condensed:300|Raleway'rel='stylesheet't
ype='text/css'>
<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.
11.1/jquery.min.js"></script>
<scripttype="text/javascript">
//Ajaxpost
$(document).ready(function(){
$(".submit").click(function(event){
event.preventDefault();
varuser_name=$("input#name").val();
varpassword=$("input#pwd").val();
jQuery.ajax({
type:"POST",
url:"<?phpechobase_url();?>"+"index.php/ajax_post_con
troller/user_data_submit",
dataType:'json',
data:{name:user_name,pwd:password},
success:function(res){
if(res)
{
//ShowEnteredValue
jQuery("div#result").show();
jQuery("div#value").html(res.username);
jQuery("div#value_pwd").html(res.pwd);
}
}
});
});
});
</script>
</head>
<body>
<divclass="main">
<divid="content">
<h2id="form_head">CodelgniterAjaxPost</h2><br/>
<hr>
<divid="form_input">
<?php
7/16
29/8/2015
<?php
//FormOpen
echoform_open();
//NameField
echoform_label('UserName');
$data_name=array(
'name'=>'name',
'class'=>'input_box',
'placeholder'=>'PleaseEnterName',
'id'=>'name'
);
echoform_input($data_name);
echo"<br>";
echo"<br>";
//PasswordField
echoform_label('Password');
$data_name=array(
'type'=>'password',
'name'=>'pwd',
'class'=>'input_box',
'placeholder'=>'',
'id'=>'pwd'
);
echoform_input($data_name);
?>
</div>
<divid="form_button">
<?phpechoform_submit('submit','Submit',"class='submit'"
);?>
</div>
<?php
//FormClose
echoform_close();?>
<?php
//DisplayResultUsingAjax
echo"<divid='result'style='display:none'>";
echo"<divid='content_result'>";
echo"<h3id='result_id'>Youhavesubmittedthesevalues</h
3><br/><hr>";
echo"<divid='result_show'>";
echo"<labelclass='label_output'>EnteredName:<divid='va
lue'></div></label>";
echo"<br>";
echo"<br>";
echo"<labelclass='label_output'>EnteredPassword:<divid
='value_pwd'></div></label>";
echo"<div>";
echo"</div>";
8/16
29/8/2015
echo"</div>";
echo"</div>";
?>
</div>
</div>
</body>
</html>
CSS File: style.css

Styling HTML elements.
body{
fontfamily:'Raleway',sansserif;
}
.main
{
width:1015px;
position:absolute;
top:10%;
left:20%;
}
#form_head
{
textalign:center;
backgroundcolor:#FEFFED;
height:66px;
margin:0029px0;
paddingtop:35px;
borderradius:8px8px00;
color:rgb(97,94,94);
}
#content{
position:absolute;
width:450px;
height:340px;
border:2pxsolidgray;
borderradius:10px;
}
#content_result{
position:absolute;
width:450px;
height:192px;
border:2pxsolidgray;
borderradius:10px;
marginleft:559px;
9/16
29/8/2015
margintop:262px;
}
#form_input
{
marginleft:50px;
margintop:36px;
}
label
{
marginright:6px;
fontweight:bold;
}
#form_button{
padding:021px15px15px;
position:absolute;
bottom:0px;
width:414px;
borderradius:0px0px8px8px;
bordertop:1pxsolid#9A9A9A;
}
.submit{
fontsize:16px;
background:lineargradient(#ffbc005%,#ffdd7f100%);
border:1pxsolid#e5a900;
color:#4E4D4B;
fontweight:bold;
cursor:pointer;
width:300px;
borderradius:5px;
padding:10px0;
outline:none;
margintop:20px;
marginleft:15%;
}
.submit:hover{
background:lineargradient(#ffdd7f5%,#ffbc00100%);
}
.label_output
{
color:#4A85AB;
marginleft:10px;
}
#result_id
{
textalign:center;
backgroundcolor:#FCD6F4;
height:47px;
margin:0029px0;
paddingtop:12px;
10/16
29/8/2015
borderradius:8px8px00;
color:rgb(97,94,94);
}
#result_show
{
margintop:35px;
marginleft:45px;
}
.input_box{
height:40px;
width:240px;
padding:20px;
borderradius:3px;
marginleft:30px;
}
input#date_id{
marginleft:10px;
}
input#name_id{
marginleft:53px;
}
input#validate_dd_id{
marginleft:65px;
}
div#value{
marginleft:140;
margintop:20;
}
input#pwd{
marginleft:40px;
}
div#value_pwd{
marginleft:160;
margintop:20;
}
Conclusion:
So in this tutorial we learned about how we can post
data by jQuery Ajax in CodeIgniter. Keep reading our
blog posts for getting in touch with more coding tricks.
11/16
29/8/2015
Comments and Responses

Your email address will not be published. Required
fields are marked *
Name (required)
Mail (will not be published) (required)
Website
Message
Submit Comment
Notify me when new comments are added.
Leave a Reply
12/16
29/8/2015
daru79 says:
February 19, 2015 at 11:48 am (http://www.formget.com/codeigniter-jqueryajax-post/#comment-165683)
This tutorial works perfectly!

REPLY (HTTP://WWW.FORMGET.COM/CODEIGNITER-JQUERYAJAX-POST/?REPLYTOCOM=165683#RESPOND)
Akshay Patil says:

February 21, 2015 at 7:46 am (http://www.formget.com/codeigniter-jqueryajax-post/#comment-167700)
This tutorial helps lot for new bee like me.

Thanks:-)
Tom says:
March 2, 2015 at 12:31 pm (http://www.formget.com/codeigniter-jquery-ajaxpost/#comment-175892)
Works Like A Charm.

Thanks!
Tonkla says:
April 1, 2015 at 9:09 am (http://www.formget.com/codeigniter-jquery-ajaxhttp://www.formget.com/codeigniterjqueryajaxpost/
13/16
29/8/2015
post/#comment-198981)
Thanks for your tutorial !!

You really made a great explanation for beginner like me
Ashumi says:
April 11, 2015 at 5:17 am (http://www.formget.com/codeigniter-jquery-ajaxpost/#comment-203427)
where is database table name

mazen mezlini says:

April 17, 2015 at 10:46 am (http://www.formget.com/codeigniter-jquery-ajaxpost/#comment-205368)
great tuto , but how to get result back in case of checking from
database and resturn a result ?
Wa'el says:
April 24, 2015 at 7:45 pm (http://www.formget.com/codeigniter-jquery-ajaxpost/#comment-206964)
thanks a lot for u ..I wish the best for ur team

REPLY (HTTP://WWW.FORMGET.COM/CODEIGNITER-JQUERYhttp://www.formget.com/codeigniterjqueryajaxpost/
14/16
29/8/2015
AJAX-POST/?REPLYTOCOM=206964#RESPOND)
ric says:
April 28, 2015 at 11:26 pm (http://www.formget.com/codeigniter-jquery-ajaxpost/#comment-207740)
Merci. Ce code donne un trs bon exemple de la faon

dimplmenter AJAX dans CodeIgniter.
Very good !
Thanks.
Ibrahima says:
July 26, 2015 at 2:14 pm (http://www.formget.com/codeigniter-jquery-ajaxpost/#comment-219523)
No word to qualify this tuto perfect

Thank you very.(Merci)
15/16
29/8/2015
(http://www.formget.com/app/)
FooterMenu
2015 MagnetBrains LLC. All rights reserved.
16/16

CodeIgniter JQuery Ajax Post Data - FormGet

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

CodeIgniter JQuery Ajax Post Data - FormGet

Încărcat de

Drepturi de autor:

Formate disponibile

29/8/2015

Form Builder (http://www.formget.com/formget/)

Search Technical Topic Related to Form

CodeIgniter jQuery Ajax Post

Fugo Of FormGet (http://www.formget.com/author/formget-fugo/)

jQuerys Ajax methods really made easy to post a data

Before proceeding further we consider that you are a

In this post we have created two files

In this example first the controller will load the view

Watch the live demo or download code from the link

LIVE DEMO & GET WP THEME

How to run file:

Tutorial Scripts in detail

View File : ajax_post_view.php

In viewfilesubmits data to jQuery function by class

CSS File: style.css

Comments and Responses

Mail (will not be published) (required)

This tutorial works perfectly!

Akshay Patil says:

This tutorial helps lot for new bee like me.

Works Like A Charm.

Thanks for your tutorial !!

where is database table name

mazen mezlini says:

thanks a lot for u ..I wish the best for ur team

Merci. Ce code donne un trs bon exemple de la faon

No word to qualify this tuto perfect

2015 MagnetBrains LLC. All rights reserved.

S-ar putea să vă placă și