Question

我正在处理一个用户可以添加多个输入的表单，如：

<script type="text/javascript">
   <!--

   var counter = 0;
   var limit = 4;
   window.onload = moreFields;
   function moreFields() {
    if (counter == limit) {
              alert('You have reached the limit of adding ' + counter + ' inputs');
         }
         else

    var newFields = document.getElementById('sa-groep').cloneNode(true);
        newFields.id = '';
        newFields.style.display = 'block';

    var newField = newFields.childNodes;
    for (var i = 0; i < newField.length; i++) {
        var hetId = newField[i].id
        if (hetId)
            newField[i].id = hetId + counter;
    }

    var insertHere = document.getElementById('writeroot');
    insertHere.parentNode.insertBefore(newFields,insertHere);

    counter++;
    }

这很好用，所有输入都得到了他们唯一的ID，但后来我想通过getElementsByClassName抓住所有输入值更好所以我做了这个来抓住价值观：

function getClassValue() {

    var secAut = [];
    var readyItems = document.getElementsByClassName('SA');
        for(var i = 0; i < readyItems.length; i++){
        secAut.push(readyItems[i].value);
        document.write(3011+i+  " contains: " + secAut[i] + "<br />");
        }
        }

html代码是：

<body>

<div id="sa-groep" style="display: none">
    <input class="SA" id="sa_" value=" " /> 

    <select class="RC" id="rc_"> 
        <option>Rating</option>
        <option value="excellent">Excellent</option>
        <option value="good">Good</option>
        <option value="ok">OK</option>
    </select><br /><br />

    <input type="button" value="Remove review"
        onclick="this.parentNode.parentNode.removeChild(this.parentNode)" /><br /><br />

</div>

    <span id="writeroot"></span>

    <input type="button" onclick="moreFields()" value="Give me more fields!" />

    <input type="button" onclick="getClassValue()" value="Send form" />

</body>

但它唯一显示的是：3011包含：那么我做错了什么？

Answer 1

初看起来我建议您更改document.write（替换文档的所有文本），而是使用console.log（“something ..”）或特定div中的属性innerHTML。

document.write，正如我之前所说，用传递的字符串替换所有页面。

Answer 2

在这个函数中，循环需要从1开始，因为第0个元素是隐藏（克隆）的元素。

function getClassValue() {

  var secAut = [];
  var readyItems = document.getElementsByClassName('SA');

  for (var i = 1; i < readyItems.length; i++) {
    secAut.push(readyItems[i].value);
    document.write(3011+i+  " contains: " + secAut[i - 1] + "<br />");
  }
}

还有一些其他问题，在moreFields中的else后面缺少大括号。

Here's a working fiddle

Answer 3

花括号旁边的问题（感谢@James）是克隆隐藏字段，这些字段在数组的第一个位置给出了空结果。要删除数组的第一个元素，我必须用shift()删除它。它可以工作，可能它会更好，但这是我的解决方案：

function getClassValue() {

var secAut = [];    // array met de namen van de secundaire auteurs
var readyItems = document.getElementsByClassName('auteur');
    for(var i = 0; i < readyItems.length; i++){
    secAut.push(readyItems[i].value);
    }
var secAutMinus = secAut.shift(); // 1 element verwijdert uit array ivm dat de eerste input leeg is (display: none)

var relCode = [];   // 2e array met de relatiecodes
var relCodeready = document.getElementsByClassName('relcode');
for(var i = 0; i < relCodeready.length; i++){
    relCode.push(relCodeready[i].value);
    }
var relCodeMinus = relCode.shift(); // 1st element verwijderen

    for(var k= 0; k < secAut.length; k++){
    console.log(3012+k+  ' contains: ' + secAut[k] + ' is ' + relCode[k] + '<br/>'); //  uitlezing arrays minus het eerste lege element
    }
    }

通过数组从输入字段获取值

3 个答案: