signed

QiShunwang

“诚信为本、客户至上”

通过jQuery给form表单动态添加form表单之外的数据

2021/6/9 0:35:32   来源:

有时候会遇到页面内容较多、结构复杂,造成form表单未能包涵需要提交的全部数据。
下面举一个简单的例子:

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>给form表单动态添加数据</title>
</head>

<body>
<div>
    <form action="" method="POST" id="my_form">
        用户名:<input type="text" name="username">
        密码:<input type="password" name="password">
        <button id="submit">提交</button>
    </form>
</div>
<div>
    生日:<input type="date" id="day" name="birthday">
</div>
</body>

<script src="jquery.min.js"></script>
<script>
    $('#submit').click(function () {
        let myform = $('#my_form'); // 得到form对象
        let tmpInput = $("#day");  // 获取已选中的checkbox
        myform.append(tmpInput);  // 将已选中的checkbox数据添加到表单
    });
</script>
</html>

请注意看birthday字段在form表单外面,现在通JavaScript代码动态的将birthday字段添加到form表单里面,此时通过POST提交数据到后台时,后台可以收到username、password、birthday这3个字段的键值对。