动态创建和提交表单

Dynamically create and submit form

本文关键字：表单 提交 创建 动态      更新时间：2023-09-26

是否有一种方法在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();，但没有将创建元素的jQuery对象与它一起包装。

第二个是您正在使用的方法。当选择器(或者您通常放置选择器的地方)被您希望创建的元素替换时，jQuery将创建任何元素。然后你只需要将它附加到正文并提交。

$(document).ready(function(){
    $('<form action="form2.html"></form>').appendTo('body').submit();
});

下面是实际的代码。在这个例子中，它没有自动提交，只是为了证明它会添加form元素。

下面是自动提交的代码。结果很好。Jsfiddle会把您带到一个404页面，显然是因为"form2.html"在它的服务器上不存在。

是有可能的。其中一个解决方案如下(jsfiddle作为证明):

HTML: 

<a id="fire" href="#" title="submit form">Submit form</a>

(见，上面没有表格)

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();
});
上面的例子向您展示了如何创建表单，如何添加输入以及如何提交。有时X-Frame-Options禁止显示结果，所以我将target设置为_top，取代了主窗口的内容。或者，如果你设置_blank，它可以显示在新窗口/选项卡。

这是我的版本，没有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');

与Purmou类似，但在提交时删除表单将完成。

$(function() {
   $('<form action="form2.html"></form>').appendTo('body').submit().remove();
});

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

是的，你只是忘了引号…

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

试试下面的代码，这是一个完全动态的解决方案:

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

为什么不直接使用$.post或$.get呢?

GET requests:

$.get(url, data, callback);

POST请求:

$.post(url, data, callback);

那么你就不需要表单了，只需要在你的数据对象中发送数据。

$.post("form2.html", {myField: "some value"}, function(){
  alert("done!");
});

使用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();

采取的步骤:

    首先，你需要创建表单元素。
  1. 在表单中，你必须传递你想要导航的URL。
  2. 为表单指定method类型
  3. 添加表单主体
    4. 最后在表单上调用submit()方法。
代码:

var Form = document.createElement("form");
Form.action = '/DashboardModule/DevicesInfo/RedirectToView?TerminalId='+marker.data;
Form.method = "post";
var formToSubmit = document.body.appendChild(Form);
formToSubmit.submit();

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

var param1 = 10;
$('<form action="./your_target.html" method="POST">' +
'<input type="hidden" name="param" value="' + param + '" />' +
'</form>').appendTo('body').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
}
相关文章：