0

我在使用标识元素时遇到问题。基本上，我想创建一个简单的 html 表单，用户可以在其中输入电话号码 - 与特定代码相关 - 需要验证并发送到特定文件夹。

但是，我想让用户可以输入任意数量的电话号码。所以对我来说使用克隆方法似乎是合乎逻辑的。但是，使用这种方法的不利方面是身份始终相同。换句话说，如果电话号码输入错误，我无法将用户引向不符合验证规则的输入文本。

我已经尝试了几件事，但我根本不知道如何将标识元素“Tel”增加 1，或者验证每个输入文本。

您可以在下面找到我的代码。我使用 getElementsByName 方法是因为 Firefox 会自动为每个输入名称分配一个递增的数字。但是，如果我能找到一种方法为使用的每个输入文本将标识增加 1，我会更喜欢这种工作方式。我对每一个建议都持开放态度，但我更喜欢使用纯 JavaScript，因为我不熟悉 JQuery。

提前谢谢。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SMS</title>
</head>
<body>

<script type="text/javascript">

var counter = 0;

function moreFields() {
    counter++;
    var newFields = document.getElementById('readroot').cloneNode(true);
    newFields.id = '';
    newFields.style.display = 'block';
    var newField = newFields.childNodes
    for (var i=0;i<newField.length;i++) {
        var theName = newField[i].name;
        if (theName)
            newField[i].name = theName + counter;
    }
    var insertHere = document.getElementById('writeroot');
    insertHere.parentNode.insertBefore(newFields,insertHere);
}

window.onload = moreFields;


function checkPhone() {

var x=document.getElementsByName("Tel").length;


var TotTel = new Array();

for(i = 0; i < x; i++)
{
TotTel[i] += document.getElementsByName('PhoneNumber')[i].value;


if(TotTel[i] == "" || TotTel[i] == null)
{
alert("Please enter a phone number");
return false;
}

else if(isNaN(TotTel[i]))
{
    alert("You can only enter numbers");
    return false;
}
}
alert("Validation ok");
return true;
}

</script>


<div id="readroot" style="display:none">

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

    Phone number:   <input name="PhoneNumber" class="Tel" id="Tel" />

    SMSCode: <select name="SMSCodes">
        <option>Codes</option>
        <option value="B2BNL"> B2BNL </option>
        <option value="B2BFR"> B2BFR </option>
        <option value="B2BEN"> B2BEN </option>
        <option value="B2CNL"> B2CNL </option>
        <option value="B2CFR"> B2CFR </option>
        <option value="B2CEN"> B2CEN </option>
        <option value="AMNL"> AMNL </option>
        <option value="AMFR"> AMFR </option>
        <option value="PMNL"> PMNL </option>
        <option value="PMFR"> PMFR </option>
        <option value="PMPNL"> PMPNL </option>
        <option value="PMPFR"> PMPFR </option>
        <option value="BWAYAM"> BWAYAM </option>
        <option value="BWAYPM"> BWAYPM </option>
        <option value="BWAYPMP"> BWAYPMP </option>
        <option value="BWAY18"> BWAY18 </option>
        <option value="SPEOSNL1114"> SPEOSNL1114 </option>
        <option value="SPEOSFR1114"> SPEOSFR1114 </option>
        <option value="SPEOSNL1417"> SPEOSNL1417 </option>
        <option value="SPEOSFR1417"> SPEOSFR1417 </option>
        <option value="SPEOSNL1721"> SPEOSNL1721 </option>
        <option value="SPEOSFR1721"> SPEOSFR1721 </option>  
    </select><br /><br />
</div>

<form name="SMSForm" action="" onsubmit="checkPhone()" method="post">

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

    <input type="button" onclick="moreFields()" value="More Phone numbers" />
    <input type="submit" value="Send" />

</form>

</body>
</html>
4

1 回答 1

0

您的代码中有多个错误，如果您修复它应该可以工作。

var x=document.getElementsByName("Tel").length;

上面的表达式计算为 0，因为“Tel”是文本字段的 id。

for(i = 0; i < x; i++){

请注意，Firefox 将 1 分配给第一个文本字段，而不是 0。

TotTel[i] += document.getElementsByName('PhoneNumber')[i].value;

上面的代码行错误，因为它只返回名称为“PhoneNumber”的节点，而不是“PhoneNumberSomething”。你可以尝试类似的东西

TotTel[i] += document.getElementsByName('PhoneNumber'+i)[0].value;

例如 PhoneNumber1 是一个唯一名称，因此该方法返回一个元素数组。请注意，用户可以添加更多电话号码字段，然后删除第一个。生成的数字序列将为 1、3、4...，但 PhoneNumber2 不存在。

我虽然有两种方法来处理这个问题。

第一个是构造一个数组或类似的东西来在你克隆它时存储节点并在用户删除它时从数组中删除，这样你就可以从该数组中找到任何克隆的节点。

arr[counter] = document.getElementById('readroot').cloneNode(true);

第二种方法使用jquery http://api.jquery.com/attribute-contains-selector/

$("form input[name*=PhoneNumber]")

上面的选择器将选择表单中名称包含 PhoneNumber 的所有文本字段。

于 2013-06-27T13:16:26.290 回答