HTML Form表单数据处理-优快云博客

本文链接：https://blog.youkuaiyun.com/github_37213295/article/details/98751328

本文探讨了如何在HTML中使用Form表单收集用户输入的数据，并介绍了JavaScript在表单数据处理中的应用，包括获取表单元素、验证用户输入以及提交数据的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>
	span{
		font-size: 20px;
	}
	.add:hover{
		cursor: pointer;
	}
	.minus:hover{
		cursor: pointer;
	}
</style>
<body>
	<form class="formID">
		<div id="search-div">
			<div class="search-one">
				<select name="search0" id="">
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
				</select>
				<input type="text" name="input0">
				<span class="add">+</span>
			</div>	    
		</div>
	<button type="button">提交</button>
	</form>
</body>
</html>
 
<script type="text/javascript" src="jquery-1.12.1.min.js"></script>

$.fn.serializeObject = function() {
           var o = {};
           var a = this.serializeArray();
           $.each(a, function() {
               if (o[this.name]) {
                   if (!o[this.name].push) {
                       o[this.name] = [o[this.name]];
                   }
                   o[this.name].push(this.value || '');
               } else {
                   o[this.name] = this.value || '';
               }
           });
           return o;
        };
	
	$('#search-div').on('click','.add',function(){
		var count=$('.search-one').length;
		console.log(count)
		var selname = 'search'+count;
		var inputname = 'input'+count;
		var str='<form class="formID"><div class="search-one">'+
			'<select name="'+selname+'" id="">'+
				'<option value="1">1</option>'+
				'<option value="2">2</option>'+
				'<option value="3">3</option>'+
			'</select>'+
			'<input type="text" name="'+inputname+'">'+
			'<span class="add">+</span><span class="minus">-</span>'+
		'</div></from>'
		$('#search-div').append(str)

	})

	$('#search-div').on('click','.minus',function(){
		console.log($(this))
		$(this).parents('.search-one').remove()
	})
	
	$('button').on('click',function(){
		var dataarr = [];
		var formid = $('.formID');
		for(var i=0;i<formid.length;i++){
			// dataarr.push(formid.eq(i).serializeObject())
			// dataarr.push(formid.eq(i).serialize())
			dataarr.push(formid.eq(i).serializeArray())
		}
		
		console.log(dataarr)
	})

Form表单获取数据处理