SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Zealot thefranchise's Avatar
    Join Date
    Jul 2004
    Location
    BC, Canada
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Reset a form with a text link

    Is there an easy way to reset a form with a text link rather than a input? I have made a few searches on here and google for this but I couldn't find anything helpful.

    Id like to have the submit button as a input and have the reset link beside it. To help avoid people from clicking the reset by accident.

    Thanks to anyone that can help.
    I Create Things - Lost - Tutorial Cube - LogoPond (NEW)
    LogoPond - Identity Inspiration

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why not use an input for the reset button and then style it to look like a regular text link?

  3. #3
    SitePoint Zealot thefranchise's Avatar
    Join Date
    Jul 2004
    Location
    BC, Canada
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your idea Dan. Do you mean replace it with a image or style the box with CSS? Im not sure its possible to style a input like that for Mac browsers, which I use.
    I Create Things - Lost - Tutorial Cube - LogoPond (NEW)
    LogoPond - Identity Inspiration

  4. #4
    .* draziW tnioPetiS *. bronze trophy
    Join Date
    Jun 2004
    Location
    "Then I figure the most good good guy will win."
    Posts
    1,666
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe something like:

    Code:
    <script language="JavaScript">
    function resetForm(f) { f.reset(); }
    </script>
    <a href="#" onclick="resetForm(this.form)">Reset</a>
    Not tested though.

    EDIT: Ok, that does not work... but this does:

    Code:
    <a href="javascript:document.form.reset();">reset</a>
    But I am sure there is a better way to do it (i.e. less obtrusive?).

    test page

  5. #5
    SitePoint Zealot thefranchise's Avatar
    Join Date
    Jul 2004
    Location
    BC, Canada
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot, this works perfectly and Im willing to take the risk this wont work for the few that have js turned off.

    Thanks again.
    I Create Things - Lost - Tutorial Cube - LogoPond (NEW)
    LogoPond - Identity Inspiration

  6. #6
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why can't you just

    Code:
    input {
        background-color: #FFFFFF; /* or transparent if needed? */
        border: 0px;
        color: #000000;
        text-decoration: underline;
    }
    I don't have access to test this on a mac but I'm pretty sure that this will work cross browser and on all platforms which also has the added advantage of working for the 10% of users who don't have JavaScript unlike the other example

    However, if you do decide to go with the JavaScript version then I'd personally make sure that I was using the JavaScript to display the button as well using document.write.

    This way, any users that don't have JavaScript won't try clicking the button and thinking that something is broken which in turn may make them think that the site is broken and reduce their confidence in the site as a whole. This may not be the case but if somebody thinks that something as simple as a reset button isn't going to work then what are the chances of a buy now button working or there being the correct security when I submit my credit card details?

    A reset button isn't critical functionality as it's making life easier for some users but just make sure that you hide it from users that it isn't going to work for otherwise you may run into problems.

  7. #7
    .* draziW tnioPetiS *. bronze trophy
    Join Date
    Jun 2004
    Location
    "Then I figure the most good good guy will win."
    Posts
    1,666
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Very good points csswiz... I have not tried to dink with form controls that much, but from the little dinking I have done, Safari does not like to play ball... but maybe that has changed with the latest version.

    I would be curious to know how the mac world treats above code... anyone able to confirm?

  8. #8
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd be interested to know as well as it would be strange if Safari didn't take any notice of styling for forms as I can't really imagine that to be the case.

    When I've got a bit more time, I'll try creating a sample bit of code and running it through http://browsershots.org/ as they're pretty quick in returning results for Safari... unless you want to give it a try of course if it's available online anywhere.

  9. #9
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  10. #10
    .* draziW tnioPetiS *. bronze trophy
    Join Date
    Jun 2004
    Location
    "Then I figure the most good good guy will win."
    Posts
    1,666
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz
    I haven't even gotten to the submit and reset buttons yet (which sadly, Safari will ignore outright).
    Is that the official answer?

    I seem to remeber seeing a site that had a ka-zillion screen grabs of form inputs styled via css in many diff browsers/platforms... looking for link now.

    Ahhh, I think this is it.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •