7934

I try to submit form by jQuery ajax() in Codeigniter … but nothing happen …:(

sorry for this repeated & repeated question , but I really don't know how to solve.

there was one button and two text_input , when I click this button,if it's work,I will see a alert and show "success" to me , but unfortunately , I just can see nothing.

nothing !!

I don't know why :(

please help me , please ...... I read many tutorials in stackoverflow or other website about codeigniter , but I don't find anything can solve my problem , please teach me guys.

here is a very simple form below

<strong>file name: test.php</strong>

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test </title> <link rel="stylesheet" href="<?=base_url("/css/bootstrap.css")?>"> <link rel="stylesheet" href="<?=base_url("/css/basic.css")?>"> <script src="<?=base_url("/js/jquery-1.10.2.min.js")?>"></script> <script src="<?=base_url("/js/bootstrap.js")?>"></script> <script src="<?=base_url("/js/practice.js")?>"></script> </head> <body> <div style="margin:19px"> <form id="test_form" method="post"> USER:<input id="num" name="num" type="text" ><br> NAME:<input id="name" name="name" type="text" ><br> <input id="submit" name="submit" class="btn" type="submit" value="save"> </form> </div> </body> </html>

I want to submit data in this form by jQuery Ajax() , the JS file is below

<strong>file name: practice.js</strong>

$(document).ready(function(){ $("#test_form").submit(function(e){ e.preventDefault(); var tdata= $("#test_form").serializeArray(); $.ajax({ type: "POST", url: "http://localhost/index.php/static_data/test_add", dataType: json, data: tdata, success:function(tdata) { alert('SUCCESS!!'); } }); }); });

and below was my controller

<strong>file name:static_data</strong>

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); class Static_data extends CI_Controller { public function test() { $this->load->view('test'); } public function test_add() { $this->load->model("paper"); $this->paper->test_add(); } }

and this file below was my model set

<strong>file name:paper.php</strong>

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); class Paper extends CI_Model { function __construct() { parent::__construct(); } function test_add() { $this->load->helper('form'); $this->load->helper('html'); $this->load->database(); $tdata = array( 'num' => $this->input->post('num'), 'name' => $this->input->post('name'), ); $this->db->insert('test_table',$tdata); } }

Answer1:

Try this -> In your test.php file, give the action attribute as

action="<?php echo site_url();?>/static_data/test_add"

Then, in your practice.js file:

$('#test_form').submit(function() { var tdata= $("#test_form").serializeArray(); var that = $(this), url = that.attr('action'), type = that.attr('method'), data = tdata;

Now, for testing, in your success function in practice.js, just write the following:

success: function(response) { console.log(response); }

Here, the response you get is what your controller returns to you, now to test that, just type echo "hello"; or anything, just echo out something. (This is because you said teach me :) )

Now to see if this is working, open deveoper tools (if you are in google chrome), go to the console tab and then from bottom, select log, if everything is fine, it will return your echoed message written in your controller.

Also, to see if the form is submitted correctly, select the network tab, when you hit the submit button, the network tab will show you if the data has been submitted correctly or not.

Try this, if doesn't work, leave a comment.

Answer2:

I think you can easily solve this problem by this simple ajax request given below:

$(document).ready(function(){ $("#test_form").on("submit", function(event){ event.preventDefault(); $.ajax({ url : base_url+"static_data/test_add", type : "post", data : $("#test_form").serialize(), dataType : "json", success(data) { alert('SUCCESS!!'); } }); }); });

Before doing that, in your view file (test.php) on the head setion please write this

<script> var base_url = "<?php echo base_url(); ?>"; </script>

Answer3:

Try this :

Practice.js

$(document).ready(function(){ $("#test_form").submit(function(e){ e.preventDefault(); var tdata= $("#test_form").serializeArray(); $.ajax({ type: "POST", url: 'http://localhost/[CodeIgniterDirectory]/index.php/static_data/test_add', data: tdata, success:function(tdata) { alert('SUCCESS!!'); }, error: function (XHR, status, response) { alert('fail'); } }); }); });

Recommend

  • Only allow certain files types to be added during an upload
  • cell spacing in div table
  • Floated image with variable width and heading with background image
  • how to display data from 1st point on words on y axis for line chart in d3.js
  • Webgrid not refreshing after delete MVC
  • Custom validator control occupying space even though display set to dynamic
  • Play WS (2.2.1): post/put large request
  • How do I alternate colors in Flat List (React Native)
  • Listbox within Listbox and scrolling trouble in Windows Phone 7 Silverlight
  • Get data from AJAX - How to
  • Change multiple background-images with jQuery
  • FileReader+canvas image loading problem
  • Initializer list vs. initialization method
  • Java Scanner input dilemma. Automatically inputs without allowing user to type
  • Insert into database using onclick function
  • Deselecting radio buttons while keeping the View Model in synch
  • Spring security and special characters
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • Why doesn't :active or :focus work on text links in webkit? (safari & chrome)
  • Trying to switch camera back to front but getting exception
  • Change an a tag attribute in JavaScript based on screen width
  • what is the difference between the asp.net mvc application and asp.net web application
  • jquery mobile loadPage not working
  • Unanticipated behavior
  • Matrix multiplication with MKL
  • How to delete a row from a dynamic generate table using jquery?
  • json Serialization in asp
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • Free memory of cv::Mat loaded using FileStorage API
  • Angular 2 constructor injection vs direct access
  • Memory offsets in inline assembly
  • How to stop GridView from loading again when I press back button?
  • Turn off referential integrity in Derby? is it possible?
  • Authorize attributes not working in MVC 4
  • Programmatically clearing map cache
  • Busy indicator not showing up in wpf window [duplicate]
  • Binding checkboxes to object values in AngularJs
  • Python/Django TangoWithDjango Models and Databases
  • Net Present Value in Excel for Grouped Recurring CF
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize