Member Avatar for 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%;
}
  • 2 Contributors
  • 5 Replies
  • 389 Views
  • 2 Hours Discussion Span
  • Latest Post Latest Post by AleMonteiro

Dani AI

Generated

Quick diagnosis and a practical fix.

The markup shown by creates two problems that Chrome exposes but IE7 can silently tolerate: the form has an input named "submit" (which creates a named property that can shadow the form's submit() method), and the link's onclick expects an element id that does not exist. That combination makes calls like the ones suggested earlier behave differently in Chrome.

Simple, safe fixes (pick one)

  • Rename the control so it does not use the reserved name submit (for example name="updateBtn"), and give it an id if you intend to target it by getElementById.
  • Prefer using a real button element (type="submit") styled like your oval button — it keeps semantics and keyboard access.
  • If you cannot rename the control, call the native submit method explicitly so it isn't confused with the element:
var form = document.forms['editrecord'];
HTMLFormElement.prototype.submit.call(form);

Troubleshooting checklist

  • Open Chrome DevTools (Ctrl+Shift+I) and watch the Console for errors such as "is not a function" or "cannot call method 'click' of null". These point directly to a missing id or a shadowed submit method.
  • Inspect the form in the Elements panel to confirm element id/name values and whether the submit control actually exists where your script expects it.
  • Avoid href="javascript:…" patterns; attach an event listener and call event.preventDefault() if you must use an anchor.

Notes tied to earlier replies

's suggestion to call the form submit method is correct in principle; it fails in Chrome only if a form control is named submit. Renaming that field or using the prototype-call above resolves the cross-browser mismatch.

Recommended Answers

All 5 Replies

Member Avatar for AleMonteiro

Try this way:

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

No joy, I'm afraid.

Member Avatar for AleMonteiro

Does it throw any errors?

Member Avatar for scaiferw

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

Member Avatar for AleMonteiro

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

Try this: document.editrecord.submit();

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.