post value are null when use ajax

Viewed 409

I have this view

<div class="w3-row w3-padding-64">
<div class="w3-twothird w3-container">
<form id='create_delivery'  method="post" class="form-horizontal" 
enctype="multipart/form-data">
 from  <input type="text" name="first_address"><br>

To <input type="text" name="second_address" ><br>
<label>weight</label>
<input type="number" name="weight"   ><br>

<label>price</label>
<input type="number" name="price"   ><br>

<label>description</label><br>
<textarea name="description"></textarea>
<br>

<input type="submit" value="Submit">
</form>
</div>

</div>

and I sent a post request by ajax to the controller method

 $(document).ready(function(){
 $("#create_delivery").submit(function(evt){
 var postData = $(this).serialize();
 $.ajax({

 url: baseURL + "deliverys/create_delivery",

 type:'post',

 data:postData,

 dataType:'json',

 success:function(data){

 alert('delivery created');

 }
 });
 evt.preventDefault();
      });
 });

this is the controller

  public function create_delivery(){
  if(isset($_POST)):
  $first_address=   $this->input->post('first_address');
  $second_address=  $this->input->post('second_address');
  $description=      $this->input->post('description');
  $Weight=           $this->input->post('Weight');
  $price=            $this->input->post('price');

  $data = array(
  "first_address"=>$first_address,
  "second_address"=>$second_address,
  "description"=>$description,
  "Weight"=>$Weight,
  "price"=>$price

  );
  $this->deliverys_model->create_delivery($data);
  endif;
  }

the problem that all the values are coming null, it works when I send the post request without ajax but with ajax the values are NULL

Error Number: 1048 INSERT INTO deliverys (first_address, second_address, description, ready_to_buy, Weight, price) VALUES (NULL, NULL, NULL, NULL, NULL, NULL)

4 Answers

I think you not getting form data with var postData = $(this).serialize().

Try like this $("#create_delivery").serialize()

If there is no <input type="file"> in form don't use enctype="multipart/form-data"

$(document).ready(function(){
 $("#create_delivery").submit(function(evt){
 evt.preventDefault();

 $.ajax({
   url: baseURL + "deliverys/create_delivery",
   type:'POST',
   data:$("#create_delivery").serialize(),
   dataType:'json',
   success:function(data){
     alert('delivery created');
   }
 });
 evt.preventDefault();
      });
 });

Try these

$first_address = $_POST['first_address'];
$second_address = $_POST['second_address'];
$description = $_POST['description'];
$Weight = $_POST['weight'];
$price = $_POST['price'];

Instead of

$first_address=   $this->input->post('first_address');
$second_address=  $this->input->post('second_address');
$description=      $this->input->post('description');
$Weight=           $this->input->post('Weight');
$price=            $this->input->post('price');

I didn't know the context of $this->input in your code, maybe you could show more of your code, but above code should be work.

you need change 'type' to 'method'

$.ajax({
 url: baseURL + "Trips/create_trip",
 method:'POST',
 data:postData,
 dataType:'json',
 success:function(data){
 alert('Trip created');
 }
 });

.serialize(); is used to create get method string ... if you want to post data use ajax change your js with

$("#create_delivery").submit(function(evt){

 evt.preventDefault();

var first_address = $( "input[name='first_address']" ).val();
var second_address = $( "input[name='second_address']" ).val();
var weight = $( "input[name='weight']" ).val();
var price = $( "input[name='price']" ).val();
var description = $( "input[name='description']" ).val();

 $.ajax({

 url: baseURL + "deliverys/create_delivery",

 type:'post',

data : {first_address:first_address,second_address:second_address,weight:weight,price:price,description:description},

 dataType:'json',

 success:function(data){

 alert('delivery created');

 }
 });
      });
Related