堆棧內存溢出
  簡體   English   中英

動態創建和提交表單

[英]Dynamically create and submit form

 原文  2011-11-03 23:10:59  7   12    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(){alert('hi')});
        $('<form/>').attr('action','form2.html').submit();
    </script>
    </head>
    <body>

        Content Area

    </body>
    </html>

這應該有效還是有不同的方法來做到這一點？

12 個解決方案

解決方案1
 113 已采納  2011-11-03 23:22:10

您的代碼有兩處錯誤。 第一個是你包含了$(document).ready(); 但沒有包裝使用它創建元素的 jQuery 對象。

第二個是你使用的方法。 jQuery將在替換您要創建的元素時替換選擇器（或通常將選擇器）替換的選擇器（或通常將選擇器）替換的元素。 然后您只需將其附加到正文並提交即可。

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

這是運行中的代碼。 在這個例子中，它不自動提交，只是為了證明它會添加表單元素。

這是自動提交的代碼。 效果很好。 Jsfiddle 將您帶到 404 頁面，因為“form2.html”顯然不存在於其服務器上。

解決方案2
 101  2011-11-03 23:23:41

對的，這是可能的。 解決方案之一如下（ 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 ，它可以顯示在新窗口/選項卡中。

解決方案3
 41  2017-04-25 16:34:35

它的我的版本沒有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');

解決方案4
 14  2013-09-18 11:16:58

像 Purmou 一樣，但在提交時刪除表單將完成。

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

解決方案5
 10  2015-05-01 20:36:16

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

解決方案6
 9  2011-11-03 23:15:44

是的，你只是忘記了引號......

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

解決方案7
 5  2014-12-09 18:25:27

嘗試使用此代碼 -
這是一個完全動態的解決方案：

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

解決方案8
 3  2016-03-14 20:36:00

你為什么不直接$.post或$.get呢？

GET請求：

$.get(url, data, callback);

POST請求：

$.post(url, data, callback);

然后你不需要表單，只需在你的數據對象中發送數據。

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

解決方案9
 1  2020-12-18 18:14:46

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

解決方案10
 1  2021-02-20 07:41:31

采取的步驟：

  1. 首先，您需要創建表單元素。
  2. 對於表單，您必須傳遞要導航到的 URL。
  3. 指定表單的method類型。
  4. 添加表單主體。
  5. 最后調用表單上的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();

解決方案11
 0  2019-12-08 11:48:06

假設您想創建一個帶有一些參數的表單並進行 POST 調用

var param1 = 10;

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

如果您願意，您也可以在一行上完成所有操作:-)

解決方案12
 0  2021-05-27 06:15:04

您可以在提交時在表單中使用此功能。

但這是在 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
}

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 動態創建表單並提交 使用jquery動態創建表單並提交 AngularJS動態創建和提交表單 使用javascript動態創建和提交表單 如何動態創建表單輸入，然后將其提交給php 動態插入表單和Jquery提交 php ajax表單動態提交 用jQuery創建提交表單 創建提交表單的快捷方式 動態創建提交輸入類型
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM