0

I have a HTML with with a paragraph and a contact form. When the browser has JavaScript disabled I want to show contact form and paragraph of text.

Otherwise, I want to show the contact button, which users can click and the form shows up.

Rajendra Gurung
  • 1
  • Is it important for the contact button to be hidden when JS is disabled? – Tracy Fu Feb 09 '12 at 05:36
  • http://stackoverflow.com/questions/121203/how-to-detect-if-javascript-is-disabled please refer this for javascript enable/disable detection – Devjosh Feb 09 '12 at 05:40
  • @tracy yes coz, for the browser with js enabled, the form will show up by default. Only it's hidden when js is disabled. – Rajendra Gurung Feb 09 '12 at 05:44

3 Answers3

1

Set the button's style to display:none;

If javascript is enabled, hide the form by default and show the button.

Then when they click the contact button, show it.

$(document).ready(function(){
  $("#buttonID").show();
  $("#formID").hide();
  $("#buttonID").click(function(){
    $("#formID").show();
  });
});
Jordan Arsenault
  • 7,100
  • 8
  • 53
  • 96
0
<span id="formAndParagraph">
    <p id="Paragraph">lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
    <form id="Contact">
        Name: <input type="text"><br>
        Comment: <input type="text"><br>
    </form>
</span>
<input type="button" id="Button" value="Click me" onclick="$('#formAndParagraph').show();" style="display:none">
<script>
$('#formAndParagraph').hide();
$('#Button').show();
</script>

jsFiddle here

D'Arcy Rittich
  • 167,292
  • 40
  • 290
  • 283
0

Ok :) So here's my solution:

http://jsfiddle.net/tracyfu/Sj5cy/

And here's what it does:

  1. I set the #contact-button css to display: none; so that it's automatically hidden whether or not JS is present. This way if JS is disabled, the button doesn't show up.
  2. In the JS, I show #contact-button, then I hide #contact-form. JQuery will only work when JS is enabled anyway, so what this does is show the button and hide the form for people who have JS. For people who have JS disabled, the form is not affected and will show up like usual.
  3. I added a click event to the button to show the form.

The goal of this solution is so that there isn't a button if JS is disabled.

Tracy Fu
  • 1,632
  • 12
  • 22