JavaScript 创建一个 form 表单并提交

页面布局有些复杂的情况下,可能需要在页面中动态创建一个 form,JavaScript 创建 form 演示如下:

 

// JavaScript 构建一个 form

function MakeForm()
{

    // 创建一个 form
    var form1 = document.createElement("form");
    form1.id = "form1";
    form1.name = "form1";

    // 添加到 body 中
    document.body.appendChild(form1);

    // 创建一个输入
    var input = document.createElement("input");
    // 设置相应参数
    input.type = "text";
    input.name = "value1";
    input.value = "1234567";

    // 将该输入框插入到 form 中
    form1.appendChild(input);

    // form 的提交方式
    form1.method = "POST";
    // form 提交路径
    form1.action = "/servlet/info";

    // 对该 form 执行提交
    form1.submit();
    // 删除该 form
    document.body.removeChild(form1);
}


 调用 MakeForm 后,立即创建一个 Form,并提交,然后移除该 Form。

https://blog.inull.net
Q群讨论 236201801

  • 2
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
好的,下面是一个简单的示例,使用 JavaScript 编写一个表单收集数据并提交,然后回显数据: HTML 代码: ```html <form id="myForm"> <label for="name">姓名:</label> <input type="text" id="name" name="name" required><br> <label for="email">邮箱:</label> <input type="email" id="email" name="email" required><br> <label for="message">留言:</label> <textarea id="message" name="message" rows="5" cols="40"></textarea><br> <button type="submit" id="submitBtn">提交</button> </form> <div id="result"></div> ``` JavaScript 代码: ```javascript const form = document.querySelector('#myForm'); const result = document.querySelector('#result'); form.addEventListener('submit', (event) => { event.preventDefault(); // 阻止表单默认提交行为 const formData = new FormData(event.target); // 获取表单数据 // 向服务器发送数据,这里使用了 axios 库 axios.post('/submit', formData) .then(response => { // 清空表单 event.target.reset(); // 显示提交结果 result.textContent = '提交成功!'; // 回显数据 const data = response.data; result.innerHTML = `<p>姓名:${data.name}</p><p>邮箱:${data.email}</p><p>留言:${data.message}</p>`; }) .catch(error => { console.error(error); result.textContent = '提交失败!'; }); }); ``` 这个示例中,当用户点击提交按钮时,会触发表单提交事件。我们使用 `FormData` 对象获取了表单中的数据,然后使用 axios 库向服务器发送了一个 POST 请求。在请求成功后,我们清空了表单,显示了提交结果,并回显了服务器返回的数据。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值