SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,819
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)

    Hiding submit buttons so that they still wok?

    I have seen a few forms w/o submit buttons. That is , the form is sent whenever you press <ENTER> in the last field and there doesn't seem t be JS help .

    At first I thought this was a default behaviour ( actually it seems to be this way for FF.. but webkit and IE aren't so compliant on this)

    Then I thought I got it to work ONCE, across browsers, by creating an input type submit and hiding it some how ( type=hidden?)

    to be honest , my memory is fuzzy today. so the question is w/o resorting to javascript is there a way to code a form for , lets say, log in or search , where you dont have to have a "submit" button visible and the form is sent once <return> is pressed on the last field?

  2. #2
    SitePoint Wizard cranial-bore's Avatar
    Join Date
    Jan 2002
    Location
    Australia
    Posts
    2,634
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Enter should submit the form, and the script will need to look for the POST value of the fields name.
    I just did a little test with IE8, IE9, Firefox 3.6, Firefox 6, Chrome and Safari 5.1 and they all worked.

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,819
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Cranial,
    it does if the input is visible, but how do you have the input active and hide it at the same time...

  4. #4
    SitePoint Addict dnordstrom's Avatar
    Join Date
    Jul 2006
    Location
    Amsterdam
    Posts
    337
    Mentioned
    18 Post(s)
    Tagged
    0 Thread(s)
    So just hiding it with CSS, using "display: none;" and/or "visibility: hidden;" will not work well with IE? Interesting. Since CSS wouldn't really change the browser behavior, I see no other way than using client-side scripting. I'm on a Mac so I can't check IE right now.

    Just found this article from a few years ago which outlines the problem and gives a Javascript solution:
    http://www.thefutureoftheweb.com/blo...-ie-with-enter

    Though in the comments I read that someone had done the trick of not hiding the submit button, but instead making it 1x1 pixels and have it blend in with the background. Anyhow, interesting how much mess we need to go through to do something so seemingly simple. Thanks for bringing the subject up.
    Daniel Nordstrom. of. Nintera(ctive)
    -- Featured post: Part 2. Writing NI.JS JavaScript
    ----- Follow me on Twitter. Got project? Contact me.
    -------- SitePoint: Community Guidelines Be A Great Member

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,819
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    yeah, and because it's an input you cant really control its dimensions effectively, eg {height:0;}. So far the only way I can seem to hide it is using AP. It's just that I thought you could have a HIDDEN submit input or button , I just cant remember how that was done.

  6. #6
    SitePoint Wizard cranial-bore's Avatar
    Join Date
    Jan 2002
    Location
    Australia
    Posts
    2,634
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, I missed that you had a CSS focus with your question. In my test I omitted the submit button from the markup entirely.
    If you can run PHP this is the code I used for my test:
    Code:
    <!DOCTYPE html>
    <body>
    	<?php
    	if( isset($_POST['thetext']) ) {
    		echo "<h2>Got it</h2>" . 
    			 '<p>' . htmlspecialchars($_POST['thetext']) . '</p>';
    	}
    	else echo "<p><em>not submitted yet</em></p>";
    	?>
    	
    	<form method="post" action="enter.php">
    		<input type="text" name="thetext">
    	</form>
    </body>
    </html>
    (Change the form action to whatever you name the script)

  7. #7
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,819
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    OBSERVATIONS:

    it seem Saf. will allow any form with only ONE input to be automatically submitted upon hitting return... but it doesnt if you have more than one input field. UNLESS you have a submit button/input.. which is fine.. if I could only hide said input/button from view...

    ( which I am doing with AP, but i thought there was a more graceful method... I thought there was, but maybe I just imagined it!)


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
  •