How do I use ajax to submit post data using jquery?

Question

I'm having trouble getting ajax to work with jquery and codeigniter. I've followed multiple tutorials but nothing seems to work. I'm trying to implement an upvote button that sends post data using ajax to be inserted into a db. Any help is much appreciated.

The code from my view:

<pre>
<?php foreach($query->result() as $row): ?>
<div>
<form action="" method="post">
<input type="hidden" name="story_id" value=<?php echo $row->id; ?>>
<input type="submit" name="story_id" class="button" id="submit_btn" value=<?php echo      $row->id;?>>
</form>
</div>
<?php endforeach; ?>
</pre>

The jquery script I'm using:

<pre>
<script type="text/javascript">
$(document).ready(function(){
$(".button").click(function(){
    var form_data = {
        story_id: $(this).val()
    };
    $.ajax({
        url: "<?php echo base_url('cyoa/upvote'); ?>",
        type: 'POST',
        data: form_data,
        success: function() 
            {
            $("#upvote").hide();
            }
    });
    return false;
});
});

</script>
</pre>

The first problem I see (well, I see a few) is that you're outputting forms in a loop, so which one do you want to use? — Damien Pirsy
– Damien Pirsy, Commented Oct 5, 2012 at 17:25
I'm trying to enable an upvote button per post. Will I have to have a new script for each upvote? — OOrion
– OOrion, Commented Oct 5, 2012 at 17:34

JvdBerg · Accepted Answer · 2012-10-05 17:28:04Z

1

Best way is to serialize your form data and send that to the server:

<script type="text/javascript">
$(document).ready(function(){
  $(".button").click(function(){
    var form_data = $("#myform").serialize();
    $.ajax({
        url: "<?php echo base_url('cyoa/upvote'); ?>",
        type: 'POST',
        data: form_data,
        success: function() 
            {
            $("#upvote").hide();
            }
    });
    return false;
  });
});

</script>

To access the form, give it a id:

<form id="myform" action="" method="post">

answered Oct 5, 2012 at 17:28

JvdBerg

21.8k8 gold badges40 silver badges55 bronze badges

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

6 Comments

OOrion Over a year ago

I tried this and it's still not working. I have no idea what's wrong.

OOrion Over a year ago

upvote is a method of the cyoa controller: public function upvote() { $this->load->model('Voting_model'); $message = $this->Voting_model->upvote(); $this->load->view('ajax_upvote'); }

JvdBerg Over a year ago

add a var_dump($_POST) in your controller method, to see what is posted.

OOrion Over a year ago

I tried var_dump but can't seem to get it to produce an output. I apologize for being such a noob.

OOrion Over a year ago

the var_dump is producing the following: array(1) { ["story_id"]=> string(4) "5678" }

|

obe6 · Accepted Answer · 2012-10-05 17:23:21Z

0

I strongly suggest to look at this plugin (and use it) :

JQuery Form Plugin

answered Oct 5, 2012 at 17:23

obe6

1,9411 gold badge17 silver badges28 bronze badges

Comments

GBD · Accepted Answer · 2012-10-05 17:27:09Z

0

You can use form serialization to pass on data to php as below

First Give ID "storyform" to your form tag

$.ajax({
        url: "<?php echo base_url('cyoa/upvote'); ?>",
        type: 'POST',
        data: $("#storyform").serialize(),
        success: function() 
            {
            $("#upvote").hide();
            }
    });

answered Oct 5, 2012 at 17:27

GBD

16k2 gold badges49 silver badges52 bronze badges

Comments

Udaya Sri · Accepted Answer · 2012-10-06 10:40:41Z

try using json objects,

view....

<pre>
<?php foreach($query->result() as $row): ?>
<div>
<form action=" controller_name/upvote" method="post">
<input type="hidden" name="story_id" id = "story_id" value=<?php echo $row->id; ?>>
<input type="submit" name="story_id" class="button" id="submit_btn" value=<?php     echo      $row->id;?>>
</form>
</div>
<?php endforeach; ?>
 </pre>

Then your controller,

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

class Controller_name extends CI_Controller {

function __construct()
{
    parent::__construct();

    //loading libraries
    $this->load->helper(array('form','url'));

    $this->load->library('form_validation');


}
//##############################################################################
    function upvote(){


    //setting validation rules
    $this->form_validation->set_rules('story_id', 'story Id', 'required|xss_clean');


    if ($this->form_validation->run() == true){

        //if validations ok, send the  data to  database
        $this->load->model('your_model');

        $params = ($this->input->post('story_id');

        $query = 'INSERT INTO table_name (story_id) VALUES(?)';
        $result = $this->your_model_name->method_name($query,$params);

        echo '{"validation_result": "passed"}';

    }
    else{
        $output = '{"story_id":"'.form_error('story_id').'"}';

        echo $output;
        }

}
}
?>

Then Your java script file

$(document).ready(function(){
$('#submit_btn').live('click',function(){

    var form_data = {
                    $story_id: $('#story_id').val()
                };

                $.ajax({
                    type: "POST",
                    url: baseurl+"controller_name/upvote",
                    dataType: "json",
                    data : form_data,
                    success: 
                        function(data){

                            if(data.validation_result == "passed"){

                                $("#upvote").hide();


                            }
                            else{
                                //form_validation errors
                                }
                        }
                    });

        return false;   
    });
});

Collectives™ on Stack Overflow

How do I use ajax to submit post data using jquery?

4 Answers 4

6 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related