我可以从其他页面加载表格吗？

Question

Is it possible, if so how, for JS to load a form from one page and show it in another? For example, clicking a button on the '/note/index' page and it reveals a form found in the '/note/new' but i am still in the '/note/index' page.

I know I can do this by putting all the html in the index page.

Further questions: Is it recommended to do what I ask?

my current HTML for /notes/index.html.erb

<script>
    $(function() {

  // contact form animations
  $('#newNote').click(function() {
    $('#newNoteForm').fadeToggle();
  })
  $(document).mouseup(function (e) {
    var container = $("#newNoteForm");
    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        container.fadeOut();
    }
  });

});
</script> 

<!--New Note-->
<div class="row first-content-row">
    <div class="col-xs-3">
        <p><%= notice %></p>
        <div class ="col-sm-offset-1 btn btn-lg btn-success">
        <div id = "newNote">New Note</div>
        </div>
    </div><!--End col-->
</div><!--End row -->

<!-- This is the note that will be appearing -->
<div id="newNoteForm">
  <h1>Add a new Note</h1>  
    <%= form_for @session_note, url: {action: "create"}, html: {class: "nifty_form"} do |f| %>
      <%= f.text_area :note, size: "60x12" %>
      <%= number_field(:session_note, :session_id) %>
      <%= f.submit "Save" %>
    <% end %>
</div>

Answer 1

It's possible with AJAX, if your using jquery the code could be:

$.get('/newpageurl/', function(data) {
    var otherPage = $(data); //Get the other page dom as data
    var otherPageForm = $(otherPage).find('form#myform'); // find the form
    $('body').append('otherPageForm');// place the form in the current page
});