Javascript: can't find element

I've run into a strange problem: I'm trying to get a <form> element from javascript but I'm unable to.

my html code is created dynamically by php:

<form id="form_color_{$color->id}" action="?com=saveColor" method="POST">

            <!--some input elements-->
            <a href="javascript:saveColor({$color->id})"> <img src="{$webSiteUrl}assets/img/admin/floppy_disk_24.png" /> <span> Save</span> </a>
       </form>

so the page will contain various form_color_ forms like form_color_1 form_color_2 etc...

when the image is clicked this javascript function is called:

function saveColor(id){
    $("form_color_"+id).submit();
}

the funtion correctly receive the id param but it doesn't submit the form.

if I try to get the form element I get null

function saveColor(id){
    form = '#form_color_'+id;
    var doc = document.getElementById(form);
    alert(doc);
   $("form_color_1").submit();
}

the function works perfectly with other forms.

here's an example of the code produced by php:

<form id="form_color_1" action="?com=saveColor" method="POST">
            <!--some input elements-->
            <a  href="javascript:saveColor(1)"> <img src="http://10.10.10.46/c5liveOnLine/assets/img/admin/floppy_disk_24.png" /> <span> Save</span> </a>

       </form>

what am I missing?