Page 1 of 2
customized button in HTML form
Posted: Sun Jan 18, 2004 11:59 am
by orangeapple
Hi !
I would like to use a customized "submit" button in a HTML form which calls an php file.
i would like this :
<a href="(Empty Reference!)"><img src="../media/bouton_submit1.jpg" width="80" height="25" border="0"></a>
with the fonction of this :
<input type="submit" value="submit" width="80" height="25" border="0">
Who can help ?
Posted: Sun Jan 18, 2004 12:31 pm
by jaxn
Why not just use:
<input type="image" src="../media/bouton_submit1.jpg" name="submit">
-Jackson
Posted: Sun Jan 18, 2004 1:05 pm
by orangeapple
yesssss ! it works, thanks a lot Jaxn !
Posted: Sun Jan 18, 2004 1:12 pm
by vigge89
just a question, how do you submit a form trough a link (href)?
Posted: Sun Jan 18, 2004 3:08 pm
by Gen-ik
vigge89 wrote:just a question, how do you submit a form trough a link (href)?
Give the form an id like
<form id="myForm"> and then you can submit it from any link using
<a href="javascript:document.forms.myForm.submit()">Submit Form</a>.
css ;)
Posted: Sun Jan 18, 2004 7:41 pm
by dethron
it is a better idea, to use css.
since it is easy to modify or to change,
i think you have more options in using css.
1) Create a css file and link it from your php files.
2) In css create such a class :
Code: Select all
.xinput {
BORDER-RIGHT: #5c6ba2 1px solid;
PADDING-RIGHT: 0px;
BORDER-TOP: #8ca5b5 1px solid;
FONT-WEIGHT: bold;
FONT-SIZE: 11px;
BACKGROUND-IMAGE: url(images/buttonface.gif);
VERTICAL-ALIGN: middle;
BORDER-LEFT: #8ca5b5 1px solid;
CURSOR: hand;
COLOR: #5c6ba2;
LINE-HEIGHT: 16px;
BORDER-BOTTOM: #5c6ba2 1px solid;
BACKGROUND-REPEAT: repeat-x;
FONT-FAMILY: Arial, Helvetica, sans-serif;
TEXT-ALIGN: center;
TEXT-DECORATION: none
}
3) assign this class to your submit button.
Dont forget the buttonface.gif

If you need i ll send you some proper gifs.
Using css is a better way, try

Posted: Mon Jan 19, 2004 6:51 am
by vigge89
well, since IE doesn't support "input:hover { }", i can't use buttons, so that's why I want an link to submit, cause then i already have the style for it....
Thank Gen-Ik!
Posted: Mon Jan 19, 2004 8:10 am
by Gen-ik
You could always create two button styles, one for UP and one for OVER etc, and then use JS to flip the styles.
CSS
Code: Select all
input.buttonStyleOne { balbalabl }
input.buttonStyleTwo { blablabalablabal }
HTML
Code: Select all
<input class="buttonStyleOne" type="submit" value="submit" onmouseover="this.className='buttonStyleTwo'" onmouseout="this.className='buttonStyleOne'" />
There are loads of cool things which can be done with this... you could also create a button DOWN style so that when the button is pressed it greys-out.
I normally use a JS function() though for this sort of stuff.
Posted: Tue Jan 20, 2004 4:45 pm
by m3rajk
Gen-ik wrote:You could always create two button styles, one for UP and one for OVER etc, and then use JS to flip the styles.
CSS
Code: Select all
input.buttonStyleOne { balbalabl }
input.buttonStyleTwo { blablabalablabal }
HTML
Code: Select all
<input class="buttonStyleOne" type="submit" value="submit" onmouseover="this.className='buttonStyleTwo'" onmouseout="this.className='buttonStyleOne'" />
There are loads of cool things which can be done with this... you could also create a button DOWN style so that when the button is pressed it greys-out.
I normally use a JS function() though for this sort of stuff.
does that actually work?????
i have one part of my navigation bar that's a button submit for a form that i cannot get to switch. i was told elsewhere it's not possible
i used onlmouseover/onmouseout and onfocus/onblur and a few others. none woorked
Posted: Tue Jan 20, 2004 6:38 pm
by Gen-ik
Yeah it should work... you need to replace the "blababla" stuff though
Here's a little example...
Code: Select all
<head>
<script type="text/javascript">
clicked = new Array();
// Should prevent button class changing if it has already been clicked.
function FC(obj,class)
{
for(var i=0; i<clicked.length; i++)
{
if(clickedїi] == obj) return false;
}
obj.className = class;
if(class == "buttonDown")
{
clickedїclicked.length] == obj;
}
}
</script>
<style type="text/css" rel="stylehsheet">
input.buttonUp { background-color:#ffffff; color:#000000; cursor:pointer; }
input.buttonOver { background-color:#ffffff; color:#ff0000; cursor:pointer; }
input.buttonDown { background-color:#e0e0e0; color:#a0a0a0; pointer:default; }
</style>
</head>
<body>
<input type="button" class="buttonUp" value="A Button" onmouseover="FC(this,'buttonOver')" onmouseout="FC(this,'buttonUp')" onclick="FC(this,'buttonDown')" />
</body>
</html>
...that should work but I haven't tested it (just typed it with the reply).
Posted: Tue Jan 20, 2004 7:28 pm
by m3rajk
try going to
http://24.91.157.113/findyourdesire/index.php
then save the page and buttons and uncomment the find user part. see if you can get that to work... that should be a fun little test for it

Posted: Wed Jan 21, 2004 3:53 am
by vigge89
since
<a href="javascript:document.forms.myForm.submit()">Submit Form</a>
looks kinda ugly, and also, uneeded, i thought that it maybe was possible to write a JS-function which gets the forms name, replaces myForm with the name, and then submits it.
I've seen this before, a function like <a href='javascript:process()'>submit</a>, so it is possible. But since I don't now any Javascript at all, i can't do it.
So, i'm asking IF someone could write this function for me (

).
I would be very grateful

Posted: Wed Jan 21, 2004 6:19 am
by patrikG
It's not difficult and the code is not difficult to extract from the examples given above. So, show some effort

Posted: Wed Jan 21, 2004 8:29 am
by Gen-ik
vigge89 wrote:since
<a href="javascript:document.forms.myForm.submit()">Submit Form</a>
looks kinda ugly, and also, uneeded.
You will still need to tell JavaScript what form it needs to submit... unless you only have one form on the page.
A simple 'form sending' function would be something like this...
Code: Select all
<script type="text/javascript">
function SF(nameOfForm)
{
var f = eval("document.forms." + nameOfForm);
f.submit();
}
</script>
And you would use like this <a href="javascript:SF('myForm')">Submit</a> where myForm is the name of the form you want to submit.
Posted: Wed Jan 21, 2004 8:49 am
by vigge89
ok, great, it was shorter, and that's enough!
Thanks everyone
