display a div below a selected input field? No JQuery

Question

how to display a div everytime a user focus on a input field. there is already a div and it is hidden. the position of the div will change depending on the position of the s

Answer 1

Try the following:

 formSelectedFieldInput.addEventListener("focus", setDivToInput, false);

 function setDivToInput(e)
 {
      var inputElement = e.target; //e.target refers to the element that fired the event.
      formFieldListWrapper.style.top = inputElement.offsetTop + formFieldListWrapper.offsetHeight + "px";
      formFieldListWrapper.style.left= inputElement.offsetLeft + "px";
      formFieldListWrapper.style.display = "block";
 }

The first line adds a focus event to the input. This sets the div to the input based upon it's position on the page. This is very basic and doesn't behave well when the div runs of the screen. You need to add logic for that.

Now for multiple inputs in a form

var nodes = form.querySelectorAll("input"); //replace with your form element
for (var i = 0; i < nodes.length; ++i)
{ 
    nodes[i].addEventListener("focus", setDivToInput, false); 
}

 function setDivToInput(e)
 {
      var node = e.target;
      formFieldListWrapper.style.top = node.offsetTop + formFieldListWrapper.offsetHeight + "px";
      formFieldListWrapper.style.left= node.offsetLeft + "px";
      formFieldListWrapper.style.display = "block";

 }

This code sets the focus event to all inputs in the form.

Answer 2

Why use javascript? This could be chieved by using CSS only

HTML

<div class="holder">
    <input type="text" />
    <div class="dropdown">
        <p>Testing</p>
        <p>Css ONLY</p>
        <p>Dropdown</p>
    </div>
</div>

CSS

.holder {
    position: relative;
}
.dropdown {
    position: absolute;
    border: 1px solid red;
    display: none;
}

input:focus + .dropdown {
    display: block;
}

UPDATE

little bit misred the question, if You need to position div dynamically like in this fiddle, You cloud use:

HTML

<div class="holder">
    <input type="text" />

</div>
<div class="holder" style="margin-top: 30px;">
    <input type="text" />
</div>
<div class="dropdown">
    <p>Testing</p>
    <p>Css ONLY</p>
    <p>Dropdown</p>
</div>

CSS

.holder {
    position: relative;
}
.dropdown {
    position: absolute;
    border: 1px solid red;
    display: none;
    z-index: 1;
    background: white;
}

input:focus + .dropdown {
    display: block;
}

Javascript to position dropdown div

var inputs = document.querySelectorAll('input');
for (var i = 0; i < inputs.length; i++) {
    inputs[i].addEventListener('focus', function(){
        this.parentNode.appendChild(document.querySelector('.dropdown'));
    });
}