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 11 of 11
  1. #1
    Regular Coder
    Join Date
    Feb 2014
    Posts
    258
    Thanks
    47
    Thanked 0 Times in 0 Posts

    Confused about 'Submit' text-link

    Hello

    I have a small form here Password recovery which is giving me a headache!

    I am trying to use JavaScript to use a text-link to submit a form and I have placed the following in my <head> tags:

    Code:
    <script type="text/javascript">
    function submitform()
    {
        document.forms["Password"].submit();
    }
    </script>
    'Password' is the name of the form. The form itself looks like this:

    Code:
    <body>
    
    <div id="page-wrap">
    
        <div id="contact-area">
    			
           <form name="Password" method="post" action="confirm.asp">
    
              <div id="logo_text">
                  <h2>Lost Password?</h2>
                      </div>
    
              <div id="logo_text">
                  <h3>Please enter a valid Email address</h3>
                       </div>
    
    <input type="text" name="Email" id="Email" />
    
    <input type="submit" name="Submit">
    
    <a href="javascript:document.Password.submit();">Submit</a>
    
    </form>			
    
    <div style="clear: both;"></div>
    			
        </div>
    
           </div>
    
             </body>
    Can I ask a) if that script in my <head> tags is necessary and b) where has that 'Submit Query' button - which I don't want - come from!? I don't have the word 'Query' anywhere in my page or the accompanying CSS page! When that is removed, I will try to style the JS text-link to look more attractive.

    Thanks for any advice.

    Blueie

  • #2
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Quote Originally Posted by Blue1 View Post
    Hello

    Can I ask a) if that script in my <head> tags is necessary
    You are not making a call to submitform()
    so the function never runs

    Quote Originally Posted by Blue1 View Post
    Hello

    and b) where has that 'Submit Query' button - which I don't want - come from!? I don't have the word 'Query' anywhere in my page or the accompanying CSS page! When that is removed, I will try to style the JS text-link to look more attractive.

    Thanks for any advice.

    Blueie
    You have not assigned a value for
    <input type="submit" name="Submit">
    so it is displaying the default value
    'Submit Query'

  • Users who have thanked DaveyErwin for this post:

    Blue1 (03-31-2014)

  • #3
    Regular Coder
    Join Date
    Feb 2014
    Posts
    258
    Thanks
    47
    Thanked 0 Times in 0 Posts
    Hello DaveyErwin

    Thanks for your reply.

    I understand this part:

    You have not assigned a value for
    <input type="submit" name="Submit">
    so it is displaying the default value
    'Submit Query'
    Sorry, I didn't realise that 'Submit Query' was the default, but I am less sure about 'submitform()'. Do I use that in this line?
    <a href="javascript:document.Password.submit();">Submit</a>
    Thanks again.

    Blue

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    I recommend to still use a submit button and just style it like a link using CSS. No Javascript needed.
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .buttonLink {
        border: 0;
        background: transparent;
        text-decoration: underline;
        color: blue;
        cursor: pointer;
    }
    .buttonLink:hover {
        color: red;
    }
    </style>
    </head>
    <body>
    <form>
    <input type="submit" name="Submit" value="Submit" class="buttonLink" />
    </form>
    </body>
    </html>
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • Users who have thanked glenngv for this post:

    Blue1 (03-31-2014)

  • #5
    Regular Coder
    Join Date
    Feb 2014
    Posts
    258
    Thanks
    47
    Thanked 0 Times in 0 Posts
    Hello glenngv

    Many thanks for your reply.

    Yes, I think you are right. I read a few JS sites and they warned against using JS for a text link (mainly to do with JS being disabled).

    I have used your code and it looks as in the screenshot I am attaching.

    Is it not possible to have the 'Submit' link under the input field, because that is where users are supposed to type in their email address?

    Thanks again for your time.

    Blue
    Attached Thumbnails Attached Thumbnails Confused about 'Submit' text-link-submit_image.jpg  

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Did you relatively or absolutely positioned the button? Or perhaps with negative top margin? Post your code.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #7
    Regular Coder
    Join Date
    Feb 2014
    Posts
    258
    Thanks
    47
    Thanked 0 Times in 0 Posts
    Hello glenngv

    Thank you for getting back to me.

    This is my HTML page:

    Password recovery and this is the code in my HTML page:

    Code:
    <style>
    .buttonLink {
        border: 0;
        background: transparent;
        text-decoration: underline;
        color: blue;
        cursor: pointer;
    }
    .buttonLink:hover {
        color: red;
    }
    </style>
    
    <style type="text/css">
    
    input{
    position: relative; 
    left:13%; 
    margin-left: -145px;
    
    }
    
    </style>
    
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    
    <link rel="stylesheet" type="text/css" href="style.css" />
    
    </head>
    
    <body>
    
    <div id="page-wrap">
    
    <div id="contact-area">			
    			
    <form name="Password" method="post" action="confirm.asp">
    
    <div id="logo_text">
    <h2>Lost Password?</h2>
    </div>
    
    <div id="logo_text">
    <h3>Please enter a valid Email address</h3>
    </div>
    
    <input type="submit" name="Submit" value="Submit" class="buttonLink" />
    
    </form>			
    
    <div style="clear: both;"></div>
    
    </div>	
    
    </div>
    
    </body>
    Thanks again for your time.

    Blueie

  • #8
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    I don't see any input text field. In your original post, you have:
    Code:
    <input type="text" name="Email" id="Email" />
    but nothing in the latest one.

    And you relatively positioned all the input tags with the input CSS rule. You also have CSS styles for #contact-area input rule which also gets applied to the submit button.

    I think you only intended to style input[type="text"] fields not just input, right?
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #9
    Regular Coder
    Join Date
    Feb 2014
    Posts
    258
    Thanks
    47
    Thanked 0 Times in 0 Posts
    Hello glenngv

    Yes, that's right.

    All I wanted to do was follow your suggestion about not using JS for the 'Submit' button, so I got rid of that and replaced it with your input field (where the email address goes) script and the piece of CSS which I have in the <head> tags.

    ideally, the empty input field should be above your CSS-style text link.

    Blue

  • #10
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Add back the email text field and modify your CSS rules to target just input[type="text"].
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #11
    Regular Coder
    Join Date
    Feb 2014
    Posts
    258
    Thanks
    47
    Thanked 0 Times in 0 Posts
    Thanks, glenngv

    Yes, OK, I'll try that.

    Blue


  •  

    Posting Permissions

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