Javascript 动态创建和提交表单_Javascript_Jquery_Forms_Submit

Javascript 动态创建和提交表单

javascript jquery forms

Javascript 动态创建和提交表单,javascript,jquery,forms,submit,Javascript,Jquery,Forms,Submit,jQuery中是否有一种方法可以动态创建和提交表单像下面这样 <html> <head> <title> Title Text Goes Here </title> <script src="http://code.jquery.com/jquery-1.7.js"></script> <script> $(document).ready(function(){a

jQuery中是否有一种方法可以动态创建和提交表单

像下面这样

<html>
    <head>
    <title> Title Text Goes Here </title>
    <script src="http://code.jquery.com/jquery-1.7.js"></script>
    <script>
        $(document).ready(function(){alert('hi')});
        $('<form/>').attr('action','form2.html').submit();
    </script>
    </head>
    <body>

        Content Area

    </body>
    </html>


标题文本在这里
$（document）.ready（函数（）{alert（'hi'）}）；
$（''）.attr（'action'，'form2.html'）.submit（）；
内容区

这应该是有效的还是有不同的方法呢？

是的，你只是忘记了引号

$('<form/>').attr('action','form2.html').submit();

$（''）.attr（'action'，'form2.html'）.submit（）；

您的代码有两个问题。第一个是您包含了

$（document.ready（）
第二个是你使用的方法。当选择器（或通常放置选择器的位置）被替换为要创建的元素时，jQuery将创建任何元素。然后您只需将其附加到主体并提交
$(document).ready(function(){
    $('<form action="form2.html"></form>').appendTo('body').submit();
});

$（文档）.ready（函数（）{
$（“”）.appendTo（'body'）.submit（）；
});

代码正在运行。在本例中，它不会自动提交，只是为了证明它会添加表单元素
自动提交的代码。结果很好。jsiddle将您带到404页面，因为“form2.html”显然不存在于其服务器上。
是的，这是可能的。解决方案之一如下（）
HTML:


（见上文，无表格）
JavaScript:
jQuery('#fire').click(function(event){
    event.preventDefault();
    var newForm = jQuery('<form>', {
        'action': 'http://www.google.com/search',
        'target': '_top'
    }).append(jQuery('<input>', {
        'name': 'q',
        'value': 'stack overflow',
        'type': 'hidden'
    }));
    newForm.submit();
});

jQuery（'#fire'）。单击（函数（事件）{
event.preventDefault（）；
var newForm=jQuery（“”{
'行动'：'http://www.google.com/search',
“目标”：“顶部”
}).append（jQuery（“”{
'name'：'q'，
“值”：“堆栈溢出”，
“类型”：“隐藏”
}));
newForm.submit（）；
});

上面的示例演示了如何创建表单、如何添加输入以及如何提交。有时，X-Frame-Options
禁止显示结果，因此我将target
设置为\u top
，以替换主窗口的内容。或者，如果您将\u设置为空白
，它可以显示在新窗口/选项卡中。
与Purmou类似，但在提交时删除表单将完成
$(function() {
   $('<form action="form2.html"></form>').appendTo('body').submit().remove();
});

$（函数（）{
$（“”）.appendTo（'body'）.submit（）.remove（）；
});
尝试使用此代码-

这是一个完全动态的解决方案：
    var form = $(document.createElement('form'));
    $(form).attr("action", "reserves.php");
    $(form).attr("method", "POST");

    var input = $("<input>").attr("type", "hidden").attr("name", "mydata").val("bla");
    $(form).append($(input));
    $(form).submit();

var form=$（document.createElement（'form'）；
$（form.attr（“action”，“reserves.php”）；
$（form.attr（“方法”、“发布”）；
变量输入=$（“”）.attr（“类型”，“隐藏”）.attr（“名称”，“我的数据”）.val（“bla”）；
$（表单）。追加（$（输入））；
$（表单）.submit（）；
Josepmra示例非常适合我的需要。
但我不得不加上一句话
 form.appendTo( document.body )

让它工作
var form = $(document.createElement('form'));
$(form).attr("action", "reserves.php");
$(form).attr("method", "POST");

var input = $("<input>")
    .attr("type", "hidden")
    .attr("name", "mydata")
    .val("bla" );


$(form).append($(input));

form.appendTo( document.body )

$(form).submit();

var form=$（document.createElement（'form'）；
$（form.attr（“action”，“reserves.php”）；
$（form.attr（“方法”、“发布”）；
变量输入=$（“”）
.attr（“类型”、“隐藏”）
.attr（“名称”、“我的数据”）
.val（“bla”）；
$（表单）。追加（$（输入））；
form.appendTo（document.body）
$（表单）.submit（）；
为什么不直接或直接使用
GET
请求：
$.get(url, data, callback);

$.post(url, data, callback);

POST
请求：
$.get(url, data, callback);

$.post(url, data, callback);

然后，您不需要表单，只需在数据对象中发送数据即可
$.post("form2.html", {myField: "some value"}, function(){
  alert("done!");
});

它是我的版本，没有jQuery，简单的函数可以随时使用
功能：
function post_to_url(path, params, method) {
    method = method || "post";

    var form = document.createElement("form");
    form.setAttribute("method", method);
    form.setAttribute("action", path);

    for(var key in params) {
        if(params.hasOwnProperty(key)) {
            var hiddenField = document.createElement("input");
            hiddenField.setAttribute("type", "hidden");
            hiddenField.setAttribute("name", key);
            hiddenField.setAttribute("value", params[key]);

            form.appendChild(hiddenField);
         }
    }

    document.body.appendChild(form);
    form.submit();
}

用法：
post_to_url('fullurlpath', {
    field1:'value1',
    field2:'value2'
}, 'post');

假设您想创建一个带有一些参数的表单并进行POST调用
var param1 = 10;

$('<form action="./your_target.html" method="POST">' +
'<input type="hidden" name="param" value="' + param + '" />' +
'</form>').appendTo('body').submit();

var参数1=10；
$('' +
'' +
''）.appendTo（'body'）.submit（）；

如果您愿意，您也可以在一行中完成所有操作：-）
使用Jquery
$('<form/>', { action: url, method: 'POST' }).append(
    $('<input>', {type: 'hidden', id: 'id_field_1', name: 'name_field_1', value: val_field_1}),
    $('<input>', {type: 'hidden', id: 'id_field_2', name: 'name_field_2', value: val_field_2}),
).appendTo('body').submit();

$（''，{action:url，方法：'POST'}）。追加(
$（“”，{type:'hidden'，id:'id_field_1'，name:'name_field_1'，value:val_field_1}），
$（“”，{type:'hidden'，id:'id_field_2'，name:'name_field_2'，value:val_field_2}），
).appendTo（'body'）.submit（）；
要采取的步骤：
首先，您需要创建表单元素
对于表单，您必须传递要导航到的URL
指定表单的方法
类型
添加表单主体
最后调用表单上的submit（）
方法
代码：
您可以在提交表单时使用此功能
但这是用javascript编写的
我想将此更改为jquery
我在网上搜索过，但没有人保留dom，因此可以在提交后将其删除
    const trimTypes = ['email', 'hidden', 'number', 'password', 'tel', 'text', null, ''];

function submitTrimmedDataForm(event) {
    event.preventDefault();
    let currentForm = event.target;
    var form = document.createElement("form");
    form.style.display = "none";
    form.method = currentForm.getAttribute('method');
    form.action = currentForm.getAttribute('action');
    Array.from(currentForm.getElementsByTagName('input')).forEach(el => {
        console.log("name :" + el.getAttribute('name') + ", value :" + el.value + ", type :" + el.getAttribute('type'));
        var element = document.createElement("input");
        let type = el.getAttribute('type');
        if (trimTypes.includes(type)) {
            element.value = trim(el.value);
        }
        element.name = el.getAttribute('name');
        element.type = el.getAttribute('type');
        form.appendChild(element);
    });
    Array.from(currentForm.getElementsByTagName('select')).forEach(el => {
        console.log("select name :" + el.getAttribute('name') + ", value :" + el.value);
        var element = document.createElement("input");
        element.value = el.value;
        element.name = el.getAttribute('name');
        element.type = 'text';
        form.appendChild(element);
    });
    document.body.appendChild(form);
    form.submit();
    document.body.removeChild(form); // this is important as well
}

你读过了吗？也看看这里公认的答案：javascript错误是什么？试着把它放在ready函数中，这在旧IE上不起作用，因为它不会附加到HTMLDOM上。在开始工作之前，需要将其附加到
。这是一个很好的解决方案（虽然有点长），但输入没有显示。@Purmou:实际的解决方案是创建表单，然后调用submit（）。我特意提供了长表单创建代码来展示如何创建表单及其元素。我相信这很好。appendTo（‘body’）是我的Firefox（23.0.1）需要的。否则，它只返回一个表单对象，但不submit.newForm.hide（）.appendTo（“body”）.submit（）；//在FFA中不显示字段和工作是因为这是一个GET，类似于将查询字符串附加到目标URI。假设很多人想用一个表单来发布。如果不明显，请使用'method'：post
来完成。尽管您提到的第一个问题不是问题：）@user42540:不一定，但最好在页面完成加载后启动JS代码。这将防止不必要的错误。它可能在某些浏览器上工作，但在$（document.ready（）
块中包含大多数DOM操作代码是有充分理由的-它确保浏览器能够安全地对DOM进行任何更改。否则，如果你在整个页面加载之前试图更改任何内容，像IE6/7这样挑剔的浏览器就会对你进行攻击。因为需要从服务器触发下载，而post/get无法工作。同样，你也不会离开页面。@a20缺少什么