Using jquery.validate to validate submitted form based on which form is used
<p>I currently have two forms on a page, an update form and an add form, what I want to do is on submission of either form, pull the id of that form, along with the action, validate the particular form, then load the return from the webserver.</p>

<p>I got it to work by specifically using each form's id, but the js code is repeated twice, id prefer it to be a bit more dynamic.</p>

<pre><code>&lt;script src="assets/js/jquery-1.8.2.js"&gt;&lt;/script&gt;
&lt;script src="assets/js/bootstrap.js"&gt;&lt;/script&gt;
&lt;script src="assets/js/jquery.validate.js"&gt;&lt;/script&gt;


&lt;div id="myTabContent" class="tab-content"&gt;
        &lt;div class="tab-pane active" id="update"&gt;                
            &lt;form action="php/update_level.php" method="post" id="form1"&gt;
                &lt;h2&gt;Update Level&lt;/h2&gt;
                &lt;label&gt;Select Bag Level&lt;/label&gt;
                &lt;select id="target" name="levelSelect"&gt; &lt;option selected&gt;Select&lt;/option&gt;
                    &lt;?php
                    foreach($result as $row)
                    {?&gt;
                        &lt;option&gt;&lt;?php echo $row['Level'] ?&gt;&lt;/option&gt;
                    &lt;?php
                    }
                    ?&gt;
                &lt;/select&gt;
                &lt;div id="upForm"&gt;
                &lt;/div&gt;
                &lt;div class="message"&gt;

                &lt;/div&gt;
            &lt;/form&gt;
        &lt;/div&gt;
        &lt;div class="tab-pane" id="addNew"&gt;                
            &lt;form action="php/add_level.php" id="form2"&gt;
                &lt;h2&gt;New Level&lt;/h2&gt;    
                &lt;label&gt;Level&lt;/label&gt;
                &lt;input class="required" maxlength="10" minlenght="1" type="text" name="level" placeholder="Level"&gt;
                &lt;label&gt;Description&lt;/label&gt;
                &lt;textarea class="required" name="description"  rows="3" placeholder="Description of level type"&gt;&lt;/textarea&gt;  
                &lt;/br&gt;
                &lt;div class="message"&gt;

                &lt;/div&gt;
                &lt;div class="form-actions"&gt;
                &lt;button id="inFormSub" type="submit" class="btn btn-large btn-primary"&gt;Submit&lt;/button&gt;
                &lt;/div&gt;
            &lt;/form&gt;                   
        &lt;/div&gt;
    &lt;/div&gt;
</code></pre>

<p>JS:</p>

<pre><code>$('form').submit(function(e){
e.preventDefault();
var id=$(this).attr('id');
var action=$(this).attr('action');

console.log(action + ' ' + id); //works outputs update_bag.php form1 on submit of form1
                                //add_bag.php form2 on submit of form2
$(id).validate({
    submitHandler: function() {


        console.log(action + ' ' + id); //doesnt work
        $(id).find('div.message').load(action, $(id).serializeArray());            
    }
});  
</code></pre>

<p>JS that works</p>

<pre><code>    $('#form1').validate({
    submitHandler: function() {
        var action = $('#form1').attr('action');

        console.log(action + ' validate1');
        $('#form2').find('div.message').load(action, $('#form1').serializeArray());            
    }
});    

$('#form2').validate({

    submitHandler: function() {
        var action = $('#form2').attr('action');

        console.log(action + ' validate2');
        $('#form2').find('div.message').load(action, $('#form2').serializeArray());            
    }
});   
</code></pre>

<p>My knowledge of JS and Jquery is small at best, and im probably staring the solution right in the face</p>
