Trying To Move Input Element to Another Div

Question

I am creating a form that shows one question at a time. I would like to show all questions, though, on a different view when "View Complete Form" is clicked. The problem I am having is showing the questions in said form. There's no issue with the single view questions.

I am able to display the value, on said form but I cannot actually enter anything. That's not what I want.

Ex. in case any one is confused:

(In single view) Question 1: (input box) Answer 1 (In full view) Question 1: Answer 1 (All text, no input boxes)

I would like to do: (In single view) Question 1: (input box) Answer 1 (In full view) Question 1: (input box) Answer 1

Like I said, I see how I can get the value (I used answer[i-1] = document.getElementById(i-1).value) then I print the answer BUT WITHOUT THE INPUT BOX. I realized my mistake so I tried document.getElementById(x) which gives me [object HTMLInputElement]. Again, I just want the input box with the answer already filled in IF it's filled on the single view. Did some searching on here and tried to use appendTo, descendants and appendChild (object does not support these) but nothing helped.

html

<div id="questionnaire-question">Click 'Start' to begin...</div>
<div id="input-questionnaire">
  <input type='text' class='form-control' name='reqEng' id='1' style="display:none" placeholder="Requesting Engineer" required>
</div>
<button id="view-form" onclick="viewForm()">View Complete Form</button>
<form id="full-form" style="display:none">
  <div id="full-form-question"></div>
  <input type="reset" name="reset" value="Reset Fields">
  <input type="submit" name="submit" id="submitQuestionnaire" value="Submit Questionnaire">
</form>
</div>

js

function viewForm() {
    for (var x = 0; x < 44; x++) {
        //form.appendChild(document.getElementById(x));         //  Didn't work
        //form.insert(document.getElementById(x).descendants()[x]);     //  Not supported
        //document.getElementById(x).style.display = "block";                   //  Loop for questions and answers to populate
        //document.getElementById(x+1).appendTo(form);
        //fullForm.innerHTML += questions[x]+ ": " + answer[x+1] + " <br>";
        fullForm.innerHTML += questions[x] + ": " + document.getElementById(x + 1) + " <br>";

    }
}

This is what I want (from a previous form. I populated the inputs in an array but found it easier with some functionalities if I had just hard coded it) https://i.sstatic.net/RlPzA.jpg

This is what I currently have :

https://i.sstatic.net/OKdBc.jpg

Answer 1

Your question could possibly use some clarification, however I am taking a stab at it hoping that we can get you on the right track.

Below is an example of simply moving the input from one div to another:

function viewForm(){
//gets all of the inputs held in the "input-questionnaire" div
var inputs = document.getElementById('input-questionnaire').getElementsByTagName('input');

//loop through the collection of inputs
for(var i = 0;i < inputs.length; i++)
{
  //if you want to ensure input is no longer hidden when moved
  //inputs[i].style.display = "block";

  //move the element to the new div
  document.getElementById("full-form-question").appendChild(inputs[i]);
}
//probably want to show the hidden form at this point
document.getElementById("full-form").style.display = "block";
}

Here is another option if you actually want to "copy" the input to the new div:

function viewForm(){
//gets all of the inputs held in the "input-questionnaire" div
var inputs = document.getElementById('input-questionnaire').getElementsByTagName('input');

//loop through the collection of inputs
for(var i = 0;i < inputs.length; i++)
{ 
  //clone the current input
  var clone = inputs[i].cloneNode();

  //make sure the question is visible?
  clone.style.display = "block";

  //append the clone to your "full-form-question" div
  document.getElementById("full-form-question").appendChild(clone);  
}
//probably want to show the hidden form at this point
document.getElementById("full-form").style.display = "block";
}

Hope this helps. Cheers!

Answer 2

Here's a basic example of how you can "move" input elements from one form to another. In reality you're making a copy of it and removing the old one from the previous form.

It looks like the main problem you're having is that you're not defining the form.

Take a look at how you could go about it:

function viewForm() {
  const form1 = document.getElementById('form-1')
  const form2 = document.getElementById('form-2')
  for (var x = 1; x <= 1; x++) {
    let input = document.getElementById(x)
    form1.remove(input)
    form2.append(input);
    const span = document.createElement('span');
    span.innerText = `${x} is now in form2`
    form2.appendChild(span)
  }
}

document.getElementById("btnMove").addEventListener('click', viewForm);

<div>
  Form 1
  <form id="form-1">
    <input type='text' class='form-control' name='reqEng' id='1' placeholder="Requesting Engineer" required>
  </form>
</div>

<div>
  Form 2
  <form id="form-2">
  </form>
</div>

<input type="button" id="btnMove" value="move input">