Login or Sign up Help | Site Map
Connecting Tech Pros Worldwide

Restyle Anchor

Question posted by: shapper (Guest) on June 27th, 2008 07:20 PM
Hello,

On a bottom of a form I have 2 buttons: Submit and Cancel.

Submit is an input and submits the form.
Cancel should just redirect the user to a new page without
submitting the form.

I need the Cancel button to look the same as the Submit button.
If I use an input of type button as Cancel button I am able to do that
but then I need to rely on "onclick" to redirect the user ... I think
would be better to use an anchor.

However, I am having a problem in styling the anchor to make it look
the same as the Submit input.

Could someone tell me how to style the anchor and if using an anchor
is better then using the button?

My code:
http://www.27lamps.com/Labs/Buttons/Buttons.html

Thanks,
Miguel
Would you like to answer this question?
Sign up for a free account, or Login (if you're already a member).
Jonathan N. Little's Avatar
Jonathan N. Little
Guest
n/a Posts
June 27th, 2008
07:20 PM
#2

Re: Restyle Anchor
shapper wrote:
Quote:
Originally Posted by
Hello,
>
On a bottom of a form I have 2 buttons: Submit and Cancel.
>
Submit is an input and submits the form.
Cancel should just redirect the user to a new page without
submitting the form.
>
I need the Cancel button to look the same as the Submit button.
If I use an input of type button as Cancel button I am able to do that
but then I need to rely on "onclick" to redirect the user ... I think
would be better to use an anchor.


Or you can have the "cancel" button in another form that submits
"nothing" to that other page

<form action="scriptThatDoesDomething.php">
....
<input type="submit" value="Submit Form">
</form>

<form action="theOtherPage.php">
<input type="submit" value="Cancel">
</form>


--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

shapper's Avatar
shapper
Guest
n/a Posts
June 27th, 2008
07:20 PM
#3

Re: Restyle Anchor
On Jun 25, 12:50*am, "Jonathan N. Little" <lws4...@central.netwrote:
Quote:
Originally Posted by
shapper wrote:
Quote:
Originally Posted by
Hello,

>
Quote:
Originally Posted by
On a bottom of a form I have 2 buttons: Submit and Cancel.

>
Quote:
Originally Posted by
* Submit is an input and submits the form.
* Cancel should just redirect the user to a new page without
submitting the form.

>
Quote:
Originally Posted by
I need the Cancel button to look the same as the Submit button.
If I use an input of type button as Cancel button I am able to do that
but then I need to rely on "onclick" to redirect the user ... I think
would be better to use an anchor.

>
Or you can have the *"cancel" button in another form that submits
"nothing" to that other page
>
<form action="scriptThatDoesDomething.php">
...
<input type="submit" value="Submit Form">
</form>
>
<form action="theOtherPage.php">
<input type="submit" value="Cancel">
</form>
>
--
Take care,
>
Jonathan
-------------------
LITTLE WORKS STUDIOhttp://www.LittleWorksStudio.com


Is this usually done? Having a form just redirecting to a page?
However, I have a problem: I need to place both buttons side by side
and in that case I think it will not be possible.

Finally, could I place a input of type button inside an anchor? What
do you think?

Thanks,
Miguel

Jonathan N. Little's Avatar
Jonathan N. Little
Guest
n/a Posts
June 27th, 2008
07:20 PM
#4

Re: Restyle Anchor
shapper wrote:
Quote:
Originally Posted by
On Jun 25, 12:50 am, "Jonathan N. Little" <lws4...@central.netwrote:
Quote:
Originally Posted by
>shapper wrote:
Quote:
Originally Posted by
>>Hello,
>>On a bottom of a form I have 2 buttons: Submit and Cancel.
>> Submit is an input and submits the form.
>> Cancel should just redirect the user to a new page without
>>submitting the form.
>>I need the Cancel button to look the same as the Submit button.
>>If I use an input of type button as Cancel button I am able to do that
>>but then I need to rely on "onclick" to redirect the user ... I think
>>would be better to use an anchor.

>Or you can have the "cancel" button in another form that submits
>"nothing" to that other page
>>
><form action="scriptThatDoesDomething.php">
>...
><input type="submit" value="Submit Form">
></form>
>>
><form action="theOtherPage.php">
><input type="submit" value="Cancel">
></form>


<snip signature>
Quote:
Originally Posted by
Is this usually done? Having a form just redirecting to a page?
However, I have a problem: I need to place both buttons side by side
and in that case I think it will not be possible.


Sure you can, careful markup style as you need to...
Quote:
Originally Posted by
>
Finally, could I place a input of type button inside an anchor?


What good would that do?



--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Jonathan N. Little's Avatar
Jonathan N. Little
Guest
n/a Posts
June 27th, 2008
07:20 PM
#5

Re: Restyle Anchor
Jonathan N. Little wrote:
Oops, always double check in IE! IE has a default bottom margin on
forms, so add a third rule to line up buttons
Quote:
Originally Posted by
<style type="text/css">
div.wrapper { position: relative; min-width: 15em; }
div.wrapper form.nogo { position: absolute; right: 0; bottom: 0;}


div.wrapper form { margin: 0; }


--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

shapper's Avatar
shapper
Guest
n/a Posts
June 27th, 2008
07:20 PM
#6

Re: Restyle Anchor
On Jun 25, 3:15*pm, "Jonathan N. Little" <lws4...@central.netwrote:
Quote:
Originally Posted by
Jonathan N. Little wrote:
>
* Oops, always double check in IE! IE has a default bottom margin on
forms, so add a third rule to line up buttons
>
Quote:
Originally Posted by
*<style type="text/css">
*div.wrapper { position: relative; min-width: 15em; }
*div.wrapper form.nogo { position: absolute; right: 0; bottom: 0;}

>
div.wrapper form { margin: 0; }
>
--
Take care,
>
Jonathan
-------------------
LITTLE WORKS STUDIOhttp://www.LittleWorksStudio.com


Hmmm, thank you for the help, but it does not work.
I need the two buttons to be side by side ... even if I set a right
margin to cancel button they will overlap on text resizing.

I will keep trying ...

Thanks,
Miguel

Jukka K. Korpela's Avatar
Jukka K. Korpela
Guest
n/a Posts
June 27th, 2008
07:20 PM
#7

Re: Restyle Anchor
Scripsit shapper:
Quote:
Originally Posted by
On a bottom of a form I have 2 buttons: Submit and Cancel.


Wrong design. The "Cancel" button is really a "destroy whatever the user
has done" button.
Quote:
Originally Posted by
Submit is an input and submits the form.
Cancel should just redirect the user to a new page without
submitting the form.


Pointless. No need to style it. Redesign it.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/


 
Not the answer you were looking for? Post your question . . .
182,081 Experts ready to help you find a solution.
Sign up for a free account, or Login (if you're already a member).

  • Didn't find the answer you were looking for?
    Post Your Question
  • Top Community Contributors