Question

This is probably going to sound backwards. I need for a form to submit return false, but still submit the form.

I have a form being pulled into a page via ajax (jquery load function), and on submit I’d like to display a graphic and some text in the same div, rather than redirect the page.

This is my submit button (codeigniter):

<?php $attributes = array('class' => 'button', 'onclick' => 'form_success_client(); return false;', 'name' => 'submit'); echo form_submit( $attributes, 'Save'); ?>

and in html:

<input type="submit" onclick="form_success(); return false;" class="button" value="Save" name="submit">

and the javascript function which loads the success message:

 function form_success_client() { // form success
    $('.contentarea').load("/mm/index.php/site/form_success_client/");
 }

That all works fine, but unsurprisngly it doesn’t submit the form. I know that the proper way to do this, is to pass the form submission over to jquery, but I’m not sure how to do that. Could do with a quick fix if possible (until I have time to sort a better solution out), however all suggestions appreciated.

Thanks!

ANSWER:

This is what worked for me, just a slight edit of Maggie’s answer:

function form_success_client(obj) {
    $.ajax({
       type: 'POST',
       url: $(obj).attr('action'),
       data: $(obj).serialize(),
       success: function(msg){
         $('.contentarea').load("/mm/index.php/site/form_success_client/");
       }
     });
     return false;
}

Note the $() wrapping obj on url and data.

Answer 1

bind your JS onclick-event to the form (not the button) like this
'onclick' => 'form_success_client(this); return false;'

and change your function to

function form_success_client(obj) {
    $.ajax({
       type: "POST",
       url: obj.attr("action"),
       data: obj.serialize(),
       success: function(msg){
         $('.contentarea').load("/mm/index.php/site/form_success_client/");
       }
     });
}

untested