SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Guru DeNasio's Avatar
    Join Date
    May 2001
    Posts
    830
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Display submit button if Javascript is disabled

    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?
    Ballot-Box.net - free polls for webmasters
    FormLog.com - free form processor

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Guru DeNasio's Avatar
    Join Date
    May 2001
    Posts
    830
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kravvitz View Post
    Have you considered using JavaScript to hide the button the page loads?
    How do I do this?
    Ballot-Box.net - free polls for webmasters
    FormLog.com - free form processor

  4. #4
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    SitePoint Guru DeNasio's Avatar
    Join Date
    May 2001
    Posts
    830
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mrhoo View Post
    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?
    Ballot-Box.net - free polls for webmasters
    FormLog.com - free form processor

  6. #6
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  7. #7
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  8. #8
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.


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
  •