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.

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.

• php
• javascript
• jquery
• ajax
• codeigniter

• what is that return false do? What ever result it will be called always . is it? – zod Commented Nov 19, 2010 at 16:29

3 Answers 3

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

Possible solution. I'm sticking to your code

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

function form_success_client( i ) {
   formData = $(i).parents('form').serialize();
   $.post( "/mm/index.php/site/form_success_client/", formData, function(loaded) { $('.contentarea').append(loaded) }, 'html' );
}

EDIT: And yes, as maggie said, you should bind form_success_client(this); return false; like that

<form onsubmit="form_success_client(this); return false;">

not to the button

You can use jquery .post , .get or .ajax

based on SUCCESS or returned data you can submit the form

http://api.jquery./jQuery.get/

http://api.jquery./jQuery.post/

http://api.jquery./jQuery.ajax/