Criar uma forma dinamicamente com jquery e submeter

Exemplo 1

<script type="text/javascript">
    $(function() {
        $('#share').append(
            $('<form />', { action: 'sharer.php', method: 'POST' }).append(
                $('<div />', { class: 'appm', text: 'Save this' }),
                $('<input />', { id: 'rname', name: 'routename', placeholder: 'Name', type: 'text' }),
                $('<input />', { class: 'address', id: 'rdescription', name: 'routedescription', placeholder: 'description', type: 'text' }),
                $('<input />', { id: 'tags', name: 'routetags', placeholder: 'tags', type: 'text' }),
                $('<br />'),
                $('<input />', { id: 'savebutton', type: 'submit', value: 'Save' })
            )
        )
    })
</script>

Com o exemplo 1, pode precisar de um sinal events dinamicamente. Tais como:

<script type="text/javascript">
    $(function() {
        $(document).on('click', '#share form input[type=submit]', function(e) {
            e.preventDefault();
            /*  do work */
        })
    })
</script>

Exemplo 2

<script type="text/javascript">
    $(function() {
        var $form = $('<form />', { action: 'sharer.php', method: 'POST' }),
            frmSave = $('<div />', { class: 'appm', text: 'Save this' }),
            frmRName = $('<input />', { id: 'rname', name: 'routename', placeholder: 'Name', type: 'text' }),
            frmRDesc = $('<input />', { class: 'address', id: 'rdescription', name: 'routedescription', placeholder: 'description', type: 'text' }),
            frmRTags = $('<input />', { id: 'tags', name: 'routetags', placeholder: 'tags', type: 'text' }),
            frmButton = $('<input />', { id: 'savebutton', type: 'submit', value: 'Save' });

        $form.append(frmSave, frmRName, frmRDesc, frmRTags, $('<br />'), frmButton).appendTo($('#share'));
    })
</script>

Com o exemplo 2, você pode fazer uso posterior das variáveis (mesmo torná-las globais se necessário) e fazer alterações usando variáveis, tais como:

<script type="text/javascript">
    $(function() {
        frmButton.on('click', function(e) {
            e.preventDefault();
            /*  do work */
        })
    })
</script>

var form = $('<form/>', {action : 'sharer.php', method : 'POST'}).appendTo('#share');
form.append("<div class= 'appm'>Save this</div>");
form.append("<input type='text' placeholder='Name' name='routename' id='rname'/>");
form.append("<input type='text' placeholder='description' id='rdescription' name='routedescription' class= 'address'/>");
form.append("<input type='text' placeholder='tags' id='tags' name='routetags'  />");
form.append("<br/><input type='submit' id='savebutton' value='Save' />");

Isto também é óptimo, uma vez que você está a cacarejar a forma, não a criar um objecto jQuery para cada anexo!

Violino a trabalhar: http://jsfiddle.net/Lb8BY / (anexo ao corpo)

        //Start
        var $positionTitle = $('.fac_ad_apply_title').text(),
            $departmentTitle = $('.fac_ad_apply_appt_org').text();
            $requiredText = $('.fac_ad_apply_required').text();

        //Creating variables - contact information
        var $form = $('#user_response'),
            $formAttr = $form.attr(),
            $firstName = $('#first_name').attr(),
            $middleName = $('#middle_name').attr(),
            $lastName = $('#last_name').attr(),
            $suffixName = $('#suffix').attr(),
            $email = $('#email').attr()

    //Form
        $('#fac_ad').before(
            $('<h1 />').append($positionTitle),
            $('<h3 />').append($departmentTitle),
            $('<p />').append($requiredText),
            $('<form />', $formAttr).append(

                //Contact Information
                $('<div class="form-group" />').append(
                    $('<label for="">First Name</label>'),
                    $('<input class="form-control" />', $firstName)
                ),
                $('<div class="form-group" />').append(
                    $('<label for="">Middle Name</label>'),
                    $('<input class="form-control" />', $middleName)
                ),
                $('<div class="form-group" />').append(
                    $('<label for="">Last Name</label>'),
                    $('<input class="form-control" />', $lastName)
                ),
                $('<div class="form-group" />').append(
                    $('<label for="">Email address</label>'),
                    $('<input class="form-control" />', $suffixName)
                ),
                $('<div class="form-group" />').append(
                    $('<label for="">Suffix/Degree(s)</label>'),
                    $('<input class="form-control" />', $email)
                )
            )
        )

Eu submeteria o formulário usando o método jQuery on(), que lhe permite ligar eventos a elementos criados dinamicamente ancorados por elementos estáticos como a marca corporal

$("body").on("submit", "#share form", function(event){
    event.preventDefault();
});

No seu caso, se o formulário não estiver a ser enviado, eu usaria o ajax para enviar o formulário em vez do formulário padrão. Poderá até executar uma actualização de página do javascript após a sua conclusão se quiser que uma actualização aconteça

$("body").on("submit", "#share form", function(event){
    event.preventDefault();
    // Grab all form data
    var formInputData = $(this).serializeObject();
    // send form data to php file in $_POST array
    $.post("sharer.php", formInputData, function(data){
        // log errors or anything that is echoed back from php file
        console.log(data);
        // refresh the page
        window.location.reload();
    });
});

Não se esqueça de colocar tudo em uma função de documento pronto e ter o biblioteca jQuery incluída na sua marca HTML head

$(document).ready(function(){
    $("body").on("submit", "#share form", function(event){
        event.preventDefault();
        // Grab all form data
        var formInputData = $(this).serializeObject();
        // send form data to php file in $_POST array
        $.post("sharer.php", formInputData, function(data){
            // log errors or anything that is echoed back from php file
            console.log(data);
            // refresh the page
            window.location.reload();
        });
    });
});

O JQuery inclui o exemplo

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>