CODEWITHSUNDEEP
jqueryform-submitcodeigniter-2
Anders
Anders

Reputation: 12716

Submit form with jQuery and CodeIgniter without page refresh

I want to submit a form using jQuery in a CodeIgniter application. However, the function called in the Controller keeps wanting to send the user to a page (with the same name as the Controller function) that doesn't exist.

I have tried this:

$('#contactForm').submit(function () {

});

And this:

$('#contactForm').submit(function () {
    dataString = $("#contactForm").serialize();
    $.ajax({
        type:"POST",
        url:"<?php echo base_url(); ?>about/contactSubmit",
        data:dataString,

        success:function (data) {
            alert('test');
        }

    });

    return false;  //stop the actual form post !important!
});

The form is a simple form with id "contactForm". The jQuery submit function works in that it goes to the "contactSubmit" function in the Controller. This function looks like this:

public function contactSubmit()
{

    $this->load->model('customer_model');
    $this->customer_model->addCustomer();
}

So it calls an addCustomer function in the Model that adds the info in the database. All that works fine. But then it tries to open a "customerSubmit" page that doesn't exist, and that's what I want to avoid. I just want it to stay on the same page, that has a jQuery function for telling the user that the form has been submitted ok.

So how do I do this?

EDIT:

It seems the key to not being sent to a new page by the Controller function contactSubmit is to return false in the submit jQuery function, judging from every tutorial on the subject I can find, but...when I do include that, the Controller function isn't called at all. This means that only the first option above really calls the Controller function (i.e. the .submit without return false).

So what am I doing wrong here? If I'm supposed to pass data to the database using a submit, but the "return false" stops it from actually calling the function in the Controller?

EDIT 2: Found the answer, see my comment to Christophs post!

Upvotes: 3

Views: 8420

Answers (2)

Christoph
Christoph

Reputation: 51181

Just a guess: Try event.preventDefault() to stop the default behaviour of the submit action which is defined in <form action="..."> (Which is normally sending the form-data and forwarding to some kind of "request received" page).

The code would be something like this:

$('#contactForm').submit(function (event) {
    dataString = $("#contactForm").serialize();
    $.ajax({
        type:"POST",
        url:"<?php echo base_url(); ?>about/contactSubmit",
        data:dataString,

        success:function (data) {
            alert('test');
        }

    });
    event.preventDefault();
});

Upvotes: 6

demalexx
demalexx

Reputation: 4751

Probably you assign submit handler when page isn't loaded yet, so js doesn't see any form object, try to assign it in page load event handler like this:

$(function() {
    $('#contactForm').submit(function () {
        ....
    });
});

Upvotes: 0

Related Questions