I can populate hidden divs only after the second form submit

Question

I can populate hidden divs only after the second form submit. After the first submit there is an error. Why? Using jQuery Form Plugin. Any idea? Thanks.

$(document).ready(function() { 
// get ID from the form name:
    $('form').submit(function(e){
     targetNum = this.name;
// call processing page:
    $('#formTarget' + targetNum).ajaxForm({ 
// populate DIV
        target: '#divTarget' + targetNum, 
        success: function() { 
            $('#divTarget' + targetNum).fadeIn('slow'); 
        } 
    }); 
    });
});

<div id='divTarget1'></div>
<form id='formTarget1' name='1' action='process2.asp' method='post'>
<input type='hidden' name='MapaID' value='1'>
<input type='submit' value='OK'>
</form>

<div id='divTarget2'></div>
<form id='formTarget2' name='2' action='process2.asp' method='post'>
<input type='hidden' name='MapaID' value='2'>
<input type='submit' value='OK'>
</form>

<div id='divTarget3'></div>
<form id='formTarget3' name='3' action='process2.asp' method='post'>
<input type='hidden' name='MapaID' value='3'>
<input type='submit' value='OK'>
</form>

Answer 1

try this:

$(document).ready(function() {
    $(':submit').click(function(e) {
        targetNum = $('form').has(this).prop('name');
        $('#formTarget' + targetNum).ajaxForm({
            target: '#divTarget' + targetNum,
            success: function() {
                $('#divTarget' + targetNum).fadeIn('slow');
            }
        });
        return false;
    });
});