使用javascript动态创建和提交表单答案

【问题标题】：create and submit form dynamically using javascript使用javascript动态创建和提交表单
【发布时间】：2014-05-19 06:17:55
【问题描述】：

这是很基本的，但我现在花了一些时间却想不通。

我正在尝试创建一个带有一个隐藏输入的表单，并使用 jQuery 将其提交到“test.php”页面。但是，我无法访问此表单，所以我不确定问题出在哪里！

这是创建和提交表单的jQuery：

$('#submitForm').on('click', function(e){
    e.preventDefault();

    //Create a Form
    var f = document.createElement("form");
    f.setAttribute('id','queryForm');
    f.setAttribute('name','queryForm');
    f.setAttribute('method',"post");
    f.setAttribute('action',"test.php");

    var i = document.createElement("input");
    i.setAttribute("type", "hidden");
    i.setAttribute('name',"query");
    i.setAttribute('id',"queryId");
    i.setAttribute("value", "success");

    f.appendChild(i);
    document.body.appendChild(f);

    //Send the Form
    f.submit();
});

在“test.php”我有下面的代码。我尝试打印表单长度以确保我正确提交了表单，但我得到了 0！！

<body>
<script>
  var formlength = document.forms.length;
  alert(formlength); // I get 0
</script>
</body>

提前致谢！

【问题讨论】：

代码应该按预期工作..这意味着这将创建一个表单并立即将其提交给test.php。您在哪里尝试“检查”您的表格？如果你试图在“test.php”中找到它，你不会因为它传递数据给它，而不是表单本身..
@rorofromfrance test.php 除了上面我检查表单长度的javascript之外什么都没有。它显示 0 ，根据我的理解，这意味着没有形式，对吗？我试过 getElementbyId("queryId") 也一无所获！
你在哪里查看document.forms.length，在f.submit()之前查看它，你应该得到1。提交后您将无法访问表单，因为页面将重新加载！
你在哪里加载这段代码？在头部还是在结束体标签之前？ DOM 可能尚未加载。
编辑不起作用，该页面中没有表单。

标签： javascript php jquery html forms

【解决方案1】：

jQuery 代码很好。将这一行放在 test.php 文件中进行测试：

<?php echo $_POST['query']; ?>

它应该在test.php页面上输出“成功”

【讨论】：

【解决方案2】：

document.forms.length 统计<form>-tags 的数量而不是提交的数据。

因为你正在使用 php（把它放在 test.php 中）。

<?php

if( isset($_POST['query']) ) {
   echo htmlspecialchars( $_POST['query'] );
}

看看这里：http://jsfiddle.net/428GQ/1/。我已注释掉提交并将隐藏字段更改为文本（只是为了确保它有效）。现在将上面的代码添加到 test.php 并观察它的工作（当然你必须先删除 cmets）。

【讨论】：

我认为我需要 $("sumbitForm") 因为我在单击按钮时调用此函数。我只需要在 test.php 中获取元素“查询”。不确定我错过了什么？

【解决方案3】：

我更改了您的代码以使用更多 Jquery，并按照 [Niclas Larsson] 的建议将其放在页脚中。请检查此

                    //Create a Form
                    var $f = document.createElement('<form></form>');
                    $f.attr('id','queryForm');
                    $f.attr('name','queryForm');
                    $f.attr('method',"post");
                    $f.attr('action',"test.php");


                    var $i = $( '<input />' );
                    $i.attr("type", "hidden");
                    $i.attr('name',"query");
                    $i.attr('id',"queryId");
                    $i.attr("value", "success");

                    $f.append(i);
                    $('body').append(f);

                    console.log($f);

                    //Send the Form
                    $f.submit();

【讨论】：