7 replies to this topic

[shackrock]

I'm using the Alex G. method for CSS buttons (seen here: How to make sexy buttons with CSS ).

It works and looks great.

The ONLY issue I still have is that my forms no longer submit when the enter button is pressed... which drives me nuts. Is there a fix for this that anyone can let me know of?

[oldhendra]

Show more code might help us see,
but I guess it is probably because it's an anchor type button i.e. <a>, not <input> nor <button>.

In that case, have you tried applying Alex G's CSS to your own button?
Else, onclick = "document.your_form_name.submit()" must be added.

Hendra

[shackrock]

Yeah, I suppose I can try applying the same code to the <input> field... the issue is, the "span" is what actually calls the image to display at the correct length for the written text, which is why it's such an awesome solution in the first place.... So I don't know how I can get this same effect using the input field...

At the moment though, here's what I have done:

First, the CSS:

.clear { /* generic container (i.e. div) for floating buttons */
    overflow: hidden;
    width: 100%;
}

a.button {
    background: transparent url('bg_button_a.gif') no-repeat scroll top right;
    color: #0033FF;
    display: block;
    float: left;
    font: normal 13px arial, sans-serif;
    height: 24px;
    margin-right: 6px;
    padding-right: 18px; /* sliding doors padding */
    text-decoration: none;
}

a.button span {
    background: transparent url('bg_button_span.gif') no-repeat;
    display: block;
    line-height: 14px;
    padding: 5px 0 5px 18px;
    font-weight: bold;
} 


a.button:active {
    background-position: bottom right;
    color: #000066;
    outline: none; /* hide dotted outline in Firefox */
}

a.button:active span {
    background-position: bottom left;
    padding: 6px 0 4px 18px; /* push text down 1px */
} 

Next, the HTML call in the form:

<a class="button" alt="Update Profile" href="#" name="submit" onclick="this.blur(); document.forms['RegisterForm'].submit();"><span>Register</span></a>

That's an example for the registration form that I'm using the button on. It works for the submission, just not when I use the enter key unfortunately.



So yeah, no idea how to get this to work with an INPUT field.... not sure that it's possible in this same manor.

Further, the BUTTON field creates this horrible box around the button, and does not work correctly with the CSS code above... so it looks like the <a> tag with some javascript to force submit on ENTER would be the way to go - just can't figure out the best JS code for it...


EDIT:
Here's some things I've tried this morning so far...

First, here is some javascript code that I tried. The problem with this is that if ANY key is typed into the input box, the page starts reloading to see if it was the enter key. Not acceptable.

// Submit on Enter Key Script (SCOTT)
// Code for each inpnut field that should submit on enter:
// onKeyPress="return submitenter(this,event)"
// aka:  onKeyPress="return submitenter(document.forms['NAME-OF-FORM'].submit(),event)
function submitenter(myfield,e)
{
    var keycode;
    if (window.event) keycode = window.event.keyCode;
    else if (e) keycode = e.which;
    else return true;

    if (keycode == 13)
    {
        myfield.form.submit();
        return false;
    }
    else
        return true;
}

The next was to hide an input field along with my new <a> button. In this manor, the browser would still submit on enter, but they could also have a nice looking button to click. Well, the button does not do anything when it's clicked with this code, so also not acceptable.

<input type="submit" name="submit" style="visibility:hidden">
<a class="button" alt="Update Profile" href="#" name="submit" onclick="this.blur(); document.forms['updateProfile'].submit();"><span>Update Profile</span></a>

Thanks,
Scott

Edited by shackrock, 05 December 2010 - 12:39 AM.

[oldhendra]

Your 1st code works well on my browsers:), but not all:
#On FF 3.6.12, Chrome 8 and Safari 5 - clicking effect is working, and form submits.
#On IE8, I had to change href from # to javascript:void(0),
else page would jump to itself before submission. No clicking effect though.
#On Opera10, no clicking effect, but form submits.

So all 5 will submit either with ENTER or mouse click.
What browser you used which won't submit with ENTER key?

[shackrock]

Hm, it's not working for me, FF 3.6.12 or IE8.

This link is with no added javascript:
Login Form

[oldhendra]

Ups I've misunderstood you, sorry.
I thought it was an ENTER key while button had the focus.

Let's look again at the javascript code,
I think it would work if you just use it as

onKeyPress="return submitenter(this,event)"

and not

onKeyPress="return submitenter(document.forms['NAME-OF-FORM'].submit(),event)"

Haven't tested it through browsers though, just FF.

[shackrock]

You're a genius. Seems to work pretty good on FF... I'll have to try some other broswers later.

[oldhendra]

Okay. Let us know your next finding...:thumbup1: