29/8/2015
CodeIgniterjQueryAjaxPostData|FormGet
([Link]
Create Account
Sign In
Form Builder ([Link]
Lead Generation ([Link]
Email Marketing ([Link]
Online Payments ([Link]
Marketplace ([Link]
Blog ([Link]
Search Technical Topic Related to Form
Search form topics..
Categories
[Link]
1/16
29/8/2015
CodeIgniterjQueryAjaxPostData|FormGet
AdvertiseHere([Link]
([Link]
([Link]
[Link]
2/16
29/8/2015
CodeIgniterjQueryAjaxPostData|FormGet
([Link]
deal/?utm_source=inkthemes-marketing-bundle&utm_medium=banner&utm_campaign=product)
CodeIgniter jQuery Ajax Post
Data
Fugo Of FormGet ([Link]
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.
[Link]
3/16
29/8/2015
CodeIgniterjQueryAjaxPostData|FormGet
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
[Link]({
type:"POST",
url:"<?phpechobase_url();?>"+"[Link]/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
[Link]
4/16
29/8/2015
CodeIgniterjQueryAjaxPostData|FormGet
([Link]
DOWNLOAD SCRIPT
LIVE DEMO & GET WP THEME
How to run file:
[Link]
controller
[Link]
5/16
29/8/2015
CodeIgniterjQueryAjaxPostData|FormGet
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
[Link]
6/16
29/8/2015
CodeIgniterjQueryAjaxPostData|FormGet
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/[Link]">
<linkhref='[Link]
ans+Pro|Open+Sans+Condensed:300|Raleway'rel='stylesheet't
ype='text/css'>
<scriptsrc="[Link]
11.1/[Link]"></script>
<scripttype="text/javascript">
//Ajaxpost
$(document).ready(function(){
$(".submit").click(function(event){
[Link]();
varuser_name=$("input#name").val();
varpassword=$("input#pwd").val();
[Link]({
type:"POST",
url:"<?phpechobase_url();?>"+"[Link]/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([Link]);
jQuery("div#value_pwd").html([Link]);
}
}
});
});
});
</script>
</head>
<body>
<divclass="main">
<divid="content">
<h2id="form_head">CodelgniterAjaxPost</h2><br/>
<hr>
<divid="form_input">
<?php
[Link]
7/16
29/8/2015
CodeIgniterjQueryAjaxPostData|FormGet
<?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>";
[Link]
8/16
29/8/2015
CodeIgniterjQueryAjaxPostData|FormGet
echo"</div>";
echo"</div>";
?>
</div>
</div>
</body>
</html>
CSS File: [Link]
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;
[Link]
9/16
29/8/2015
CodeIgniterjQueryAjaxPostData|FormGet
margintop:262px;
}
#form_input
{
marginleft:50px;
margintop:36px;
}
label
{
marginright:6px;
fontweight:bold;
}
#form_button{
padding:021px15px15px;
position:absolute;
bottom:0px;
width:414px;
backgroundcolor:#FEFFED;
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;
[Link]
10/16
29/8/2015
CodeIgniterjQueryAjaxPostData|FormGet
borderradius:8px8px00;
color:rgb(97,94,94);
}
#result_show
{
margintop:35px;
marginleft:45px;
}
.input_box{
height:40px;
width:240px;
padding:20px;
borderradius:3px;
backgroundcolor:#FEFFED;
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.
[Link]
11/16
29/8/2015
CodeIgniterjQueryAjaxPostData|FormGet
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
[Link]
12/16
29/8/2015
CodeIgniterjQueryAjaxPostData|FormGet
daru79 says:
February 19, 2015 at 11:48 am ([Link]
This tutorial works perfectly!
REPLY (HTTP://[Link]/CODEIGNITER-JQUERYAJAX-POST/?REPLYTOCOM=165683#RESPOND)
Akshay Patil says:
February 21, 2015 at 7:46 am ([Link]
This tutorial helps lot for new bee like me.
Thanks:-)
REPLY (HTTP://[Link]/CODEIGNITER-JQUERYAJAX-POST/?REPLYTOCOM=167700#RESPOND)
Tom says:
March 2, 2015 at 12:31 pm ([Link]
Works Like A Charm.
Thanks!
REPLY (HTTP://[Link]/CODEIGNITER-JQUERYAJAX-POST/?REPLYTOCOM=175892#RESPOND)
Tonkla says:
April 1, 2015 at 9:09 am ([Link]
13/16
29/8/2015
CodeIgniterjQueryAjaxPostData|FormGet
post/#comment-198981)
Thanks for your tutorial !!
You really made a great explanation for beginner like me
REPLY (HTTP://[Link]/CODEIGNITER-JQUERYAJAX-POST/?REPLYTOCOM=198981#RESPOND)
Ashumi says:
April 11, 2015 at 5:17 am ([Link]
where is database table name
REPLY (HTTP://[Link]/CODEIGNITER-JQUERYAJAX-POST/?REPLYTOCOM=203427#RESPOND)
mazen mezlini says:
April 17, 2015 at 10:46 am ([Link]
great tuto , but how to get result back in case of checking from
database and resturn a result ?
REPLY (HTTP://[Link]/CODEIGNITER-JQUERYAJAX-POST/?REPLYTOCOM=205368#RESPOND)
Wa'el says:
April 24, 2015 at 7:45 pm ([Link]
thanks a lot for u ..I wish the best for ur team
REPLY (HTTP://[Link]/CODEIGNITER-JQUERY[Link]
14/16
29/8/2015
CodeIgniterjQueryAjaxPostData|FormGet
AJAX-POST/?REPLYTOCOM=206964#RESPOND)
ric says:
April 28, 2015 at 11:26 pm ([Link]
Merci. Ce code donne un trs bon exemple de la faon
dimplmenter AJAX dans CodeIgniter.
Very good !
Thanks.
REPLY (HTTP://[Link]/CODEIGNITER-JQUERYAJAX-POST/?REPLYTOCOM=207740#RESPOND)
Ibrahima says:
July 26, 2015 at 2:14 pm ([Link]
No word to qualify this tuto perfect
Thank you very.(Merci)
REPLY (HTTP://[Link]/CODEIGNITER-JQUERYAJAX-POST/?REPLYTOCOM=219523#RESPOND)
[Link]
15/16
29/8/2015
CodeIgniterjQueryAjaxPostData|FormGet
([Link]
FooterMenu
2015 MagnetBrains LLC. All rights reserved.
[Link]
16/16
