<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form action="#">
<input type="text" id="user" name="user">
<input type="checkbox" name="sex" id="man">
<!-- 这是一个隐藏的文本框,不需要用户输入内容 -->
<input type="text" name="citySelect" id="citySelect">
<select id="city" multiple>
<option>北京</option>
<option>西安</option>
<option>上海</option>
</select>
<input type="submit">
<!-- <button>提交</button> -->
<input type="reset">
</form>
<script>
// submit和reset 是表单事件,只能作用于表单的事件类型
var form=document.querySelector("form");
var city=document.getElementById("city");
var citySelect=document.getElementById("citySelect");
// 提交表单和重置表单
form.addEventListener("submit",submitHandler);
form.addEventListener("reset",submitHandler);
function submitHandler(e){
var selectStr=Array.from(city.selectedOptions).reduce(function(value,item){
return value+(value.length===0 ? "" :",")+item.textContent;
},"");
// 隐藏的文本在这里设置value,提交submit时,没有name的表单不会被提交
citySelect.value=selectStr;
}
</script>
</body>
</html>
js提交表单整合表单数据(表单事件submit)
最新推荐文章于 2024-04-25 00:00:00 发布