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 &#123;
	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
&#125;
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 &#123; balbalabl &#125;
input.buttonStyleTwo &#123; blablabalablabal &#125;
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 &#123; balbalabl &#125;
input.buttonStyleTwo &#123; blablabalablabal &#125;
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)
&#123;
    for(var i=0; i<clicked.length; i++)
    &#123;
        if(clicked&#1111;i] == obj) return false;
    &#125;

    obj.className = class;

    if(class == "buttonDown")
    &#123;
        clicked&#1111;clicked.length] == obj;
    &#125;
&#125;

</script>


<style type="text/css" rel="stylehsheet">

input.buttonUp &#123; background-color:#ffffff; color:#000000; cursor:pointer; &#125;
input.buttonOver &#123; background-color:#ffffff; color:#ff0000; cursor:pointer; &#125;
input.buttonDown &#123; background-color:#e0e0e0; color:#a0a0a0; pointer:default; &#125;

</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 ( :oops: ).
I would be very grateful :roll:

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)
&#123;
    var f = eval("document.forms." + nameOfForm);
    f.submit();
&#125;

</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 :) :wink: