Creating Dynamic HTML with Javascript

javascript html dynamic

21,306

Solution 1

You are trying to use the function document.getElementById("itemInfo"); which looks for the id itemInfo. There is no element with the id itemInfo in your page. Create the div as follows:

<div class="itemInfo" id="itemInfo"></div>

This should help you get a reference of the div element.

EDIT: The Error is in the function, node.insertBefore(new Element,reference Element); is the correct function.

Solution 2

I changed your Javascript to this

function newItem(){  
     newInput="<p>Item: <input type="+"text"+" name="+"item"+"/></p>";
     document.getElementById("itemInfo").innerHTML=newInput;
   }

Here's a working FIDDLE

21,306

Author by

sreisman

Updated on July 23, 2020

Comments

sreisman almost 4 years

I have been trying to dynamically append HTML input forms using a JS function to a webpage but am having trouble inserting them into the correct location. I have tried to create an empty div tag on line 40:

<div class="itemInfo"></div>

However, when I try to locate that tag from within my JS function, with the findElementById() function it seems not to find it. I want to create a copy of the three input forms above the empty tag I created and append them underneath, but no matter what I have tried I have not been able to figure out how to put the forms in that exact location. My JS function is as follows:

function newItem(){
  instance++;
  var oldInput = document.getElementById("itemInfo");
  var newDiv = document.createElement("INPUT");
  newDiv.name = "myinput";
  newDiv.value = "Enter Here";
  oldInput.insertBefore(newDiv);
}

Rather than creating the forms again in this function, I would like to duplicate the following and simply append it after itself:

<p>Item: <input type="text" name="item"/> 
   Qty: <input type="text" name="qty"/>
   Color: <input type="text" name="color"/></p>
    <input type ="button" value="Add Item" onclick="newItem();"/>
    <div class="itemInfo"></div>

I tried to wrap the three forms in a tag and calling that by Id, but it did not seem to work either, which is why I tried to make an empty tag after it. I have searched everywhere and there is a lot of information regarding similar issues but I can't seem to apply the solutions to my situation. I really appreciate any help. Here is the entire page:

    <!DOCTYPE html>
<html>
  <head>
    <script type ="text/javascript">
      var instance = 0;

    function newItem(){
      instance++;
      var oldInput = document.getElementById("itemInfo");
      var newDiv = document.createElement("INPUT");
      newDiv.name = "myinput";
      newDiv.value = "Enter Here";
      oldInput.insertBefore(newDiv);
    }

    </script>
    <title>Welcome to New Age Embroidery!</title>
    <style type="text/css">
     body {font-family:sans-serif;color:#4f494f;}
     form input {border-radius: 7.5px;}
     h5 {display: inline;}
     .label {text-align: right}
     .ordersBook {float:left; padding-top: 10px;}
     .name {width:100%;float:left; padding:3px;}
     .wrapper { padding-left: 25px; padding-top: 20px}
    </style>
   </head>
   <body>
   <input type ="button" id="btnAdd" value="Add Item" onclick="newItem();"/>
    <div class = "wrapper">
     <h1>Welcome to New Age Embroidery!</h1>
     <div class="ordersBook_input">
     <form method ="post" class="form" action = "/newguest" method = 'post'>
       Name: <input type="text" name="name"/>

       <p>Item: <input type="text" name="item"/> 
       Qty: <input type="text" name="qty"/>
       Color: <input type="text" name="color"/></p>
        <input type ="button" value="Add Item" onclick="newItem();"/>
        <div class="itemInfo"></div>

       <p>Phone: <input type="text" name="phone"/>
       Email: <input type="text" name="email"/>
       Artwork: <input type="file" name="file"/>
       <p>Quote: <input type="text" name="quote"/></p>
     </p>
       <p>Notes: <textarea cols="40" rows="10"></textarea>
     </p>
       <input type="submit" value='Add Order'/>
     </form>
     </div>
     <div class ="ordersBook">
      <h3>Orders</h3>
      %for name in mynames:
      <div class="name">
      <h5>Name:</h5> {{name['name']}}
       <h5>Phone:</h5>{{name['phone']}}
       <h5>Email:</h5>{{name['email']}}
       <form action="/view/{{name['_id']}}" method='GET' ><input type="submit" value="View">
       </form>
       <form action="/remove/{{name['_id']}}" method='POST'> <input type="submit" value="Remove" onClick="confirm('Are you sure you want to permenantly remove this order?')">

       </form>
     </div>
     %end
     </div>
    </div>
   </body>
</html>

Johan Nordli almost 11 years

Change <div class="itemInfo"></div> to <div id="itemInfo"></div> and try again
sreisman almost 11 years

Thank you for that suggestion but I changed it and it still does not add anything to the html form.
AnaMaria almost 11 years

Why don't you use innerHTML/outerHTML to create a DIV.

sreisman almost 11 years

Even after adding the id to my <div> tag, once I click the button nothing is updated. The button does work because if I change the function to "document.body.appendChild(newDiv);" it is appended to the document but not in the correct location.
Aashray almost 11 years

The problem with your code is that the function oldInput.insertBefore(newDiv); requires two parameters, node.insertBefore(new Element,reference Element);.
sreisman almost 11 years

Thank you very much for your help I really appreciate it! I want the page to generate a new item field every time the button is pressed however, which is why I was trying to append a new element rather than write new HTML with the innerHTML function. Writing it that way would only allow for the creation of one extra item input.