Display submit button if Javascript is disabled

**DeNasio** · Apr 17, 2007 12:58

Hello,

I have the following code on one of my sites:

Code:

<form action="my.script.php" method="post">
<b>Jump to URL:</b>
<select name="url" onChange="this.form.submit();">
<option value="....">.....</option>
<option value="....">.....</option>
<option value="....">.....</option>
</select>
</form>

As you can see there is no submit button, the form is automatically submitted when a selection is made. But this does not work if Javascript is disabled. What I want to do is display a submit button only if Javascript is disabled. Does anyone know how I can do this?

**Kravvitz** · Apr 17, 2007 13:19

I suggest you read these:
http://www.webaim.org/techniques/forms/
http://www.webaim.org/techniques/jav...s.php#onchange

Have you considered using JavaScript to hide the button the page loads?

**DeNasio** · Apr 17, 2007 13:53

Originally Posted by Kravvitz

Have you considered using JavaScript to hide the button the page loads?

How do I do this?

**mrhoo** · Apr 17, 2007 15:31

You should start with a form that does not need javascript-
if javascript is available, use it to add the event handler and hide the submit button.

**DeNasio** · Apr 17, 2007 15:46

Originally Posted by mrhoo

You should start with a form that does not need javascript-
if javascript is available, use it to add the event handler and hide the submit button.

Add event handler? Mind giving an HTML code?

**Kravvitz** · Apr 17, 2007 15:51

Here's the simplest way to do it.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<script type="text/javascript"><!--
window.onload = function(){
  if(!document.getElementById) return;
  document.getElementById('example').style.display='none';
}
// -->
</script>
</head>
<body>

<p>If JavaScript is enabled the following element will be hidden when the page 
finishes loading.</p>

<p id="example">Hello World</p>

</body>
</html>

**Pepejeria** · Apr 18, 2007 12:25

No need to use JavaScript for this

Code:

<form action="http://www.google.com" method="post">
	<b>Jump to URL:</b>
	<select name="url" onChange="this.form.submit();">
	<option value="....">.....</option>
	<option value="....">.....</option>
	<option value="....">.....</option>
	</select>

	<noscript><input type="submit"></noscript>
</form>

**Kravvitz** · Apr 18, 2007 12:37

True, you don't have to use JavaScript for this. However, it's better to use progressive enhancement (what I was suggesting) instead of graceful degradation, which is what you're suggesting. I suggest you read this recent article on this subject by Tommy.

User Tag List

Thread: Display submit button if Javascript is disabled

Thread Tools

Display

Display submit button if Javascript is disabled

Bookmarks

Bookmarks

Posting Permissions