SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Guru glenngould's Avatar
    Join Date
    Nov 2005
    Posts
    661
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need No Button But Still to Submit?

    Hi, I made a simple chat app. with ajax and I used a <form> element to submit a message. I have an alternative link (<a>) in the layout to send a message and I want to remove the button (<input type="submit">), but the return/enter key must still be available to submit a message. So:

    -If I just omit the button, the form is not submitted, when I hit return/enter.

    -If I hide the button with:
    HTML Code:
    <input type="submit" style="display:none">
    IE7 do not submit, when I hit return/enter.

    -If I virtually hide the button with:
    HTML Code:
    <input type="submit" style="width:0px;height:0px;">
    Firefox shows a very small button icon.

    -If I paint the button in white with:
    HTML Code:
    <input type="submit" style="border:0px;background-color:#fff;color:#fff;">
    it works ok but I'm not happy with this solution.

    What is the proper method to remove (or hide if you have to place a <input type="submit"> in the form) a submit button but still have the ability to submit a form by hitting return/enter?

  2. #2
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,805
    Mentioned
    73 Post(s)
    Tagged
    6 Thread(s)
    I have just tested your input statement in IE7 and it works fine without a submit button.

    I also tried using two separate input fields but was not able to submit the form.

    Is it possible to only have a single input in your code?

    I have already done this and if you do not believe me you can Ask Eliza

  3. #3
    SitePoint Guru glenngould's Avatar
    Join Date
    Nov 2005
    Posts
    661
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes it submits with a single <input type="text"> but not with multiple ones.

    I do not want to limit myself with a single input element, so I'll keep using my 3rd method above.

    Any other thoughts?

  4. #4
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry to drag up an old thread, but I just had this issue myself and found that the best solution was to just position the 'trigger' button off-screen:

    Code CSS:
    input.hidden{
    	position: absolute;
    	left: -10000px;
    	top: -1000px;
    }

    HTML Code:
    <input class="hidden" type="submit" />


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
  •