Question

我已经创建了一个HTML表单，当我单击一个按钮时，它会根据预定义的标准创建输入文本字段，这样就可以了。现在，当我尝试使用警报检索在这些创建的文本字段中输入的值时，我无法这样做。

我有两个问题

从动态创建的文本字段中检索输入的最佳方法是什么？
你能告诉我为什么我写的代码不起作用

HTML代码

<BODY>
<FORM>
    <BR/>
    <div align = "center">
        <br /><br />
        <INPUT type="button" value="Click To Enter Values" onclick="getkeywords()"/>
    </div>
    <div align="center" id="d_div">
        <form name="permavalues" id="d_form">
        </form>
        <br/> <br/>
    </div>
</FORM>

我正在使用的javascript代码是：

function getkeywords() {
    var index_array = new Array();
    var myString = "one and a two and a three = $ and four = $ and five = $";
    var splitresult = myString.split(" ");

    for(i = 0; i < splitresult.length; i++)
    {
        if (splitresult[i] == "$" && i > 1 ) //retireving the keywords..
        {   
            add(splitresult[i-2]);
        }
    }
}

在getkeywords中调用的add函数：

function add(s) {
    //Create an input type dynamically.
    var element = document.createElement("input");
    //Assign different attributes to the element.
    element.setAttribute("type", "text");
    element.setAttribute("value", s);
    element.setAttribute("name", s);
    element.setAttribute("id", s);

    var foo = document.getElementById("d_form");

    //Append the element in page (in span).
    foo.appendChild(element);
    alert("Value=" + document.getElemebtById(s).value);
}

我认为我必须在element.setAtrribute("id",s);

Answer 1

主要问题是你不能把表格放在另一个表格里面。请删除HTML代码第2行和第13行。

另一个问题是你的错字，正如IvanL所说。

其他代码很好。

为您提供完整测试的工作代码，如下所示。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>test</title>
<script language="javascript">
function getkeywords() {
    var index_array = new Array();
    var myString = "one and a two and a three = $ and four = $ and five = $";
    var splitresult = myString.split(" ");

    for(i = 0; i < splitresult.length; i++)
    {
        if (splitresult[i] == "$" && i > 1 ) //retireving the keywords..
        {   
            add(splitresult[i-2]);
        }
    }
}
function add(s) {
    //Create an input type dynamically.
    var element = document.createElement("input");
    //Assign different attributes to the element.
    element.setAttribute("type", "text");
    element.setAttribute("value", s);
    element.setAttribute("name", s);
    element.setAttribute("id", s);

    var foo = document.getElementById("d_form");

    //Append the element in page (in span).
    foo.appendChild(element);
    alert("Value=" + document.getElementById(s).value);
}
</script>
</head>
<BODY>
    <BR/>
    <div align = "center">
        <br /><br />
        <INPUT type="button" value="Click To Enter Values" onclick="getkeywords()"/>
        <br><br><br>
        <input type="button" value="add" onclick="add('tt')">
    </div>
    <div align="center" id="d_div">
        <form name="permavalues" id="d_form">
        </form>
        <br/> <br/>
    </div>
</body>
</html>

Answer 2

从动态创建的输入中检索输入的最佳方法是什么文字字段？

我会使用JQuery遍历所有文本输入元素的表单并检索它们各自的值。

或者，您可以为每个文本字段指定一个通用名称，如“txt_”，然后将增量ID附加到字符串（IE - txt_1，txt_2，txt_3，...），然后以编程方式迭代表单字段匹配，直到您达到表示可用表单字段总数的值。该值可以是javascript整数。

例如......

$("form input[type='text']").each( function() 
{ 
    // gets text value for each field in the form
    var textFieldValue = this.value;

    // do stuff
});

Answer 3

查看Jquery代码以获取所有输入值。

$(document).ready(function()
{
    $('form#d_form input[type="text"]').each(
    function()
    {
         alert($(this).val());
    });
});

检索动态创建元素的值

3 个答案: