Question

我已经创建了一个表单，该表单应该提交数据，但是在提交之前，我希望用户先预览他们填写的内容，然后再单击“提交”按钮。

我已安装的JavaScript函数仅显示来自文本字段之一的输入值。

我希望每个文本字段都能显示其输入值。

当前，我从具有相同ID的文本字段中仅获得一个值。

如何调整代码以显示每个文本字段的值。

// function and element to view input value
function myFunction() {
  var Milstonedescription =
    document.getElementById("milstanedetails").value;
  document.getElementById("Milestonesdescriptionvalue").innerHTML =
    Milstonedescription;
}

<input type="text" class="milstone" id="milstanedetails" placeholder="Describe the milestone or task you will complete"  oninput="myFunction()" name="milestone[]">

<input type="text" class="milstone" id="milstanedetails" placeholder="Describe the milestone or task you will complete"  oninput="myFunction()" name="milestone[]">

<p class="halffieldcontainer" id="Milestonesdescriptionvalue"></p>

Answer 1

代码上的问题是，您在多个输入字段上使用了相同的id，这是不可能的，因为id是唯一的，并且无论您将只获得具有匹配ID的第一个元素。

如果要从每个字段中获取值，则应使用getElementsByClassName（'className'）并循环执行，这似乎与您要执行的操作相对应。

编辑：

是的，最后一个版本无法正常运行，我对此进行了编辑和测试。似乎现在在我这一边正常工作。（http://jsfiddle.net/tgo46se2/）

     function myFunction() {
   let milstones = document.getElementsByClassName("milstone");
   let milstoneDescription = '';
   for(let i = 0; i < milstones.length; ++i) {
        milstoneDescription += milstones[i].value;
   }
   document.getElementById("Milestonesdescriptionvalue").innerHTML = milstoneDescription;
}

Answer 2

这可能有效：

    <!doctype html>
<head></head>
<body>
    <p id="text"></p>
    <input type="text" class="milstone" id="milstanedetails" placeholder="Describe the milestone or task you will complete"  oninput="myFunction('milstanedetails','Milestonesdescriptionvalue')" name="milestone[]">

<input type="text" class="milstone" id="milstanedetails2" placeholder="Describe the milestone or task you will complete"  oninput="myFunction('milstanedetails2', 'Milestonesdescriptionvalue')" name="milestone[]">

<p class="halffieldcontainer" id="Milestonesdescriptionvalue"></p>
</body>
<script>
    // function and element to view input value
function myFunction(idEl, idPrev) {
  var Milstonedescription =
    document.getElementById(idEl).value;
  document.getElementById(idPrev).innerHTML =
    Milstonedescription;
}

</script>
</html>

我更改了第二个id，因为html中的id必须唯一。

我希望有帮助

Answer 3

首先，必须使每个输入id唯一，因为对多个元素使用相同的id值在HTML中无效。

您可以通过以下代码实现所需的目标：

function myFunction(){
  var nodes = document.querySelectorAll("[name='milestone[]']");
  var input_value1 = nodes[0].value;
  var input_value2 = nodes[1].value;
  var text = '';
  if(input_value1 && input_value1 !== ''){
    text += 'first input value: ' + input_value1;
  }
  if(input_value2 && input_value2 !== ''){
    text += '<br /> second input value: ' + input_value2;
  }
  document.getElementById("Milestonesdescriptionvalue").innerHTML = text;
}

<input type="text" class="milstone" id="milstanedetails1" placeholder="Describe the milestone or task you will complete"  oninput="myFunction()" name="milestone[]">

<input type="text" class="milstone" id="milstanedetails2" placeholder="Describe the milestone or task you will complete"  oninput="myFunction()" name="milestone[]">

<p class="halffieldcontainer" id="Milestonesdescriptionvalue"></p>

这是working snippet.

Answer 4

通过类属性获取输入。

function myFunction() {
    var milstones = document.getElementsByClassName("milstone");
    var milstoneDescription = '';

    for (var i = 0; i < milstones.length; i++) {
        var val = milstones[i].value;

        if (typeof val != "undefined")
            milstoneDescription += val + ' ';
    }

    document.getElementById("Milestonesdescriptionvalue").innerHTML = milstoneDescription;
}

如何使用javascript显示具有数组名称属性的文本字段中的输入值

4 个答案: