how to get set of input boxes values using getElemntById?

Question

I have set of input boxes to add names and designaions.and iwant to print those in a <p> tag when user click print button. how to proceed.

<div class="form-group">
    <label for="inputRegNo" >Name & Designation<span style="color:#c0392b;padding-left:5px;">*</span></label>
    <div class="form-group">
          <input required  type="text" name="fname[]"  class="fname" onkeyUp="document.getElementById('refa5').innerHTML = this.value" placeholder="Name" />
           <input required  type="text" name="lname[]" placeholder="Designation" />
    </div>                    
</div>

<div class="form-group">
    <label for="inputRegNo" ></label>
    <div class="form-group">
        <input type="text" name="fname[]" placeholder="Name" class="fname" onkeyUp="document.getElementById('refa5').innerHTML = this.value" />
        <input  type="text" name="lname[]" placeholder="Designation" />
    </div>                  
</div>

print

<div>
    <label>Name & Designation</label>
    <p id="refa5"> - </p>
</div>

Answer 1

its looks you are new in javascript.. it's simple give the name to all the input field like

<input type="text/checkbox" name="txtName">

and in javascript you can access this field value by

<script type="text/javascript">
   var name  = document.getElementsByName("txtName");
</script>

if you wish to print the element on button click simply specify their click event on javascript like

function onClick() {

alert("helo from click function");
}

and then on button ..

<input type="button" onclick="onClick()">

Answer 2

w3schools is a great resource for this. Here is some example code on how to do this :

<button onclick="myFunction()">Click me</button>
<input id="inputID"></input>
<p id="demo"></p>

<script>
function myFunction() {
    var inputID = document.getElementById("inputID").value;
    document.getElementById("demo").innerHTML = inputID;
}
</script>

What the code above does is it takes the value of an input, then it sets the innerHTML of a <p> element to it. You can obviously do this with other things like <h1> elements as well.