How to add a class to a form tag that only present on click event?

Question

How to add a class to a form tag that only present on click event? For example: I do have this...

<p>Below is a form: <span>show form</span></p>
<div class="container"></div>

when user clicks the "show form", jQuery will add a new form inside the class "container"

<p>Below is a form:</p>
<div class="container">
   <form>
       <-- some code here -->
   </form>
</div>

note: The form still does not exist on first page load. It will only shows up when a user clicks on the span. Is there a way wherein the jQuery will just load after the form shows up?

This is how I plan to make it on jQuery, but it don't work, please correct this...

$("span").click(function(){
   $(".container form").ready(function(){
      $(this).addClass("active");
   })
})

Thank you.

score 1 · Answer 1 · answered Oct 08 '16 at 09:31

1

How about

$(document).ready(function () {
    $("#form-button").click(function() {
        $(this).addClass("yourCSSclass");
  })
});

This will add the desired CSS class to your form button ID when clicked.

answered Oct 08 '16 at 09:31

ivetame

213
3
14

If you would want to also be able to remove the added class, say on another click event, then you can do: `$(document).ready(function () { $("#form-button").click(function() { $(this).toggleClass("yourCSSclass"); }) });` – ivetame Oct 08 '16 at 13:23

score 1 · Accepted Answer · answered Jul 19 '11 at 04:03

1

I think that you might want to make use of the .live jQuery event. This allows you to attach events to elements created after the DOM has loaded. For instance when you load additional elements via AJAX. In this simple example you click on 'click me.' A form is dynamically loaded and it is given the active class.

http://jsfiddle.net/v5j42/1/

$("span#clicker").click( function() {
   $("div#container").append('<form class="foo"></form>');

});

$(".foo").live('DOMNodeInserted', function() {   
    $(this).addClass("active");
});

answered Jul 19 '11 at 04:03

mrtsherman

39,342
23
87
111

Hmmm, after posting this I started to research DOmNodeInserted event. It looks like this is deprecated. I don't know a workaround though. Can anyone help? SO discussion on this page - http://stackoverflow.com/questions/2143929/domnodeinserted-equivalent-in-ie – mrtsherman Jul 19 '11 at 04:08
@Eron - good point. I feel as though there must be some other event that you can tie in here though and this would work for you. I can't figure it out though. – mrtsherman Jul 19 '11 at 15:23

score 0 · Answer 3 · answered Jul 19 '11 at 02:42

0

$("span").click(function(){
   $(".container form").addClass("active");
})

document.ready goes outside of the binding code:

$(document).ready(function () {
    $("span").click(function(){
        $(".container form").addClass("active");
    })
});

answered Jul 19 '11 at 02:42

Jasper

75,717
14
151
146

why don't you hard-code in the form and give it a style of display: none; then on-click set its display to be 'block'? – Jasper Jul 19 '11 at 02:45
i can't touch the code, it is already built. I just need to add a class name after the form loads – Ryan Jul 19 '11 at 02:47
$(document).ready(); should not fire until all dom elements are loaded and ready, so if the form is a part of the page the second block of code in my answer should attach the 'active' class to any forms inside of any elements with the 'container' class (http://api.jquery.com/ready/) – Jasper Jul 19 '11 at 02:51
the form does not exist yet on page load. it only shows after the user clicks. is there a way on how to tell jQuery to addClass after the form shows up? – Ryan Jul 19 '11 at 03:08

score 0 · Answer 4 · answered Jul 19 '11 at 03:38

you can do it in this way..not confirm but should solve your problem.

<form id="form"></form>

try to check form id exist in DOM or not..like this..

$("span").click(function(){
var formId= $("em").attr("id");
if(formId!=undefined && formId == "form"){
   $(this).addClass("active");// will add a class on span
   $('#form').addClass("active"); // will add a class on form tag
     }
});

hope this helps you...

score 0 · Answer 5 · answered Jul 19 '11 at 03:44

I think you might be looking for something as simple as this?

HTML

<p>Below is a form: <span id="showForm">show form</span></p>
<div class="container">
    <form>
        <input />
    </form>
</div>

jQuery

$('.container').hide();

$('#showForm').click(function(){
    $('.container').show();    
});

http://jsfiddle.net/jasongennaro/9YNLP/1/

How to add a class to a form tag that only present on click event?

5 Answers5