JavaScript 添加 HTML 表单不提交

Question

我想使用 javascript 添加一个包含输入文本的表单。
添加工作正常，但如果我点击提交按钮没有任何反应。
这是代码：

if (document.getElementById("run_name_query_box") == null) {
    var run_name_search = '<fieldset id="run_name_query_box">' +
        '<table> <td><tr>' +
        '<p style="font-size:16px"> Runname:</p>' +
        '<input type="text" style="font-size:16px" id="run_name">' +
        '<form method="post" action=query name="query_runname_name">' +
        '<input  style="font-size:14px"  value="Search Database" onclick= "run_name_querycreator()" id="search_run_name_id" type="submit" name="search_run_name_name"> ' +
        '</form>' +
        '</tr></td></table>' +
        '</fieldset>';
    $("#query_type_box").append(run_name_search);
}

run_name_querycreator() 函数设置输入值。

我已经在其他地方使用了几乎相同的东西并且它在那里工作：

'<form method="post" action=query name="query">' +                                   
'<input style="font-size:14px" value = "Search Database" onclick = "combine_query()"  id="search" type="submit" name="search" >' +
'</form>'

如果我将纯 html 部分复制到主要的 html 正文中，它也可以工作。 这是金字塔界面中使用的 mako 文件的全部部分。

Answer 1

我认为您的 HTML 格式不正确。我不认为表单元素可以是表格元素的子元素。

你的代码应该是这样的，

var run_name_search = '<fieldset id="run_name_query_box">' +
    '<form method="post" action=query name="query_runname_name">' +
    '<table>'+
    '<tr><td>' +
    '<p style="font-size:16px"> Runname:</p>' +
    '<input type="text" style="font-size:16px" id="run_name">' +
    '<input  style="font-size:14px"  value="Search Database" onclick= "run_name_querycreator()" id="search_run_name_id" type="submit" name="search_run_name_name"> ';
$("#query_type_box").append(run_name_search);

这是您的代码生成的 HTML，

<fieldset id="run_name_query_box">
    <p style="font-size:16px">Runname:</p>
    <input style="font-size:16px" id="run_name" type="text">
    <input style="font-size:14px" value="Search Database" onclick="run_name_querycreator()" id="search_run_name_id" name="search_run_name_name" type="submit">
    <table>
        <tbody>
            <tr>
                <td></td>
            </tr>
            <tr>
                <form method="post" action="query" name="query_runname_name"></form>
            </tr>
        </tbody>
    </table>
</fieldset>

<form> 中没有表单元素。 （包括您的表单submit 按钮）。那么它是如何工作的呢？

您的代码应该生成这样的 HTML 才能正常工作，

<fieldset id="run_name_query_box">
    <form method="post" action="query" name="query_runname_name">
        <table>
            <tbody>
                <tr>
                    <td>
                        <p style="font-size:16px">Runname:</p>
                        <input style="font-size:16px" id="run_name" type="text">
                        <input style="font-size:14px" value="Search Database" onclick="run_name_querycreator()" id="search_run_name_id" name="search_run_name_name" type="submit">
                    </td>
                </tr>
            </tbody>
        </table>
    </form>
</fieldset>

查看此FIDDLE

在这个小提琴中你可以看到 BEFORE FIX 部分由你生成的动态元素。 在 AFTER FIX 部分，您可以看到正确的 html 格式。

仅供参考，当您使用动态 html 时，请检查您在开发人员工具中动态创建的 html。

Answer 2

工作示例： http://jsfiddle.net/awesome/6hh8r/

描述：在全局命名空间中添加了缺少的onclick 函数run_name_querycreator()，并将其连接到.post()，并带有明显的表单数据。

window.run_name_querycreator = function () {
    //alert($('#run_name').val());
    var x = '{"run_name":"' + $('#run_name') + '"}'

    $.ajax({
        type: "POST",
        url: $form.attr('action'),
        data: x,
        success: alert('success'),
        dataType: 'json'
    });
}

$(function () {
    if (document.getElementById("run_name_query_box") === null) {
        var run_name_search = '<fieldset id="run_name_query_box">' +
            '<table> <td><tr>' +
            '<p style="font-size:16px"> Runname:</p>' +
            '<input type="text" style="font-size:16px" id="run_name">' +
            '<form method="post" action=query name="query_runname_name">' +
            '<input  style="font-size:14px" value="Search Database" onclick="run_name_querycreator()" id="search_run_name_id" type="submit" name="search_run_name_name"> ' +
            '</form>' +
            '</tr></td></table>' +
            '</fieldset>';
        $("#query_type_box").append(run_name_search);
        $form = $('[name="query_runname_name"]');
        $form.submit(function (e) {
            e.preventDefault();
        });
    }
});