1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Submit button hell

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

  1. twizzle

    twizzle Gigabyte Poster

    1,838
    33
    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
    171
    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,838
    33
    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...