not able to pass data to controller using Ajax with jquery ,CodeIgniter (PHP framework)

Question

passing data to controller using AJAX this is script i have written to pass data to controller but data is not passed to the controller

this is the input data i want to pass

    <div class="form-group">
        <table class="table table-striped b-t b-light text-sm">
            <thead>
                <tr>
                <th>ID</th>
                <th>Question</th>
                <th>answer</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($quet as $row) { ?>
                <tr>
                <td ><?php echo $row['id']; ?></td>
                <td>
                <?php echo $row['question']; ?>
                </td>
                <td><input type='text' name='name' required="required" class="form-control" placeholder='Enter Your Answer'></td>
                </tr>
                <?php } ?>  
            </tbody>
        </table>
    </div>
<button class="btn btn-primary nextBtn btn-lg pull-right" id ="next" type="button" >Next</button>

and the script

<script>
           $(document).ready(function($){
    $("#next").click(function(){

     var array = $("name").val()

     $.ajax({
          type: "POST",
          datatype:"json",
          url: BASE_URL+"/student/add",
          data: 'data='+array,
          contentType:'application/json',
          processData: false,              
          error: function(response) {console.log('ERROR '+Object.keys(response)); },
          success: function(response) {
              console.log(response)

          }});

        return false;
    });  
});
</script>

and the student controller

function add(){

      if($this->student_model->add($this->input->post()))
        {
        $response['success'] = TRUE;
        }
        else
        {
        $response['success'] = FALSE;
        }
        echo json_encode($response);  
    }

first of all you've to change the name of the input textbox from 'name'. Then you've to assign an id or a unique class to it. after that you could call the jquery as var array = $("#id").val() — Hoja
– Hoja, Commented Jan 7, 2015 at 8:27
@HardikRanpariya yes id ="next" button it is in code i have edit the question — SoftwareDev
– SoftwareDev, Commented Jan 7, 2015 at 9:08

Kiren S · Accepted Answer · 2015-01-07 09:03:27Z

1

Try this. Your data may be in wrong format

data: {'data':array}

EDIT

 <input type='text' name='answer' id='answer' required="required" class="form-control" placeholder='Enter Your Answer' />
<script>
   $(document).ready(function($){
        $("#next").click(function(){

        var array = $("#answer").val() // see the change name to id, see the html also

         $.ajax({
             type: "POST",
              url: BASE_URL+"/student/add",
              data:{'data':array},
              error: function(response) {console.log('ERROR '+Object.keys(response)); },
              success: function(response) {
                 console.log(response)
              }});
         });  
    });
 </script>

edited Jan 7, 2015 at 9:03

answered Jan 7, 2015 at 8:27

Kiren S

3,1178 gold badges43 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kiren S Over a year ago

Don't forget to check the browser utility to monitor the ajax request when u click on the next button

Hoja · Accepted Answer · 2015-01-07 08:47:31Z

0

Also check the array is received properly in you JS

<script>
  $(document).ready(function($){
    $("#next").click(function(){

     var array = $("#id").val()

     $.ajax({
          type: "POST",
          datatype:"json",
          url: BASE_URL+"/student/add",
          data: {
            'data':array
          },
          contentType:'application/json',
          processData: false,              
          error: function(response) {console.log('ERROR '+Object.keys(response)); },
          success: function(response) {
              console.log(response)

          }});

        return false;
    });  
});
</script>

In your controller you should change $this->input->post() to$this->input->post('data')

edited Jan 7, 2015 at 8:47

answered Jan 7, 2015 at 8:29

Hoja

1,2371 gold badge15 silver badges36 bronze badges

Comments

Jenis Patel · Accepted Answer · 2015-01-07 08:55:19Z

0

From your mentioned code, you need to check these points :

1) As you are using contentType:'application/json', so use the data format as data: {'data':array}

2) Finally check whether the url url: BASE_URL+"/student/add", is accessible or not.

Hope this helps :)

edited Jan 7, 2015 at 8:55

answered Jan 7, 2015 at 8:47

Jenis Patel

1,6211 gold badge13 silver badges20 bronze badges

4 Comments

Kiren S Over a year ago

var array = $("name").val() what is the relation ship with class here? If there is a class "name" then it must be referred like $(".name").val() (dot infront)

Jenis Patel Over a year ago

@Kiren, yes you are right, I did not notice it, I thought it is $(".name").val() but it was $("name").val().

SoftwareDev Over a year ago

@jenis input text is contain in this div

<div class="form-group"> 	<table class="table table-striped b-t b-light text-sm"> 		<thead> 			<tr> 			<th>ID</th> 			<th>Question</th> 			<th>answer</th> 			</tr> 		</thead> 		<tbody> 			<?php foreach ($quet as $row) { ?> 			<tr> 			<td ><?php echo $row['id']; ?></td> 			<td> 			<?php echo $row['question']; ?> 			</td> 			<td><input type='text' name='name' required="required" class="form-control" placeholder='Enter Your Answer'></td> 			</tr> 			<?php } ?>   		</tbody> 	</table> </div>

Jenis Patel Over a year ago

@SoftwareDev, Just try and make use of Firebug (Mozilla addon) Console so that you can debug and figure out the root cause. And just try this ajax url value => url: BASE_URL+"/index.php/student/add",

Hardik Ranpariya · Accepted Answer · 2015-01-07 09:00:17Z

0

You need to change following in your code.

In the Script

<script>
$(document).ready(function($){
    $("#next").click(function(){

     var array = $("input[name]").val();

     $.ajax({

          type: "POST",
          url: BASE_URL+"/student/add",
          data: {'data':array},            
          error: function(response) {console.log('ERROR '+Object.keys(response)); },
          success: function(response) {
              console.log(response)

          },
          datatype:"json"
     });

        return false;
    });  
});
</script>

In the Student Controller

function add(){

      if($this->student_model->add($this->input->post('data')))
        {
            $response['success'] = TRUE;
        }
        else
        {
            $response['success'] = FALSE;
        }
        echo json_encode($response);  
    }

I hope this help.

edited Jan 7, 2015 at 9:00

answered Jan 7, 2015 at 8:32

Hardik Ranpariya

1,0512 gold badges11 silver badges27 bronze badges

4 Comments

Kiren S Over a year ago

var array = $("#name").val() for this he has to add id attribute in his input element?

SoftwareDev Over a year ago

@Hardik Ranpariya $("#name").val() so i have to assign id to input field id="name"

Hardik Ranpariya Over a year ago

i already change this. you can now not need to assign id to input field id="name"

SoftwareDev Over a year ago

@Hardik Ranpariya well its not showing any error but data is not submitted

Collectives™ on Stack Overflow

not able to pass data to controller using Ajax with jquery ,CodeIgniter (PHP framework)

4 Answers 4

1 Comment

Comments

4 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

4 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related