codeigniter controller not running while using ajax

Question

This question is also related to my earlier post

jquery ajax form submit not working with codeigniter but working otherwise

I want to submit a form without loading a new php page. I am using codeigniter. When I run the controller with predefined values it works fine and is inserting the values in the database. But when I run ajax, my controller is not running or is not being called. This is my code :-

<script language='JavaScript' type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
<script>
    $('#submit_article').click(function(){

        var article_title = document.getElementById("title").value;
        var article_body = document.getElementById("body").value;

        $.ajax({
            url: '<?php echo base_url()."/main/submit_article";?>',
            type: 'POST',
            dataType: 'json',
            data: 'title='+article_title + '&body='+article_body,
            success: function(output_string){
                $('#result_table').append(output_string);
            }
        });
    });
</script>

<form name="article_form" method="POST" action="">
<input type="text" name="title" id="title" placeholder="Title for your article" />
<br>
<textarea rows="12" name="body" id="body" placeholder="Tell your story"></textarea>
<br>
<input type="submit" name="submit_article" id="submit_article" value="Post" />
</form>

change base_url to site_url if you haven't disabled to use index.php — Muhammad Raheel
– Muhammad Raheel, Commented Feb 24, 2013 at 17:57

Muhammad Raheel · Accepted Answer · 2013-02-24 18:04:23Z

1

Try code like this. Change submit to button

<script language='JavaScript' type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
<script>
    $('#submit_article').click(function(){
       $.ajax({
            url: $('#article_form').attr('url'),
            type: 'POST',
            dataType: 'json',
            data: $('#article_form').serialize(),
            success: function(output_string){
                $('#result_table').append(output_string);
            }
        });
    });
</script>

<form name="article_form" method="POST" action="<?php echo site_url('main/submit_article');?>">
    <input type="text" name="title" id="title" placeholder="Title for your article" />
    <br>
    <textarea rows="12" name="body" id="body" placeholder="Tell your story"></textarea>
    <br>
    <input type="button" id="submit_article" value="Post" />
</form>

answered Feb 24, 2013 at 18:04

Muhammad Raheel

19.9k7 gold badges69 silver badges106 bronze badges

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

2 Comments

Stacy J Over a year ago

hey this works but it is loading a new php page. I want it submit the form without loading a php page, thats y i wanted to use ajax

Muhammad Raheel Over a year ago

Well than in your controller you must be loading a view and passing it to div result_table when it is displaying the content. Try to handle it with jquery.

Code Prank · Accepted Answer · 2013-02-25 06:51:01Z

Try this:

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
<script type="text/javascript">
    $('#submit_article').click(function(e){
       e.prevenDefault();
       $.post(
         '<?php echo site_url("main/submit_article");?>',
         $('#article_form').serialize()
       ).success(function(resp) {
          $('#result_table').append(output_string);
       });
    });
</script>

<form id="article_form" method="post" action="<?php echo site_url('main/submit_article');?>">
    <input type="text" name="title" id="title" placeholder="Title for your article" />
    <br>
    <textarea rows="12" name="body" id="body" placeholder="Tell your story"></textarea>
    <br>
    <input type="submit" id="submit_article" value="Post" />
</form>

Collectives™ on Stack Overflow

codeigniter controller not running while using ajax

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related