codeigniter jquery ajax post data _ formget

29/8/2015 CodeIgniter jQuery Ajax Post Data | FormGet

http://www.formget.com/codeigniterjqueryajaxpost/ 1/16

Search Technical Topic Related to Form

(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/)

Categories

Search form topics..

http://www.formget.com/online-payment/

http://www.formget.com/lead-generation/

http://www.formget.com/

http://www.formget.com/blog/

http://www.formget.com/marketplace/

http://www.formget.com/mailget/

http://www.formget.com/formget/



Advertise Here (https://buysellads.com/buy/detail/265115/zone/1303475?

(http://www.formget.com/app/)

(http://www.formget.com/mailget/)

https://buysellads.com/buy/detail/265115/zone/1303475?utm_source=site_265115&utm_medium=website&utm_campaign=adhere&utm_content=zone_1303475

http://www.formget.com/mailget/

http://www.formget.com/app/



(http://inkthemes.com/offers/ultimate-marketing-

deal/?utm_source=inkthemes-marketing-bundle&utm_medium=banner&utm_campaign=product)

CodeIgniter jQuery Ajax Post

Data

jQuery’s 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:

Before proceeding further we consider that you are a

bit familiar with CodeIgniter PHP framework.

With the help of an example you will learn how to post

data to a controller using the CodeIgniter jQuery Ajax

method.

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

$.ajax({name:value, name:value, ... })

http://www.formget.com/author/formget-fugo/

http://inkthemes.com/offers/ultimate-marketing-deal/?utm_source=inkthemes-marketing-bundle&utm_medium=banner&utm_campaign=product



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

In this example first the controller will load the view

page. After data submission jQuery Ajax post function

send data to controller’s 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

jQuery.ajax({type: "POST",url: "<?php echo base_url(); ?>" + "index.php/ajax_post_controller/user_data_submit",dataType: 'json',data: {name: user_name, pwd: password},success: function(res)



(http://www.formget.com/wp-

content/uploads/2014/11/codeigniter_ajax_post.png)

How to run file:

DOWNLOAD SCRIPT

LIVE DEMO & GET WP THEME

http://localhost/codeigniter_ajax_post/index.php/ajax_post_controller

http://www.formget.com/tutorial/live_demo_ajax/ajax_post.php

http://www.formget.com/wp-content/uploads/2014/11/codeigniter_ajax_post.png



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.

View File : ajax_post_view.php

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Ajax_Post_Controller extends CI_Controller {

// Show view Pagepublic function index(){$this‐>load‐>view("ajax_post_view");}

// This function call from AJAXpublic function user_data_submit() {$data = array('username' => $this‐>input‐>post('name'),'pwd'=>$this‐>input‐>post('pwd'));

//Either you can print value or you can send value to databaseecho json_encode($data);}}



In view file submits data to jQuery function by class

name and post data to controller’s function

“ajax_post_controller/submit”

<html><head><title>CodeIgniter ajax post</title><link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>css/style.css"><link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro|Open+Sans+Condensed:300|Raleway' rel='stylesheet' type='text/css'><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script type="text/javascript">

// Ajax post$(document).ready(function() {$(".submit").click(function(event) {event.preventDefault();var user_name = $("input#name").val();var password = $("input#pwd").val();jQuery.ajax({type: "POST",url: "<?php echo base_url(); ?>" + "index.php/ajax_post_controller/user_data_submit",dataType: 'json',data: {name: user_name, pwd: password},success: function(res) {if (res){// Show Entered ValuejQuery("div#result").show();jQuery("div#value").html(res.username);jQuery("div#value_pwd").html(res.pwd);}}});});});</script></head><body><div class="main"><div id="content"><h2 id="form_head">Codelgniter Ajax Post</h2><br/><hr><div id="form_input"><?php



<?php

// Form Openecho form_open();

// Name Fieldecho form_label('User Name');$data_name = array('name' => 'name','class' => 'input_box','placeholder' => 'Please Enter Name','id' => 'name');echo form_input($data_name);echo "<br>";echo "<br>";

// Password Fieldecho form_label('Password');$data_name = array('type' => 'password','name' => 'pwd','class' => 'input_box','placeholder' => '','id' => 'pwd');echo form_input($data_name);?></div><div id="form_button"><?php echo form_submit('submit', 'Submit', "class='submit'"); ?></div><?php// Form Closeecho form_close(); ?><?php

// Display Result Using Ajaxecho "<div id='result' style='display: none'>";echo "<div id='content_result'>";echo "<h3 id='result_id'>You have submitted these values</h3><br/><hr>";echo "<div id='result_show'>";echo "<label class='label_output'>Entered Name :<div id='value'> </div></label>";echo "<br>";echo "<br>";echo "<label class='label_output'>Entered Password :<div id='value_pwd'> </div></label>";echo "<div>";echo "</div>";



CSS File: style.css

Styling HTML elements.

echo "</div>";echo "</div>";?></div></div></body></html>

body {font‐family: 'Raleway', sans‐serif;}.main{width: 1015px;position: absolute;top: 10%;left: 20%;}#form_head{text‐align: center;background‐color: #FEFFED;height: 66px;margin: 0 0 ‐29px 0;padding‐top: 35px;border‐radius: 8px 8px 0 0;color: rgb(97, 94, 94);}#content {position: absolute;width: 450px;height: 340px;border: 2px solid gray;border‐radius: 10px;}#content_result{position: absolute;width: 450px;height: 192px;border: 2px solid gray;border‐radius: 10px;margin‐left: 559px;



margin‐top: ‐262px;}#form_input{margin‐left: 50px;margin‐top: 36px;}label{margin‐right: 6px;font‐weight: bold;}

#form_button{padding: 0 21px 15px 15px;position: absolute;bottom: 0px;width: 414px;background‐color: #FEFFED;border‐radius: 0px 0px 8px 8px;border‐top: 1px solid #9A9A9A;}.submit{font‐size: 16px;background: linear‐gradient(#ffbc00 5%, #ffdd7f 100%);border: 1px solid #e5a900;color: #4E4D4B;font‐weight: bold;cursor: pointer;width: 300px;border‐radius: 5px;padding: 10px 0;outline: none;margin‐top: 20px;margin‐left: 15%;}.submit:hover{background: linear‐gradient(#ffdd7f 5%, #ffbc00 100%);}.label_output{color:#4A85AB;margin‐left: 10px;}#result_id{text‐align: center;background‐color: #FCD6F4;height: 47px;margin: 0 0 ‐29px 0;padding‐top: 12px;



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.

border‐radius: 8px 8px 0 0;color: rgb(97, 94, 94);}#result_show{margin‐top: 35px;margin‐left: 45px;}.input_box{height:40px;width:240px;padding:20px;border‐radius:3px;background‐color:#FEFFED;margin‐left:30px;}input#date_id {margin‐left: 10px;}input#name_id {margin‐left: 53px;}input#validate_dd_id {margin‐left: 65px;}div#value {margin‐left: 140;margin‐top: ‐20;}input#pwd {margin‐left: 40px;}div#value_pwd {margin‐left: 160;margin‐top: ‐20;}



Leave a Reply

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.



daru79 says:

February 19, 2015 at 11:48 am (http://www.formget.com/codeigniter-jquery-ajax-post/#comment-165683)

This tutorial works perfectly!

Akshay Patil says:

February 21, 2015 at 7:46 am (http://www.formget.com/codeigniter-jquery-ajax-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-ajax-post/#comment-175892)

Works Like A Charm.

Thanks!

Tonkla says:

April 1, 2015 at 9:09 am (http://www.formget.com/codeigniter-jquery-ajax-

REPLY (HTTP://WWW.FORMGET.COM/CODEIGNITER-JQUERY-AJAX-POST/?REPLYTOCOM=165683#RESPOND)



http://www.formget.com/codeigniter-jquery-ajax-post/?replytocom=175892#respond





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-ajax-post/#comment-203427)

where is database table name

mazen mezlini says:

April 17, 2015 at 10:46 am (http://www.formget.com/codeigniter-jquery-ajax-post/#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-ajax-post/#comment-206964)

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




REPLY (HTTP://WWW.FORMGET.COM/CODEIGNITER-JQUERY-







Éric says:

April 28, 2015 at 11:26 pm (http://www.formget.com/codeigniter-jquery-ajax-post/#comment-207740)

Merci. Ce code donne un très bon exemple de la façon

d’implémenter AJAX dans CodeIgniter.

Very good !

Thanks.

Ibrahima says:

July 26, 2015 at 2:14 pm (http://www.formget.com/codeigniter-jquery-ajax-post/#comment-219523)

No word to qualify this tuto perfect

Thank you very….(Merci)

AJAX-POST/?REPLYTOCOM=206964#RESPOND)






codeigniter jquery ajax post data _ formget

Documents

post data

marketing http

form http

ajax code

builder http

generation http

payments http

controller file