js 创建 form 提交

在JavaScript中创建并提交一个表单可以通过多种方式实现，以下是其中一种常见的方法：

基础概念

表单（Form）是HTML中用于收集用户输入的一种元素。通常，表单包含各种输入字段（如文本框、复选框、单选按钮等）和一个提交按钮。当用户点击提交按钮时，表单数据会被发送到服务器进行处理。

类型

GET请求：用于从服务器获取数据，表单数据会附加在URL后面。
POST请求：用于向服务器提交数据，表单数据会包含在请求体中。

应用场景

用户注册和登录
搜索功能
数据提交和更新

示例代码

以下是一个简单的示例，展示如何使用JavaScript创建并提交一个表单：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Form Submission</title>
</head>
<body>
    <button id="submitBtn">Submit Form</button>

    <script>
        document.getElementById('submitBtn').addEventListener('click', function() {
            // 创建表单元素
            var form = document.createElement('form');
            form.method = 'POST'; // 设置请求方法
            form.action = 'https://example.com/submit'; // 设置提交地址

            // 添加输入字段
            var inputField = document.createElement('input');
            inputField.type = 'text';
            inputField.name = 'username';
            inputField.value = 'JohnDoe';

            // 将输入字段添加到表单
            form.appendChild(inputField);

            // 提交表单
            document.body.appendChild(form);
            form.submit();
        });
    </script>
</body>
</html>

遇到的问题及解决方法

问题1：表单提交后页面刷新

原因：默认情况下，表单提交会导致页面刷新。

解决方法：可以使用AJAX来异步提交表单，避免页面刷新。

document.getElementById('submitBtn').addEventListener('click', function(event) {
    event.preventDefault(); // 阻止默认提交行为

    var form = document.createElement('form');
    form.method = 'POST';
    form.action = 'https://example.com/submit';

    var inputField = document.createElement('input');
    inputField.type = 'text';
    inputField.name = 'username';
    inputField.value = 'JohnDoe';

    form.appendChild(inputField);

    // 使用AJAX提交表单
    var xhr = new XMLHttpRequest();
    xhr.open(form.method, form.action, true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            console.log('Form submitted successfully:', xhr.responseText);
        }
    };
    xhr.send(new URLSearchParams(new FormData(form)).toString());
});

问题2：跨域请求问题

原因：浏览器的同源策略限制了跨域请求。

解决方法：可以在服务器端设置CORS（跨域资源共享）头，或者使用JSONP（仅限于GET请求）。

// 服务器端设置CORS头示例（Node.js）
app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});

通过以上方法，可以有效解决JavaScript动态创建并提交表单时可能遇到的问题。

页面内容是否对你有帮助？

有帮助

没帮助

当用户提交表单时触发谷歌DoubleClick标签

、、

我在我的页面上有一个自定义的web表单，我试图在用户提交表单成功时触发谷歌DoubleClick标签(下一页是一个支付网关，所以很遗憾我不能在这个页面上放一个标签)functionValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) return false;} 我想知道是否有人有在这种表单上触发提交规则的经验

浏览 4提问于2017-03-30得票数 1

1回答

Javascript在一个页面中处理2个表单

、

我要求第一个表单输入一个API-KEY，以便在第二个表单的一些输入中加载值帐户并提交它。第一种形式： <label for="" >API-KEY</label> <input type="text" class="form-control" id="inputApi" pl

浏览 1提问于2018-03-22得票数 0

2回答

JQuery ajaxForm:如果从beforeSubmit中的DOM中删除表单，则不会提交表单

、

调用了jquery.form.js中的form.submit()行296，但没有发出http请求。不过，它在chrome中可以正常工作。示例代码： { // this line removes #form1 from the DOM. /

浏览 1提问于2011-05-15得票数 0

1回答

Vaadin -在带有POST的浏览器中打开URL

、、

在我的Vaadin 14应用程序中，当用户单击按钮时，我希望打开一个具有适当参数的网站。资源需要参数作为post请求的主体。如何使用post请求在Vaadin中打开新的URL？

浏览 13提问于2022-03-14得票数 1

3回答

Rails --如何让远程表单使用JS进行响应？

、、、

因此，我将注释/_form.html.erb改为使用:remote=>true。<%= form_for([@item,@comment], :remote=>true) do |f| %> @comment = Comment.new(params[:comment]) format.jsformat.

浏览 0提问于2013-01-03得票数 8

回答已采纳

1回答

Rails 5:通过AJAX发送表单，首先修改输入，然后向表单追加视图

、

在页面视图中，我有一个Rails表单： <% end %> 在发送之前修改一些输入

浏览 1提问于2017-07-18得票数 1

回答已采纳

4回答

是否可以仅使用JS创建表单？

、

我正在尝试创建一个只使用JavaScript的表单。我的意思是为网页创建一个表单，向其中添加元素，设置它们的值，然后提交表单。此外，如果浏览器中禁用了JavaScript，则应该提交普通的HTML表单。有什么方法可以做到这一点吗？

浏览 5提问于2009-10-29得票数 0

回答已采纳

3回答

没有在php中提交提交值的一个字段

form.The在提交时没有提交其//值。form.The在提交时没有提交其//值。<br>"; <title>User registration<&

浏览 1提问于2014-03-24得票数 0

回答已采纳

5回答

jquery表单-两个按钮-一个使用ajax，另一个不使用

、、

我有一个表单，我想在提交之前使用jquery对表单进行验证。如果我单击其中一个按钮，我会让它通过ajax调用保存数据。对于另一个按钮，我想提交表单，但不让它通过ajax，只需按老式的方式提交并转到该页面即可。

浏览 1提问于2015-09-03得票数 0

1回答

使用CakePHP和jQuery移动版登录

、、、

下面是登录视图： <?= $this->Session->flash('auth'); ?> <fieldset> echo $

浏览 1提问于2013-05-20得票数 1

回答已采纳

2回答

提交按钮的问题

、

这两种方式有什么区别吗：2) document.form.submit(); 它是否通过单击submit请告诉我这两种提交方式之间的主要区别

浏览 2提问于2013-02-24得票数 3

回答已采纳

1回答

AWS SageMaker - submit按钮不使用自定义模板

、

当我在AWS SageMaker上创建一个新作业时，使用我的带有人群表单的自定义模板(请参阅所附示例)，提交按钮无法工作，甚至不能单击。有办法让这件事成功吗？在AWS支持方面没有看到很好的反应。$('#submitButton').onclick = function() {}; <h2 id="hit"height=687></canvas>

浏览 4提问于2020-01-13得票数 2

回答已采纳

1回答

IE不会提交动态添加的表单域

、、、

当我在IE8和IE9中提交时，它只是返回它，就好像数组中只有一个元素，而不是我克隆的许多元素一样。这是HTML和JS的完整表单：<label><input我还尝试将html()调用从DIV更改为Form，但仍然失败。我还尝试在按钮的onSubmit和cloner()函数上调用alert()，认为这可能会迫使

浏览 4提问于2013-03-04得票数 0

回答已采纳

2回答

如何在单击提交按钮时选择多选中的所有选项？

问题:只要所有的选项都被选中(蓝色)，在提交前没有问题，但如果这些选定的选项(右侧)中的任何一个被单击，那么只有该选项将与表单一起提交，而我需要一个没有被选中的(右侧)。

浏览 0提问于2016-08-04得票数 0

1回答

如何在聚合物3中通过ajax提交铁模板

、、、、

问题import { PolymerElement, html } from '@polymer/polymer/polymer-element.js'; <iron-form> <form id="formOne"

浏览 1提问于2018-09-23得票数 1

回答已采纳

1回答

无法创建由ajax加载的简单html增强模式对话框

、、、、

问题是JQuery用户界面对话框想要创建动作按钮我不能给插件的按钮创建，它的要求按钮元数据和我已经有了完整的功能页面与表单，按钮，数据输入和一切我需要做的工作，它的工作，它的完成，我只想加载它在一个对话框'#dlgdetail').remove(); }) al

浏览 2提问于2011-12-11得票数 0

回答已采纳

2回答

如何使用Form::model laravel php对每个表行使用提交

、

我正在学习一门Udemy课程，但是讲师围绕着多个元素包装了一个Form::model。这会使submit按钮无响应。有谁知道怎么解决这个问题吗？

浏览 1提问于2018-02-07得票数 0

2回答

将自定义代码添加到Drupal7 webform中

、、、

我已经知道如何使用<theme>_form_alter()捕获表单。我不太确定的是如何在某个时刻将元素注入到表单中。如果有人知道如何实现这一点，那将是很有用的。

浏览 3提问于2014-12-18得票数 0

1回答

控制台和画布会自行清除

、、、、

html> <title>MINESWEEPER</title> <br> <input type="text" name="mc" value=&qu

浏览 1提问于2018-12-12得票数 0

1回答

未执行操作的jQuery移动表单显示错误消息：“加载页面时出错”

、、、、

-- Include the jQuery library --><script type="text/javascript" src="lib/jquery.mobile-1.4.5.min.js<

浏览 18提问于2017-08-13得票数 0

回答已采纳

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

js 创建 form 提交

基础概念

相关优势

类型

应用场景

示例代码

遇到的问题及解决方法

问题1：表单提交后页面刷新

问题2：跨域请求问题

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐