Using Submit Button with AJAX

[eluser]Fielder[/eluser]
I have an existing form that uses

Code:

<?=form_open('store_form/newstorelocation', $form_attributes); ?>
.
.
<input type="submit" value="Submit" id="submit_newStoreLoc" class="btTxt submit" />
</form>

which executes and loads a "successful submit" page. I know how to make ajax work behind-the-scenes to not reload/refresh an entire page, but how can I set it up so it does NOT load the $this->load->view() in the store_form/newstorelocation function. The problem is with type="submit" it will load the path in my <form> element.

Maybe just take out the $this->load->view() and return nothing at the end of the newstorelocation function??


I do not want to use <input type="button />

[eluser]darkhouse[/eluser]
If you're using ajax correctly, your form action won't matter, which means the controller function it calls shouldn't even be processed. You need another function that processes the ajax request and returns a result. It's good practice to keep your form action working in case someone doesn't have javascript enabled, your form will still process.

[eluser]Fielder[/eluser]
Ok, I've got the function that processes the ajax request and returns are result. How do I keep the form from posting when the submit button is pressed? The <input type="submit" /> is posting to my path in my <form>.
I have

Code:

$("#submit_newStoreLoc").click(function(){
   $.post("procRequest.php");
}):

Or do a return false; in the jQuery?


Looked around and found this, looks like a plugin.

Code:

<form id="myForm" action="comment.php" method="post">
    Name: <input type="text" name="name" />
    Comment: <textarea name="comment"></textarea>
    <input type="submit" value="Submit Comment" />
</form>

Code:

$('#myForm').ajaxForm(function() {
                alert("Thank you for your comment!");
            });

[eluser]darkhouse[/eluser]
so you're adding fields on the fly AND processing everything via ajax? to get a form to not submit, I believe you can use this jQuery:

Code:

$('#myForm').submit(function(){ return false; });

[eluser]Fielder[/eluser]
What I did was use an ajax jQuery plugin http://jquery.malsup.com/form/#getting-started.

Then I removed my redirects and $this->load->view from the controllers process function, and after validations and error checks passed, the plugin above will take the function(server) response and post it to the page dynamically without reload/redirect/refresh.

Thanks for the help.
Oh and yes, at the end of my jQuery plugin I used return false;

Here's the jQuery code to help anyone else out.

Code:

$("#Form_storelocation").submit(function(){
            val = $(this).valid();
            if (val == false)
            {
                return false;
            }
            else
            {
                $(this).ajaxSubmit({
                    target: '#status_message'
                });
                $("input:text:visible:enabled:first").focus().select();
            }
            return false;
        });