JavaScript added HTML Form does not submit

Question

I want to add a form including an input text using javascript.
the adding works fine, but if i click the submit button nothing happens.
Here is the code:

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

the run_name_querycreator() function sets the value of the input.

I already use almost the same thing somewhere else and there it works:

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

If i copy the plain html part just into the main html body it works too. This is all part of mako file used in a pyramid interface.

Answer 1

I think your HTML is malformed. I don't think a form element can be a child of a table element.

Your code should be like this,

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

This is your code generated 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>

There is no form elements in within your <form>. (Including your form submit button). Then How it will work?

Your code should generate HTML like this to work,

<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>

See this FIDDLE

In this fiddle You can see BEFORE FIX section dynamic elements generated by you. In AFTER FIX section you can see the correct html format.

FYI, When you are working with Dynamic html, Check you dynamically created html in developers tool.

Answer 2

Working example: http://jsfiddle.net/awesome/6hh8r/

Description: Added missing onclick function run_name_querycreator() in global namespace and connected it to .post() with apparent form data.

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();
        });
    }
});