Question

我正在使用javascript创建一个动态表单，其中包含下拉列表和输入文本，如下所示：

$(document).ready(function() {  
    document.write("<FORM>");

    document.write("<SELECT NAME='SelectMenu'>");
    for (var i = 1; i <= 3; i++)
    document.write("<OPTION>" +"one"+"</OPTION>");
    document.write("<OPTION>" +"two"+"</OPTION>");
    document.write("<OPTION>" +"three"+"</OPTION>");

    document.write('</SELECT>');
    document.write("<br>Entry  <input type='text' name='myInputs[]'>");
    document.write("<button onClick="ChoixDeQuestion()">Show</button>");

    document.write('</FORM>');
});

这里的问题是我无法访问这些字段，因为它们甚至不存在于页面的源代码中。我想获取输入的文本值和列表中的选定项。所以请任何想法!!

由于

Answer 1

您应该使用动态元素并创建新的HTML元素，而不是使用基本语法“document.write（...）”。

Document.write实际上只显示文本而没有真正插入它。如果您想稍后编辑HTML，则需要创建元素并将其添加到文档中。

例如，使用“CreateElement”语法。关于如何动态创建表单的Here's a good tutorial to get you started。之后，您可以向其追加元素，并以此方式创建更多元素。

Answer 2

应避免使用document.write。这不是一个好习惯。

您正在使用jQuery，并且很容易在jQuery中动态创建元素。

你可以这样做，

$(document).ready(function() {  
    var options = '';
    for (var i = 1; i <= 3; i++)
    options +='<option>one</option>';
    options +='<option>two</option><option>three</option>';
    var html = '<select>' + options + '</select><br>Entry <input type="text" name="myInputs[]" />';
    var button = $('<button>Show</button>').click(function(e){
        // Code to be executed when button is clicked

        e.preventDefault();  // since by default button submits the form
        alert('button is clicked');
    });
    $("<form></form>").append(html).append(button).appendTo('body');
});

jsFiddle

如果你知道一个基本的jQuery，一切都是自我解释的，但如果有什么事情困扰你，请告诉我:)）

Answer 3

如果您已经在使用jQuery，请更多地使用它：

$(document).ready(function() {
    var form = $('<form />'),
    dropdown = $('<select />', {
        name: 'SelectMenu'
    }),
    textbox = $('<input />', {
        type: 'text',
        name: 'myInputs[]'
    }),
    button = $('<button />', {
        text: 'Show'
    }).on('click', ChoixDeQuestion);

    for (var i = 1; i <= 3; i++) {
        $('<option />', {
            text: i
        }).appendTo(dropdown);
    }

    form
        .append(dropdown)
        .append('<br />Entry')
        .append(textbox)
        .append(button)
        .appendTo('body');
});

这是创建所有节点并以一种很好的方式将它们插入到DOM中;你也可以用你的html创建一个大字符串contents，然后执行以下操作：

$(contents).appendTo('body');

使用javascript从动态表单元素中获取值

3 个答案: