1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

Solved: <input type="image" and ENTER key

Discussion in 'Web Design & Development' started by andynic, Jul 19, 2012.

Thread Status:
Not open for further replies.
Advertisement
  1. andynic

    andynic Thread Starter

    Joined:
    May 25, 2007
    Messages:
    300
    Hi,

    I have a problem with the <input type = "image"> tag which is a submit button.

    When I use "submit" buttons (either type="submit" or type="image") when the user hits the ENTER key, the form does a submit which is not user-friendly in this application.

    To get around this, in the case of <input type="submit"> I have changed them to <input type="button" onclick="submit()">

    Is their some way to prevent the <input type="image"> from automatically doing a submit?

    Thanks for your help.
    Andynic
     
  2. allnodcoms

    allnodcoms

    Joined:
    Jun 30, 2007
    Messages:
    613
    Couple of options:
    • Don't make it a button, just make it an image with an 'onClick' handler.
    • Supply an 'onKeyPress' handler that does nothing...
    I wasn't aware that an image button aromatically got submit status. Odd :roll eyes:...

    Is it the only "button" type element in a form?

    Danny
     
  3. andynic

    andynic Thread Starter

    Joined:
    May 25, 2007
    Messages:
    300
    Hi Danny,
    Thanks for your reply.

    re. image button and submit:
    I also find it odd. Had it functioned as type=" button" there would be no problem in this context at least.
    From: http://www.w3schools.com/tags/att_input_type.asp
    "image Defines an image as a submit button"

    re. onkeypress: This is a data entry form, so to globally disable keypress is not an option..

    re. making it an <img> tag:
    This is what I did:
    <img alt="recensie versturen"
    name="recensieVersturen"
    id="recensieVersturen"
    src="images/recensieVersturenBttn.png"
    title="recensie versturen"
    style="background-color:lightGray; height:25px;"
    onclick="if ( validateSchrijfRecensie('recensieVersturen') )
    {
    document.getElementById('nextAction').value = 'recensieVersturen';
    alert ('xxx');
    submit();
    }
    else
    {
    return false;
    }"
    />
    When the user clicks the image, I get to the alert('xxx') but the submit does not function (as it does when it is an <input> tag.
    Here is the <form> tag:
    <form name="schrijfRecensie" id="schrijfRecensie" method="post" action=""
    style="background:none; border:0px; margin-left:0">

    The W3 validator does not show any errors.

    Thanks for your help.
    Andynic
     
  4. allnodcoms

    allnodcoms

    Joined:
    Jun 30, 2007
    Messages:
    613
    You need to tell the js what to submit():
    Code:
    document.forms["schrijfRecensie"].submit();
    That should do it...

    Danny
     
  5. andynic

    andynic Thread Starter

    Joined:
    May 25, 2007
    Messages:
    300
    Thanks for the tip, Danny. It indeed solves the problem.

    Thanks again for your help.
    Andynic
     
  6. Sponsor

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 733,556 other people just like you!

Loading...
Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/1061680