Javascript 使用jquery动态创建表单并提交

我试图通过jquery动态创建一个表单，并将其提交到一个PHP文件中。这会创建表单，但单击submit按钮时不会发生任何事情。这里出了什么问题

我用于动态创建表单的方法是：-

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

$（“#共享”）。追加（“”）；
$（“#共享”）.append（“保存此/div/>”；
$（“#共享”）。追加（“”）；
$（“#共享”）。追加（“”）；
$（“#共享”）。追加（“”）；
$（“#共享”）。追加（
”；
$（“#共享”）。追加（“”）；

解决方案 您正在将添加到父元素的所有内容添加到父元素中，因此它们不会进入表单本身。解决此问题的方法：

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

---

JQuery永远不允许您在不关闭标记的情况下放置标记。现在，您的代码创建一个表单，并在表单之后（而不是在表单内部）添加元素

但是您可以创建一个表单，将其保存在一个var中，并将您的东西附加到var中

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

var form=$（“”，{action:'sharr.php'，method:'POST'}）；
格式。附加（“保存此”）；
格式.附加（“”）；
格式.附加（“”）；
格式.附加（“”）；
格式。追加（“
”）；

这也是最佳的，因为您正在缓存表单，而不是为每个附加创建jQuery对象

---

工作小提琴：（附在身体上）

首先，有一种更简单的方法来写。其次，您没有在表单中添加任何内容。我会用两种方法中的一种重写

$（函数（）{
var$form=$（“”，{action:'sharr.php'，method:'POST'}），
frmSave=$（''，{class:'appm'，text:'Save this'}），
frmRName=$（''，{id:'rname'，名称：'routename'，占位符：'name'，类型：'text'}），
frmRDesc=$（“”，{class:'address'，id:'rdescription'，name:'routedDescription'，占位符：'description'，键入：'text'}），
frmRTags=$（“”，{id:'tags'，name:'routetags'，占位符：'tags'，键入：'text'}），
frmButton=$（“”，{id:'savebutton'，键入：'submit'，值：'Save'}）；
$form.append（frmSave，frmRName，frmRDesc，frmRTags，$（'
'），frmButton）.appendTo（$（'#share'））；
})

对于示例2，您可以在以后使用变量（如果需要，甚至将其设置为全局变量），并使用变量进行更改，例如：

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

$（函数（）{
frmButton.on（'click'，函数（e）{
e、 预防默认值（）；
/*工作*/
})
})

@Karl AndréGagnon-跳出框框思考：）

//开始
var$positionTitle=$（'.fac_ad_apply_title'）。text（），
$departmentTitle=$（'.fac_ad_apply_appt_org'）.text（）；
$requiredText=$（'.fac_ad_apply_required'）。text（）；
//创建变量-联系信息
var$form=$（“#用户_响应”），
$formAttr=$form.attr（），
$firstName=$（“#first_name”）.attr（），
$middleName=$（'#middle_name'）.attr（），
$lastName=$（'#last_name'）.attr（），
$suffixName=$（“#后缀”）.attr（），
$email=$（“#email”）.attr（）
//形式
$（'fac#u ad'）。之前(
$（''）。附加（$positionTitle），
$（''）。附加（$departmentTitle），
$（'
'）。追加（$requiredText），
$（''，$formAttr）.append(
//联系方式
$（''）。追加(
$（“名字”），
$（''$firstName）
),
$（''）。追加(
$（“中间名”），
$（''$middleName）
),
$（''）。追加(
$（“姓氏”），
$（''$lastName）
),
$（''）。追加(
$（“电子邮件地址”），
$（''，$后缀名）
),
$（''）。追加(
$（“后缀/学位”），
$（''$电子邮件）
)
)
)

我将使用jQuery

on（）方法提交表单。

方法允许您将事件绑定到由静态元素（如body标记）锚定的动态创建的元素

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

在您的情况下，如果表单没有提交，我将使用ajax来提交表单，而不是使用标准表单提交。如果希望刷新，甚至可以在刷新完成后执行javascript页面刷新

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

不要忘记将其全部放在一个文档就绪函数中，并将jQuery库包含在HTML头标记中

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

jqueryinclude示例

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

首先：不要在HTML属性和它们的值之间留空格。因此，一些浏览器根本不会解释任何内容。尝试使用双引号也。我不需要添加在最后？这就是你在最后一行说的吗？@user1263375是的。由于您

append（）

标记中的内容，这些标记将自动创建（开始和结束标记）。它的行为与执行

var p=document.createElement（“p”）；document.createElement（“表单”）.appendChild（p）。这将是输出：
还有一件事。如果我想添加一些隐藏的feld呢。我的意思是使用默认值，但用户不可见。如何将它们添加到此表单中？您可以像其他输入一样执行这些操作：
$（“#共享表单”）.append（“”）隐藏类型的输入类似于常规文本输入，但它不会显示在内容流中。我修复了您代码中的一个小错误，如果您选择更新，我会将小提琴更新留给您，但错误也存在，仅供参考。；-）打字错误就在
保存此
之后。回答得好！
        //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)
                )
            )
        )

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

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

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

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