Forum Moderators: open
My submit buttons are printed as follows:
<div id="uniqueCssId">
<script type="text/javascript">
<!--
function submitThisForm(){ document.thisForm.submit(); }
document.write('<span><span><a href="javascript:submitThisForm()"><span>Button Text</span></a></span></span>');
// -->
</script><noscript><input type="submit" name="button_label" value="Button Text" alt="Button Text" title="Button Text" /></noscript></div>
The above is done so that an image can be placed on top of variable text ala the Sliding Doors.
When we hit the enter key on the form, it no longer submits the form. Any help would be... helpful.
This is not a windows update problem.
The reason it's written as above is the following:
We have image-styled buttons for submission that may have variable width international text in them. Using the above, I can set images as backgrounds for the outer SPAN objects, use the Anchor and inner SPAN to position, and use the DIV to locate the item.
The NOSCRIPT is used because JavaScript is used to submit my form through the anchor. The Noscript replaces the entire item with an equivalent (ugly) form submit button.
I believe the problem stems from my use of the javascript call within the anchor tag, but I cannot solve.
It's never worked ever since I implemented the above, which was months ago.
I looked at a similar problem some months ago. After some research and experimentation, I decided that it was impossible to achieve without using a standard submit button. I did, however, find an extemely complex script that claimed to solve the problem - but I didn't try it.
Incidentally, when using document.write to create tags, closing tags should be written thus :-
document.write('<\/span');
I have read that browsers may interpret </ as </script>.
Kaled.
At the end of your javascript add in a simple version of the standard HTML submit button, but define the style to hide it from view. This gives you a submit button that the browser will recognize -- clicking on the visible image-button invokes the javascript; hitting "Enter" causes the form button to function in the usual way.
In other words, start with something like this:
<input type=\"submit\" value=\"Submit\" class=\"halfhid\">
Then define the class "halfhid" to hide the form button:
Originally I simply defined it as "width:0px; height:0px", so that that user sees nothing (1px/1px works just as well). That works just fine for IE. But in other browsers (e.g., Firefox) a small form button (about 16px by 4px) still appears, to the right of the image-button.
Solution? I have found two alternatives:
Alternative A:
1) add "display: block" to force the form button to show BELOW the image button
2) add "border: 1px solid #[color];" The color should match the background of the area below the button.
If for some reason this doesn't work for you (e.g. if you can't match the background below the image button, or display:block causes problems) you may use . . .
Alternative B:
1) (do NOT include "display:block") add "margin-left:-16px" to force the form button back into the area of the image-button (increase the number if you wish to push it further into the image)
2) use the "border" style above, but match the color of the image-button.
Drawback: If the mouseover image has a different background color (as they usually do) a small rectangle of the original image color will appear, but this will be only briefly, and if the mouseover image color is not radically different, the rectangle may be barely noticeable.
One other thought... take a look at [search.msn.com...] and see how they solved this problem.
Kaled.
hiding a standard submit button is quite sneaky
I suppose it would be sneaky if you were fooling people and getting them to submit something without their knowledge. But using it to present the user with a nicer looking button AND give them exactly the same functionality as the form button alone --the functionality they EXPECT when they see your button-- what is "sneaky" about that?!
take a look at [search.msn.com...] and see how they solved this problem.
I assume you are referring to the Search button?Yes, one can also go that route.
In this case you would start with <input="submit" class="[mysubmit]". . . >. Define styles, using the desired image as a "background-image". (MSN does so by assigning the tag an ID#, but I usually use a class.)
By default the image will appear inside the button-box with the typical button border. To get rid of this simply add "border-width:0px" to the style(s).
To give you the idea, I have a button described thus in the stylesheet:
.blogin {
background-image: url(/images/login_button.gif);
width: 100px; height: 21px;
padding: 0px; border-width: 0px;
}
MSN doesn't have a mouseover (which I, perhaps incorrectly, assumed joshdm wanted). That can be accomplished by defining a new class with the mouseover image as the background-image. So, to replace the style above I have:
.bloginhi {
background-image: url(/images/login_button_hi.gif);
width: 100px; height: 21px;
padding: 0px; border-width: 0px;
}
To change the style onmouseover, simply add to the input tag:
onmouseover="this.className='[newclass]'"
onmouseout="this.className='[originalclass]'"
One other thing to be aware of with this method. The text you list as the VALUE of the submit button WILL appear on top of the button-image. You can, of course, give this text its own style. If the text is already part of your image, simply leave the value blank.
FWIW, the html for my image-button looks like this:
<input type='submit' value='' name='Login' class="blogin" onMouseOver="this.className='bloginhi'" onMouseOut="this.className='blogin'">
I did hesitate to list this approach because there is one place I tried to use it that will not function unless I fill in the VALUE. Not sure why that is so in just that one case. . . open to suggestions. . . .
Kaled.
Kaled.
Granted, you couldn't use CSS for a rollover, but you could always use a little javascript to do this. No JS? - they don't get a rollover. No big deal.
This way there's no messing about with NOSCRIPT alternatives, and on the purist accessibility tip, no semantic misuse of elements.
the best method might be a zero-height div. Assuming this is rendered correctly, it should be reliable.
I agree. In fact, it is what I was proposing above (though I think that may have been lost in the details).
But please note that non-IE browsers will still show a small formbutton, no matter what you do. That is why it is necessary to stylize that formbutton to blend in with its background. The only reliable way I have found to do so is to give that button a solid 1px border the same color as the background on which it will be displayed.
I meant sneaky in a good (i.e. clever) way. I definitely didn't mean "underhand".
Sorry for misunderstanding and if I seemed to take offense. (I was more surprised.) I don't think the problem in this case is so much the international nature of the forum as the fact that it is so difficult to discern "tone of voice" from the written word.
(An ancient problem, even for the best writers. In fact, according to some commentators, the apostle Paul once wrote to one of his churches something like: "I wish I were with you so you could hear my tone of voice.")
