Question

我需要在asp.net中创建一个表单，我必须使用动态文本框。通过一些解决方法，我设法在用户单击“添加”按钮时创建文本框，并且还可以检索它们的值（在服务器端）。现在我在客户端获取价值时遇到问题。我想如果用户点击提交而不提供任何数据，则不应验证数据。

以下是Javascript中用于创建我使用的文本框的代码。

 function GetDynamicTextBox(value) {
        return '<input name = "DynamicTextBox" type="text" value = "' + value + '" />' +
            '<input type="button" value="Remove" onclick = "RemoveTextBox(this)" />'
    }
    function AddTextBox() {
        var div = document.createElement('DIV');
        div.innerHTML = GetDynamicTextBox("");
        document.getElementById("TextBoxContainer").appendChild(div);
    }

    function RemoveTextBox(div) {
        document.getElementById("TextBoxContainer").removeChild(div.parentNode);
    }

    function RecreateDynamicTextboxes() {
        var values = eval('<%=Values%>');
        if (values != null) {
            var html = "";
            for (var i = 0; i < values.length; i++) {
                html += "<div>" + GetDynamicTextBox(values[i]) + "</div>";
            }
            document.getElementById("TextBoxContainer").innerHTML = html;
        }
    }

单击ADD按钮时执行此代码。

<input id="btnAdd" type="button" value="Add" onclick="AddTextBox()" class="ANPClass"/>

和TextBoxContainer只是一个DIV

<div id="TextBoxContainer" style="text-align: center;" class="step" >
</div>

方案如果用户点击单选按钮，他会点击“添加”按钮，他可以生成动态文本框。如果他点击并且不提供值，那么在我的sql中，我将获得值为“”（即好））但如果他单击单选按钮而没有单击ADD按钮，则提交表单，我得到NULLVALUE异常，

所以基本上我想捕获客户端上的动态文本框数据，以便我可以验证数据并显示错误消息，值为空。

我应该考虑事件或什么。感谢任何帮助。

由于

Answer 1

选中此link，其中添加了您的代码fiddler。

<input id="btnAdd" type="button" value="Add" onclick="AddTextBox()" class="ANPClass"/>
<div id="TextBoxContainer" style="text-align: center;" class="step" >
</div>
<input type="button" value="save" onclick="validate();" />

的Javascript

function GetDynamicTextBox(value) {
        return '<input name = "DynamicTextBox" type="text" value = "' + value + '" />' +
            '<input type="button" value="Remove" onclick = "RemoveTextBox(this)" />'
    }
function validate()
{
    var inp = document.getElementsByTagName('input');
    for(var i in inp){
        if(inp[i].type == "text"){
            if(!/^\d{1,}$/.test(inp[i].value)){
                alert('Invalid value detected');
                inp[i].focus();
                break;
            }
        }
    }
}

function AddTextBox() {
        var div = document.createElement('DIV');
        div.innerHTML = GetDynamicTextBox("");
        document.getElementById("TextBoxContainer").appendChild(div);
    }

    function RemoveTextBox(div) {
        document.getElementById("TextBoxContainer").removeChild(div.parentNode);
    }

    function RecreateDynamicTextboxes() {
        var values = eval('<%=Values%>');
        if (values != null) {
            var html = "";
            for (var i = 0; i < values.length; i++) {
                html += "<div>" + GetDynamicTextBox(values[i]) + "</div>";
            }
            document.getElementById("TextBoxContainer").innerHTML = html;
        }
    }

检查此修改后的代码here

在输入中添加了类

类=＆＃34;动态＆＃34;

和javascript代码

var inp = document.getElementsByClassName（＆＃39; dynamic＆＃39;）;

function validate()
{
    var inp = document.getElementsByClassName('dynamic');
    for(var i in inp){

        if(inp[i].type == "text"){
            if(!/^\d{1,}$/.test(inp[i].value)){
                alert('Invalid value detected');
                inp[i].focus();
                break;
            }
        }
    }
}

在客户端验证动态文本框上的数据

1 个答案: