Question

我正在创建一个表格，一次显示一个问题。但是，当单击“查看完整表格”时，我想在其他视图上显示所有问题。我遇到的问题是以上述形式显示问题。单视图问题没有问题。

我可以在上述表格上显示该值，但实际上无法输入任何内容。那不是我想要的

例如以防万一：

（在单个视图中）问题1 ：（输入框）答案1 （全视图）问题1：答案1（所有文字，无输入框）

我想做：（单视图）问题1 ：（输入框）答案1 （全视图）问题1 ：（输入框）答案1

就像我说的那样，我知道如何获取该值（我使用了answer [i-1] = document.getElementById（i-1）.value），然后在没有输入框的情况下打印了答案。我意识到自己的错误，因此尝试使用document.getElementById（x）来获取[object HTMLInputElement]。再说一次，我只希望输入框已经填好答案（如果它已填入单个视图）。在这里做了一些搜索，并尝试使用appendTo，子孙和appendChild（对象不支持这些对象），但没有任何帮助。

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>";

    }
}

这就是我想要的（从以前的形式开始。我将输入填充到数组中，但是发现如果我对其进行了硬编码，则使用某些功能会更容易） https://imgur.com/cgarzSd

这是我目前拥有的：

https://imgur.com/Uj4FlvZ

Answer 1

这是一个基本示例，说明如何将输入元素从一种形式“移动”到另一种形式。实际上，您是在复制它，并从以前的表单中删除旧的。

您似乎遇到的主要问题是没有定义表单。

看看你怎么做：

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">

Answer 2

您的问题可能需要一些澄清，但是我很刺耳，希望我们能使您走上正确的轨道。

下面是一个简单地将输入从一个div移动到另一个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++)
{
  //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";
}

如果您确实想将输入“复制”到新的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";
}

希望这会有所帮助。干杯！

尝试将输入元素移动到另一个Div

2 个答案: