Mia Legaspi Mia Legaspi - 7 months ago 15
HTML Question

How to insert form into other html file?

I'm made a form that I created into another html file which contain a form elements. What I want to do is when I click one of my navigation in my

main.html
. The
option.html
(form) that containing form will insert the elements into
main.html
in the middle instead of linking it on the another tab. Example below of my draft output.

Draft

So every time the user click the navigation all the form will show in the middle. Any tips will truly appreciate :)

main.html



body {
padding: 0;
margin: 0;
overflow-y: scroll;
font-family: Arial;
font-size: 15px;
}
#container {
background-color: #707070;
}
#menu {
width: 1250px;
margin: 0 auto;
text-align: left;
}
#menu ul {
list-style-type: none;
/*Remove bullets*/
padding: 0;
margin: 0;
position: relative;
}
#menu ul li {
display: inline-block;
}
#menu ul li:hover {
text-decoration: none;
color: black;
}
#menu ul li a,
visited {
color: #CCC;
/*Color of text*/
display: block;
/*Takes up the full width available*/
padding: 15px;
text-decoration: none;
}
#menu ul li a:hover {
color: #CCC;
text-decoration: none;
}
#menu ul li:hover ul {
display: block;
}
#menu ul ul li {
display: block;
}
#menu ul ul {
display: none;
position: absolute;
background-color: #707070;
min-width: 140px;
/*Width when hover*/
}
#menu ul ul li a:hover
/*Color of text when hover*/

{
color: #099;
}

<!doctype html>
<html>

<head>
</head>

<body>

<div id="container">

<div id="menu">

<ul>

<li>

<a href="#">Manage Books</a>

<ul>
<li><a href="#">Books</a>
<li><a href="#">Add Books</a>
</li>
</ul>
</li>
</ul>

</div>
<!--- end menu --->

</div>
<!--- end container --->

</body>

</html>





option.html



.addBooks {
clear: both;
width: 800px;
margin: 0 auto;
margin-top: 10%;
}
.addBooks label {
float: left;
width: 150px;
text-align: right;
}
.addBooks input {
text-align: left;
margin-left: 100px;
}
.addBooks select {
text-align: left;
margin-left: 100px;
}

<!doctype html>
<html>

<head>
</head>

<body>
<div id="container">

<div class="addBooks">
<h1>Add Books</h1>
<hr>
<form action="#">

<fieldset>

<label for="bookname">Book Name:</label>
<input type="text" id="bookname" name="bookname">

<br />

<label for="category">Category:</label>
<select name="category">
<option value="value1">Value 1</option>
</select>

<br />

<label for="author">Author:</label>
<select name="author">
<option value="value2">Value 2</option>
</select>

</fieldset>

</form>

</div>
<!--- end of addBooks --->

</div>
<!--- end of container --->
</body>

</html>




Answer

If jQuery is an option, you can use jQuery.get(). Add below code to your <head> section of main.html

$(function() {
  $('#menu a').click(function() {
    $.get('option.html', function(data) {
      $('#form').replaceWith(data);
    });
  });
});
body {
  padding: 0;
  margin: 0;
  overflow-y: scroll;
  font-family: Arial;
  font-size: 15px;
}
#container {
  background-color: #707070;
}
#menu {
  width: 1250px;
  margin: 0 auto;
  text-align: left;
}
#menu ul {
  list-style-type: none;
  /*Remove bullets*/
  padding: 0;
  margin: 0;
  position: relative;
}
#menu ul li {
  display: inline-block;
}
#menu ul li:hover {
  text-decoration: none;
  color: black;
}
#menu ul li a,
visited {
  color: #CCC;
  /*Color of text*/
  display: block;
  /*Takes up the full width available*/
  padding: 15px;
  text-decoration: none;
}
#menu ul li a:hover {
  color: #CCC;
  text-decoration: none;
}
#menu ul li:hover ul {
  display: block;
}
#menu ul ul li {
  display: block;
}
#menu ul ul {
  display: none;
  position: absolute;
  background-color: #707070;
  min-width: 140px;
  /*Width when hover*/
}
#menu ul ul li a:hover
/*Color of text when hover*/

{
  color: #099;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>

<head>
</head>

<body>

  <div id="container">

    <div id="menu">

      <ul>

        <li>

          <a href="#">Manage Books</a>

          <ul>
            <li><a href="#">Books</a>
              <li><a href="#">Add Books</a>
              </li>
          </ul>
          </li>
      </ul>

    </div>
    <!--- end menu --->

  </div>
  <!--- end container --->
  <div id="form">
  </div>

</body>

</html>

Comments