title: Display HTML form inside another html page through Javascript
body: <p>I have two separate html files. The first one is the main page. </p>
  
  <p><a href="https://i.stack.imgur.com/d15qL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/d15qL.png" alt="Main Page"></a></p>
  
  <p>The second one is the properties panel that needs to appear on the right of the canvas of the above page whenever a tool is dropped on the canvas from the toolbox on the left. </p>
  
  <p><a href="https://i.stack.imgur.com/CBeOm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CBeOm.png" alt="enter image description here"></a></p>
  
  <p>I was doing this earlier having the properties panel form as part of the same html page as the mail page( first image). </p>
  
  <p>But since there are going to be various other forms/ property panels, I thought of extracting it to a different html form and calling them to be displayed in this position(right side) from my jsGold.js file.</p>
  
  <p>The file structure is as follows:</p>
  
  <p><a href="https://i.stack.imgur.com/6MnJA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6MnJA.png" alt="File structure"></a></p>
  
  <p>The StreamProperty.html holds the Properties Panel form in the following form</p>
  
  <pre><code>&lt;head&gt;
  &lt;link rel="stylesheet" type="text/css" href="../../CSS/style.css"&gt;
  &lt;link rel="stylesheet" type="text/css" href="../../CSS/propertybox.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div style="float: left"&gt;
      &lt;h1 class="toolbox-titlex" id="tth"&gt;Properties Panel&lt;/h1&gt;
      &lt;form class="panel"  id="lot"&gt;
          &lt;label&gt;Stream Type:&lt;/label&gt;
          &lt;div class="panel-switch"&gt;
              &lt;input type="radio" name="TypeGen" value="G" id="type_g" class="panel-switch-input" checked&gt;
              &lt;label for="type_g" class="panel-switch-label"&gt;Import&lt;/label&gt;
              &lt;input type="radio" name="TypeGen" value="A" id="type_a" class="panel-switch-input"&gt;
              &lt;label for="type_a" class="panel-switch-label"&gt;Export&lt;/label&gt;
              &lt;input type="radio" name="TypeGen" value="B" id="type_b" class="panel-switch-input"&gt;
              &lt;label for="type_b" class="panel-switch-label"&gt;Temporary&lt;/label&gt;
          &lt;/div&gt;
          &lt;input type="text" class="panel-input-streamName" placeholder="Stream Name"&gt;
          &lt;input type="text" class="panel-input-streamDef" placeholder="Stream Definition"&gt;
          &lt;input type="button" value="Save" class="panel-button"&gt;
          &lt;input type="reset" value="Reset" class="panel-button-reset"&gt;
          &lt;input type="button" value="Cancel" class="panel-button-cancel"&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>And I need to display this form through the JavaScript in the following place. Since there is no button click involved, but just a jsPlumb drop, I wasn't sure as how to get this done. </p>
  
  <p>jsGold.js</p>
  
  <pre><code>$("#container").droppable({
        accept: '.project, .query',
        containment: 'container',
        /**
         *
         * @param e --&gt; original event object fired/ normalized by jQuery
         * @param ui --&gt; object that contains additional info added by jQuery depending on which interaction was used
         * @helper clone
         */
        drop: function(e, ui) {
            var dropElem = ui.draggable.attr('class');
            alert('drop element: ' + dropElem);
            droppedElement = ui.helper.clone();
            //jsPlumb doesn't support jQuery cloneUI method.
            //So once the icon is dragged and dropped on the canvas, the clone UI class will be removed
            ui.helper.remove();
            $(droppedElement).removeAttr("class");
            // repaint --&gt; Recompute and position all the connections
            jsPlumb.repaint(ui.helper);
            //Add the 'pro' class which has the same styling as the 'project' class but differs in functionality
            //This avoids the duplication of another project class when one project class is being dragged and dropped
            if (dropElem == "project ui-draggable") {
              var newAgent = $('&lt;div&gt;').attr('id', i).addClass('pro');
              //Reset Property fields
              $("#lot")[0].reset();
              //Display the Properties panel when the element is Clicked
              $(".toolbox-titlex").show();
              $(".panel").show();
            } else {
              var newAgent = $('&lt;div&gt;').attr('id', i).addClass('que');
              alert("que added");
            }
  
            //Reset Property fields
            $("#lot")[0].reset();
  </code></pre>
  
  <p>Instead of the following line in the above file I need an alternative to do this</p>
  
  <pre><code>//Display the Properties panel when the element is Clicked
  $(".toolbox-titlex").show();
  $(".panel").show();
  </code></pre>