Question

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!

Answer 1

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();
});