CODEWITHSUNDEEP
jqueryhtml
Rajendra Gurung
Rajendra Gurung

Reputation: 1

Use Jquery selector to add a HTML tag

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.

Upvotes: 0

Views: 90

Answers (3)

Tracy Fu
Tracy Fu

Reputation: 1662

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.

Upvotes: 0

D'Arcy Rittich
D'Arcy Rittich

Reputation: 171411

<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

Upvotes: 0

Jordan Arsenault
Jordan Arsenault

Reputation: 7388

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();
  });
});

Upvotes: 1

Related Questions