Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Reset Button Not Working

Posted on 2003-12-04
3
Medium Priority
?
447 Views
Last Modified: 2010-04-09
Why does nothing happen when I click on the reset button?  Also, is there a way to set focus back to the text box when a user clicks reset?

Here is the current code where reset is not working:

<form name="search" method="get" onsubmit="return testSearchValue(this)" action="search.html">
      <input type="hidden" name="page_number" value="1"/>
      <input type="text" name="user_input" size="30" style="height:24"/>
      <input type="image" border="0" src="images/go.gif" alt="Go!" width="37" height="24" align="top"/>
      <a href="javascript:document.search.user_input.reset()">
            <img src="images/reset.gif" alt="Reset" border="0" width="74" height="24" align="top"\>
      </a>
</form>

If have tried calling this javascript from onClick in the <a> above and nothing happens:

function resetSearch()
{
      document.search.user_input.reset();
      document.search.user_input.focus();
}

Thanks!
0
Comment
Question by:bparmelee
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 15

Accepted Solution

by:
Timbo87 earned 2000 total points
ID: 9879581
<form name="search" method="get" onsubmit="return testSearchValue(this)" action="search.html">
     <input type="hidden" name="page_number" value="1"/>
     <input type="text" name="user_input" size="30" style="height:24"/>
     <input type="image" border="0" src="images/go.gif" alt="Go!" width="37" height="24" align="top"/>
     <a href="#" onClick="document.forms['search'].elements['user_input'].value = '';document.forms['search'].elements['user_input'].focus();return false;">
          <img src="images/reset.gif" alt="Reset" border="0" width="74" height="24" align="top"\>
     </a>
</form>
0
 
LVL 15

Expert Comment

by:Timbo87
ID: 9879600
With that code you no longer need to call any external functions.
The reason your code above didn't work is because you can't "reset" a textbox. You have to set its value to nothing. It's also better to run JavaScript through an onClick rather than the javascript: protocol.
0
 

Author Comment

by:bparmelee
ID: 9879654
Very cool!  Thanks!
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…

688 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question