Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post

    Use text to submit a form using JS?

    Hello

    I have a 'test' page here:

    http://www.proofreading4students.com/register.asp

    Users normally click on the 'Enter' or 'Reset' images on this form, but I was hoping to change those buttons to text links using JS (you can see my little experiment above the normal log-in).

    The JS I am using, which doesn't seem to work, is:

    Code:
    <form name="Login">
    <input type=text name="formInput">
    
    <a href="javascript:document.Login.submit();">Enter</a>
    
    <a href="javascript:document.Login.reset();">Reset</a>
    
    </form>
    Any advice, please?

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,724
    Thanks
    6
    Thanked 1,013 Times in 986 Posts
    Besides the terrible practice of putting inline JS in the href attributes the form above has nothing to submit it to (i. e. no action attribute).

  • #3
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post
    Hello

    Thanks for your reply, Stephen.

    This is what I have at the moment:

    Code:
    <form name='Login' method='post' action='register.asp?mode=add' onSubmit='return invalid()'>
    The 'add' refers to a new user being added to an online database when the 'Submit' button is pressed.

    Towards the bottom of the form I have this:

    Code:
    <input type='image' src='images/forward_16.gif' name='Submit' value='Enter' alt='Enter'>
     
    <input type='image' src='images/cancel_16.gif' name='Reset' value='Reset' alt='Reset'>
    I would like to replace these two images with [Enter] and [Reset] and thought JS may do it presumably using the first snippet of code above, but I am unsure how to put it together.

    Steve

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,185
    Thanks
    80
    Thanked 4,453 Times in 4,418 Posts
    <input type="image"> *IS* a submit button. Did you never try your current "X" that supposedly resets? It actually *SUBMITS* instead!


    But if you really want just text, *USE* the proper button types:
    Code:
    <input type="submit" value="Enter" />
    <input type="reset" value="Reset" />
    I don't know why this wouldn't work, though:
    Code:
    <form name="Login">
    
    <a href="#" onclick="document.Login.submit();return false;">Enter</a>
    <a href="#" onclick="document.Login.reset();return false;">Reset</a>
    
    </form>
    CAUTION: When you call submit() directly, you BYPASS the onsubmit= of the <form> tag.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    SteveH (07-24-2012)

  • #5
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post
    Hello Old Pedant

    That worked as in
    Code:
    <form name='Login' method='post' action='register.asp?mode=add'>
    
    HTML tables here
    
    <tr>
    <td align='right' height='44' width='94'>&nbsp;</td><td height='44 width='172'>
    
    <a href="#" onclick="document.Login.submit();return false;">[Enter]</a>
    <a href="#" onclick="document.Login.reset();return false;">[Reset]</a>
    
    </td></tr></table></form>
    So thank you !

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,724
    Thanks
    6
    Thanked 1,013 Times in 986 Posts
    Now that OldPedant pointed it out: You could still use regular input elements and style them with CSS to look like plain text.
    Code:
    input[type=submit], input[type=reset] {
      border: none;
      padding: 0;
      background: none;
      cursor: pointer;
      color: blue;
      text-decoration: underline;
    }
    That’s actually better than using JS which can be disabled or might not be available, making your links useless.

  • Users who have thanked VIPStephan for this post:

    SteveH (07-24-2012)

  • #7
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post
    Many thanks for your reply, Stephen.

    Much appreciated.

    Steve


  •  

    Posting Permissions

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