SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Red face css button not sumbitting form

    I have a css button that I am trying to use to submit a basic php/javascript contact form. However, while everything looks right, the button doesn't submit the form when clicked.

    Here's the code on the css button:

    <a class="button2" href="#" onclick="this.blur(); return false; this.form.submit();"><span>Send Feedback</span></a>
    This is the old way I did it and it works fine:

    <input type=image src="images/send.gif" alt="Send" width="129" height="24" border="0">
    Any thoughts?

  2. #2
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    why have you chosen to use a link rather then an input to submit the form?

  3. #3
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You are returning (false) before submitting the form. So the form never gets submitted.

    fixed
    Code:
    onclick="this.blur();this.form.submit();return false;"
    I agree with mortimer that you should probably use a <input type="submit"> instead of a link.

  4. #4
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can I still use my css button with the input type? I tried that and couldn't get it to apply the css.

  5. #5
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Depends what you are trying to do really, you might have more luck using the button tag (see below), this will have default styles to look like a normal button but you can change the styles with css.

    Code:
    <button type="submit">Send Feedback</button>

  6. #6
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am using a css for a rounded button, tutorial found here:
    http://www.oscaralexander.com/tutori...-with-css.html

    Here's my css:
    a.button2 {
    background: transparent url('images/bg_button_a.gif') no-repeat scroll top right;
    color: #fff;
    display: block;
    float: right;
    height: 24px;
    margin-right: 10px;
    padding-right: 10px; /* sliding doors padding */
    font-size: 15px; font-weight: bold; font-family: TREBUCHET MS, Verdana, Arial, Helvetica, sans-serif; color: #ffffff; text-decoration: none
    }
    a.button2 span {
    background: transparent url('images/bg_button_span.gif') no-repeat;
    display: block;
    line-height: 14px;
    padding: 4px 0px 6px 10px;
    }
    a.button2:hover {
    background-position: bottom right;
    color: #fff;
    outline: none; /* hide dotted outline in Firefox */
    }

    a.button2:hover span {
    background-position: bottom left;
    padding: 4px 0px 6px 10px; /* push text down 1px */
    }
    I tried to apply the css to the button and input tags but it didn't take. Moving the false to the end of the page didn't work either.

    My page is here:
    http://www.creativemetaphor.com/clie..._site/form.php

  7. #7
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    whoops, it won't submit because .form is not a property of the <a> element.

    replace
    this.form.submit();
    with
    document.forms[0].submit();

  8. #8
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That did it! Thanks!!!!!!!!

  9. #9
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The css to make the form work with a button

    Code:
    .button2 {
    	background:transparent url(http://www.creativemetaphor.com/clients/iris/scion_site/images/bg_button_a.gif) no-repeat scroll right top;
    	border:0pt none;
    	color:#FFFFFF;
    	float:right;
    	font-family:TREBUCHET MS,Verdana,Arial,Helvetica,sans-serif;
    	font-size:15px;
    	font-weight:bold;
    	height:24px;
    	margin:0pt 10px 0pt 0pt;
    	text-decoration:none;
    }
    
    .button2 span {
    	background:transparent url(http://www.creativemetaphor.com/clients/iris/scion_site/images/bg_button_span.gif) no-repeat scroll left top;
    	line-height:14px;
    	padding:3px 0px 6px 10px;
    }
    
    .button2:hover {
        background-position: bottom right;
        color: #fff;
        outline: none; /* hide dotted outline in Firefox */
    }
    
    .button2:hover span {
        background-position: bottom left;
        padding: 3px 0px 1px 10px;
    }
    and the button tag should look like

    Code:
    <button type="submit" class="button2"><span>Send Feedback</span></button>


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
  •