How to show and close form on click of a div?

Question

When a div is clicked I want to show a form, as done on this page . This is what I have tried ( fiddle ):

$(document).on("click","#tawkchat-minified-container",function() {
    var htmldynamic = '  <form id="test" action="test.php">\
<div>\
  Test: <input name="blah" value="test" type="text">\
</div>\
</form>'
    $("#maximizeChat").html(htmldynamic);
});

I don't know if this is the right way to do it. Is there a better approach?

Answer 1

Adding large chunks of HTML as JavaScript variables is not good practice. It is easy to make errors in the HTML as you have to read it awkwardly embedded in the JS.

A better approach is to include the HTML code with the rest of your markup, but use CSS to hide it. Then you can just show it using JavaScript when it is pressed.

HTML:

<div id="my-form-container">
  <div id="my-form-header">My form</div>
  <form id="my-form" action="test.php">
    <div>
      Test: <input name="blah" value="test" type="text">
    </div>
  </form>
</div>

CSS:

#my-form { 
  display: none; /* This will hide the form. */
}

JavaScript:

//When the container is clicked...
$("#my-form-container").click(function() {
  //...show the form.
  $("#my-form").show();
});

Answer 2

Use this approach will definitely solve your problem

 $(document).ready(function(){ $("#tawkchat-minified-agent-container").click(function() var hlink = $("#test").val(); $("#test").click(function(){ $(".form").show() }); }); });