3

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!

Anders
  • 12,556
  • 24
  • 104
  • 151
  • Who tries to open customerSubmit page? – demalexx Feb 08 '12 at 16:48
  • Well, nobody tries to, but the fact is that I need to call a function to add the data to the database, and when I do, that function passes the user on to a page that is supposed to correspond to the Controller function name. And that's what I don't want... – Anders Feb 08 '12 at 20:03
  • @AndersSvensson I'm not familiar with PHP but have you looked at this answer [here](http://stackoverflow.com/questions/5098945/submit-external-form-without-leaving-the-page-site)? – sinemetu1 Feb 11 '12 at 16:28

2 Answers2

6

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();
});
Christoph
  • 50,121
  • 21
  • 99
  • 128
  • Unfortunately, that has the same effect as return false - i.e. the function in the Controller isn't called at all, which is no good, because I need to get to that function to do the actual database update. I just don't want to leave the page... I believe you're right that this is how ajax is supposed to work. You use event.preventDefault to stop normal submission and just posting the data. But then the function isn't called, and that's what I can't figure out... – Anders Feb 11 '12 at 12:45
  • are you sure, the controller isn't called? What is the returnvalue of your ajax data? could you post the data? add an error function and console.log(data), to see what happens. – Christoph Feb 11 '12 at 13:27
  • Ok, thanks, that last tip actually made me find the answer. When checking this I got info that made me realize it wasn't called because the url was wrong. I had in an external js file, and that doesn't work. So I created a js variable in a php file to be able to use the php function for base_url, and then I used this js variable in the ajax function. Then it worked! Thanks, I'll award you the bounty for leading me to find the answer. – Anders Feb 13 '12 at 15:56
0

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 () {
        ....
    });
});
demalexx
  • 4,661
  • 1
  • 30
  • 34
  • No, that's not a problem, I just left that part out to show the important parts. As I mentioned, the jQuery function works insofar as the submit calls the contactSubmit function in the action attribute of the form. The problem is just that CodeIgniter then wants to serve a page with the same name as this Controller function, and I don't want to change pages, I just want to call a function to pass data to the database... – Anders Feb 09 '12 at 06:45