Submit button hell

Discussion in 'Web Development & Web Hosting' started by twizzle, Nov 16, 2010.

  1. twizzle

    twizzle Gigabyte Poster

    1,842
    43
    104
    Ok i've designed a very basic contact form for a client, it validates so that it cant be submitted without a name, address etc. It all works fine.....except my submit button.

    I've designed a nice little button in PS as a png file and this shows on teh page. However its also overlayed by the word SUBMIT from somewhere.
    I can tell this is due to the input type="submit" tag. If i delete this the word Sumbit disappears, but my buttons no longer clickable. I cant seem to get rid of the word, i dont need it as i designed that onto my button image anyway.... its close to last thing on site to finish and its drivin me up wall.

    Code:

    CSS

    .button{
    text-align:center;
    border:none;
    background: url('images/submit.png') no-repeat;
    width:50px;
    height:25px;
    margin: auto;
    position:absolute;
    left:650px;
    top:710px;

    }

    .button:hover{

    border:none;
    background:url('images/submit2.png') no-repeat;
    width:50px;
    height:25px;
    }

    And HTML
    <form name="contactform" action="sendemail.php" onsubmit="javascript:return validate_form();" >

    Form details in here then at end


    <input type="submit" class="button" id="submitbutton" name="submitbutton"><br>
     
    Certifications: Comptia A+, N+, MS 70-271, 70-272
    WIP: Being a BILB,
  2. Notes_Bloke

    Notes_Bloke Terabyte Poster

    3,230
    54
    146
    Hi mate,
    Have you tried image instead of submit?
    i.e

    Code:
    <input type="image" class="button" id="submitbutton" name="submitbutton"><br> 
    NB
     
    Certifications: 70-210, 70-215, A+,N+, Security+
    WIP: MCSA
  3. Fergal1982

    Fergal1982 Petabyte Poster

    4,196
    172
    211
    That would only work if you add an onclick handler to submit the form.

    You need the type="submit" to tell the form that this button submits the form. However, have you tried adding a value="" to it?

    Edit: On a side note, you need to be closing off your tags for well-formed HTML. Either

    Code:
    <input type="submit" class="button" id="submitbutton" name="submitbutton"></input>
    or, because you have nothing inside the tag, you can self-close:

    Code:
    <input type="submit" class="button" id="submitbutton" name="submitbutton" />
    Similarly for your <br>:
    Code:
    <br />
     
    Last edited: Nov 16, 2010
    Certifications: ITIL Foundation; MCTS: Visual Studio Team Foundation Server 2010, Administration
    WIP: None at present
  4. twizzle

    twizzle Gigabyte Poster

    1,842
    43
    104
    Thanks Fergal it was the value="" that worked. I'm sure i tried that before and it hadnt worked, but i must be wrong.
     
    Certifications: Comptia A+, N+, MS 70-271, 70-272
    WIP: Being a BILB,

Share This Page

Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.