jQuery 获取表单提交某个字段参数信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<!-- 点击示例 开始 -->
<form class="forms-sample" id="form-data">
<input type="text" name="id" value="123456">
<button type="button" id="submitData" class="btn btn-primary me-2">提交</button>
</form>
<!--点击示例 结束-->
<!--引入jq-->
<script src="https://wangshengxian.com/common/js/jquery-3.3.1.min.js"></script>
<script>
/**
* jQuery 获取表单提交指定的字段值
* @param FieldName 字段名称
* @param formDataDomId 表单DOM 标识位置
* @returns {*}
*/
function getFormDataFieldValue(FieldName = 'id',formDataDomId = '#form-data') {
let fomData = $(formDataDomId).serialize();
let fieldValue = null;//默认值
let list = fomData.split('&');
$.each(list, function(i, item) {
if (decodeURIComponent(item.split('=')[0]) === FieldName){
fieldValue = decodeURIComponent((item.split('=')[1]))
return false;//退出循环
}
});
return fieldValue; // 输出字段值
}
$("#submitData").click(function(){
//获取提交表单的 id 字段参数
let id = getFormDataFieldValue('id', '#form-data');
alert(id);
return true; // 阻止默认 form 跳转
});
</script>
</body>
</html>