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
    110
    Thanks
    32
    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
    967
    Thanks
    19
    Thanked 211 Times in 209 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
    110
    Thanks
    32
    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,043
    Thanks
    0
    Thanked 251 Times in 247 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>

  • Users who have thanked glenngv for this post:

    Blue1 (03-31-2014)

  • #5
    Regular Coder
    Join Date
    Feb 2014
    Posts
    110
    Thanks
    32
    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,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Did you relatively or absolutely positioned the button? Or perhaps with negative top margin? Post your code.

  • #7
    Regular Coder
    Join Date
    Feb 2014
    Posts
    110
    Thanks
    32
    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,043
    Thanks
    0
    Thanked 251 Times in 247 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?

  • #9
    Regular Coder
    Join Date
    Feb 2014
    Posts
    110
    Thanks
    32
    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,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Add back the email text field and modify your CSS rules to target just input[type="text"].

  • #11
    Regular Coder
    Join Date
    Feb 2014
    Posts
    110
    Thanks
    32
    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
    •