使用javascript從動態表單元素中獲取值

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”語法。 這是一個很好的教程，可以幫助您開始動態創建表單。 之后，您可以向其追加元素，並以此方式創建更多元素。

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');