Hiding submit buttons so that they still wok?

HTML & CSS
1

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

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

Cranial,
it does if the input is visible, but how do you have the input active and hide it at the same time…

4

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:

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. :slight_smile:

5

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

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:


<!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

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!)