Submit button doesn't work in Chrome

[scaiferw]

I have a form to edit a table record, and am having trouble with it in Chrome.

In IE7 it works fine, in Chrome it does nothing. It uses javascript because there is a sprite to change the button on hover.

Any ideas? I'm stumped and would appreciate any help you folks can give me.

<form name='editrecord' method='post' action='/LookupTableManager.php?action=update'><table class='listtable' style='margin:2em 0em;'><tr><th>Record ID:</th><th>19</th></tr>
<tr><td>name</td><td><input type='text' name='name' size='40' value='HQL-DMVC01' style='' /></td></tr>
<tr><td>comment</td><td><input type='text' name='comment' size='40' value='VCS - Console' style='' /></td></tr>
<input type='hidden' name='id' value='19' />
<input type='hidden' name='table' value='lu_virtual_servers' />
<input type='hidden' name='tablecode' value='9GYMNSUYK2D7RXY' />
<tr style='border:0px;'>
<td style='border:0px;'>

<input type='submit' name='submit' value='Update' style='display:none;width:auto;font-weight:bold;margin-top:1em;padding:4px 0px 2px 0px;' /><br />
<div class='buttonwrapper' style=''>
    <a class='ovalbutton' onclick="document.getElementById('submit').click()" href='javascript:return false;'><span>Update</span></a>
</div>
</td>
</tr>
</table>
</form>

The CSS for the ovalbutton class is:

a.ovalbutton{
    background: transparent url('../images/oval-blue-left.gif') no-repeat top left;
    display: block;
    float: left;
    font: normal 13px Tahoma; /* Change 13px as desired */
    line-height: 16px;              /* This value + 4px + 4px (top and bottom padding of SPAN) 
                                                             must equal height of button background (default is 24px) */
    height: 24px;                       /* Height of button background height */
    padding-left: 11px;             /* Width of left menu image */
text-decoration: none;
}

a:link.ovalbutton, a:visited.ovalbutton, a:active.ovalbutton{
    color: #494949; /*button text color*/
}

a.ovalbutton span{
    background: transparent url('../images/oval-blue-right.gif') no-repeat top right;
    display: block;
    padding: 4px 11px 4px 0; /*Set 11px below to match value of 'padding-left' value above*/
}

a.ovalbutton:hover{ /* Hover state CSS */
    background-position: bottom left;
}

a.ovalbutton:hover span{ /* Hover state CSS */
    background-position: bottom right;
    color: black;
}

.buttonwrapper{ /* Container you can use to surround a CSS button to clear float */
overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */
width: 100%;
}

[AleMonteiro]

Try this way:

<a class='ovalbutton' href='javascript: document.forms["editrecord"].submit();'><span>Update</span></a>

[scaiferw]

No joy, I'm afraid.

[AleMonteiro]

Does it throw any errors?

[scaiferw]

No, and unfortunately in my work environment I can't install any developer plugins to help narrow it down.

[AleMonteiro]

Chrome as a built in developers tools, just press ctrl+shift+I.

Try this: document.editrecord.submit();