Hidden button

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
S_henry
Forum Contributor
Posts: 148
Joined: Sun Jan 25, 2004 10:25 pm
Location: M'sia

Hidden button

Post by S_henry »

Can we make the button invisible? The reason is when we press 'Enter', the form will automatically submit. And I don't want that submit button visible. Can we do that?
User avatar
markl999
DevNet Resident
Posts: 1972
Joined: Thu Oct 16, 2003 5:49 pm
Location: Manchester (UK)

Post by markl999 »

You could do input type="submit" name="submit" value="submit" style="display: none"/> ... but i wouldn't hide it personally as it might cause problems with different browsers (text browsers as an example), or also cause problems for disabled people who are using screen readers/whatever *shrug*
User avatar
CoderGoblin
DevNet Resident
Posts: 1425
Joined: Tue Mar 16, 2004 10:03 am
Location: Aachen, Germany

Post by CoderGoblin »

You could trap the return key with a javascript event handler and submit the form as an alternative.
Zay
Forum Newbie
Posts: 22
Joined: Tue Mar 23, 2004 3:42 pm

Post by Zay »

correct me if I'm wrong, but doesn't an enterpress submit the form already by default?

when working in say an input="text" and you press enter you submit the current form...

textarea's and selects don't work with that though.

but if you have a form with textfields only you don't need the submit button at all.

other option if you truly do need a submit thingie:
make a 1px image with same colour as your page background and use that as your submit "button".

give us some more detail about what kind of form it will be, you could also tie js's on it, like CoderGoblin said.
User avatar
patrikG
DevNet Master
Posts: 4235
Joined: Thu Aug 15, 2002 5:53 am
Location: Sussex, UK

Post by patrikG »

Zay wrote:correct me if I'm wrong, but doesn't an enterpress submit the form already by default?
Yes, but if you add 'onSubmit="return false;"' that is disabled. You can then have javascript submit the form with document.forms[0].submit() and thus customise the onSubmit event.
User avatar
markl999
DevNet Resident
Posts: 1972
Joined: Thu Oct 16, 2003 5:49 pm
Location: Manchester (UK)

Post by markl999 »

In some well known browsers of a certain version the submit event isn't 'fired' when you press enter, you have to use the submit button.
Steveo31
Forum Contributor
Posts: 416
Joined: Sun Nov 23, 2003 9:05 pm
Location: San Jose CA

Post by Steveo31 »

markl999 wrote:In some well known browsers of a certain version the submit event isn't 'fired' when you press enter, you have to use the submit button.
Doesn't Opera do that?
S_henry
Forum Contributor
Posts: 148
Joined: Sun Jan 25, 2004 10:25 pm
Location: M'sia

Post by S_henry »

For my form, I want to make when I press 'Enter', the form will automatically submit (do some transaction) at another page and return to this page again. Actually if I display the button also can. But for me, if I can hide that button is better. I also not very understand how to use javascript to do this. Can anybody explain more detail? Thanx..
Zay
Forum Newbie
Posts: 22
Joined: Tue Mar 23, 2004 3:42 pm

Post by Zay »

it seems you need a keyboard Listner or such...

I did a small bit of research for ya...it seems you should call something like this on the onkeypress event... I guess you should put the event on all you form items... (I haven't tested this yet...)

Code: Select all

<html><head>
<script language="javascript">
function myListner(e) &#123;
		var code;
		if (!e) var e = window.event;
		if (e.keyCode) code = e.keyCode;
		else if (e.which) code = e.which;
// XX should be the code for an enter, I don't know the number for it. google should help you with this
		if (code == XX) &#123;
			document.forms&#1111;0].submit();
		&#125;
&#125;
</script>
</head><body>
<form action="target.html" method="post">
<input type="Text" name="blah" size="10" onkeypress="myListner(event)">
</form>
</body>
</html>
User avatar
twigletmac
Her Royal Site Adminness
Posts: 5371
Joined: Tue Apr 23, 2002 2:21 am
Location: Essex, UK

Post by twigletmac »

Make sure that you use noscript tags to put in a button for those people who do not have JavaScript.

Mac
User avatar
CoderGoblin
DevNet Resident
Posts: 1425
Joined: Tue Mar 16, 2004 10:03 am
Location: Aachen, Germany

Post by CoderGoblin »

For your information an example of <noscript> tag

Code: Select all

<form name="dosomthing" action="next.php">
<select name="myname" onchange="javascript:submit();"
                 <option value="0">. . .</option>
                 <option value="1">option1</option>
                 <option value="2">option2</option>
                 <option value="3">option3</option>
</select>
<noscript><input type="submit" value="Ok"></noscript>
</form>
Regards
magicrobotmonkey
Forum Regular
Posts: 888
Joined: Sun Mar 21, 2004 1:09 pm
Location: Cambridge, MA

Post by magicrobotmonkey »

Yea and you might want to check into where to put the onkeypress() im not sure if it will pick up all keypresses from being in the text field? Maybe in the body tage like onLoad or something?
Zay
Forum Newbie
Posts: 22
Joined: Tue Mar 23, 2004 3:42 pm

Post by Zay »

magicrobotmonkey wrote:Yea and you might want to check into where to put the onkeypress() im not sure if it will pick up all keypresses from being in the text field? Maybe in the body tage like onLoad or something?
yeah that was my first thought as well...

I think it can be done... You'll need to set up a global keypress listner that checks what key was pressed and then if it's an enter submit the form.

however, you will only be able to submit 1 form.

if you work with onkeypress you could create an extra par stating what form it is using this. then use the submit on the parameter.

I hope this helped.
Post Reply