[jQuery] jQuery Form Plugin with a submit button outside of the form

[johnHoysa]

I have my form working great as long as my submit button is contained
within the form tags. But the design calls for the submit button to be
outside of the form. Any suggestions?

Sample code and diagrams are below.

I appreciate your help!

John

Hopefully this will help show you what I need -->
<form>
my form here
</form>
<div> </div>
<div> Submit button </div>


Working code to submit Form. Lets call this Example A Code-->

$('#addNewTasks').ajaxForm(function() {
   $.get('includes/tasks.cfm',{},function(data){
      $('#newTasks').html(data);
   })
});

Also I have this code which works as well if this will make life
easier for me in the long run. Lets call this Example B Code -->

<!--- var options = {
                        beforeSubmit:  showRequest,  // pre-submit callback
                        success:       showResponse,  // post-submit callback
        };

        function showRequest(formData, jqForm, options) { // pre-
submitcallback
                    alert('About to submit');
                    var formElement = jqForm[0];
                    return true;
        }

        $('#addNewTasks').ajaxForm(options);

        function showResponse(responseText, statusText)  {  // post-
submitcallback
                        $.get('includes/tasks.cfm',{},function(data){
                                 $('#newTasks').html(data);
                                 $('ul:last').fadeIn("slow");
                        })
            alert('Submitted and should have worked');
        }


working code for the form it self please note that the submit button
is contained within the form tags and I need this working with the
submit button outside of the form tags.-->

<form action="includes/session.cfm" id="addNewTasks" method="post">
                             <ul class="addTaskTopBorder">
                                 <li class="list-width-third">
                                     <select name="formName"
id="nameForm">
                                         <cfoutput query="chooseForm">
 
<option>#chooseForm.formNames#</option>
                                         </cfoutput>
                                     </select>
                                 </li>
                                 <li class="list-width-third">
                                     <select name="assignTo"
id="assignTo">
                                         <cfoutput query="assignTo">
 
<option>#assignTo.assignPerson#</option>
                                         </cfoutput>
                                     </select>
                                 </li>
                                <li class="list-width-third">
                                <input id="targetDate"
name="targetDate" class="pickdate {validate:{required:true, messages:
{required:'Please fill in.'}}}"/>
                    </li>
                             </ul>

                      <!--- <input type="submit" name="AddToQuery"
class="submitTasksBtn" id="AddToQuery" value="Update Task List" /> ---
>
                </form>

Some code I tried that did not work with Example A Code -->

$('#AddToQuery').click(function() {
   $('#addNewTasks').ajaxSubmit(function() {
      $.get('includes/tasks.cfm',{},function(data){
         $('#newTasks').html(data);
      })
   });
})

And here is some code for submitting Example B Code -->
$("#AddToQuery").click(function() {
   $('#addNewTasks').ajaxSubmit(options);
      return true;
})

Thanx for reading!
John