关于表单大量赋值input,radio

最新推荐文章于 2023-10-26 11:15:56 发布

痞子Monkey

最新推荐文章于 2023-10-26 11:15:56 发布

阅读量775

点赞数

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/weixin_42065713/article/details/110821091

版权

本文介绍如何使用JavaScript将获取的详情信息赋值到表单的input和radio元素中，重点关注通过name属性进行匹配和赋值的过程。同时，讨论在表单提交时存储数据的方法。

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

关于这种表单文本，获取详情信息赋值到每一个对应的内容，需通过name来赋值。

<form class="mui-input-group" id="userform" name="Uform">
	<div class="mui-input-row">
		<label>姓名</label>
		<input type="text" class="mui-input-clear" id="names1" name="names1" placeholder="请输入姓名" autocomplete="off">
	</div>
	<div class="mui-input-row change">
		<label>性别</label>
		<span class="radio_inline mui-radio">
	        <input name="names2" type="radio" id="radio_man" value="0" class="rds" checked="true">
	        <label for="radio_man">男</label>
	        <input name="names2" type="radio" id="radio_woman" value="1" class="rds">
	        <label for="radio_woman">女</label>
	    </span>
	</div>
	<div class="mui-input-row">
		<label>联系电话</label>
		<input type="text" class="mui-input-clear" id="names3" name="names3" placeholder="请输入电话" autocomplete="off">
	</div>
	<div class="mui-input-row">
		<label>QQ号</label>
		<input type="text" class="mui-input-clear" id="names4" name="names4" placeholder="请输入QQ号" autocomplete="off">
    </div>
	<div class="mui-input-row">
		<label>邮箱地址</label>
		<input type="text" class="mui-input-clear" id="names5" name="names5" placeholder="请输入邮箱地址" autocomplete="off">
	</div>
	<div class="mui-input-row">
		<label>身份证号码</label>
		<input type="text" class="mui-input-clear" id="names6" name="names6" placeholder="请输入身份证号码" autocomplete="off">
	</div>
	<div class="mui-input-row">
		<label>出生日期</label>
		<input type="text" class="mui-input-clear" readonly="readonly" placeholder="请选择出生日期" id="names7" name="names7">
	</div>
	<div class="mui-button-row">
		<button type="submit" class="mui-btn mui-btn-primary" data-loading-icon="mui-spinner mui-spinner-custom" onclick="getVals();">保存信息</button>
	</div>
</form>

当提交表单信息存储时，需要使用表单提交数据

mui("#userform").on('tap', 'button', function(e) {
				//单选框选择
				var gender = $('input:radio[name="radio1"]:checked').val();
				//判断输入框是否为空
				var m = mui(".mui-input-clear");
				var check = true;
				mui.each(m, function(index, item) {
					if (!this.value || this.value.trim() == "") {
						var label = this.previousElementSibling;
						mui.alert(label.innerText + "不允许为空");
						check = false;
						return false;
					}
				});
                if (check) {
					var btnArray = ['否', '是'];
					mui.confirm('确认保存个人信息？', '提示', btnArray, function(e) {
						if (e.index == 1) {
							if (check) {//如果每个信息都填写了
								var info = $("#userform").serializeArray();//表单数据
							}
						}
						if (e.index == 0) { //取消

						}

					});
				}

})

获取数据赋值时：

var info = 本条数据；

console.log(queryURLParameter(info))
function queryURLParameter(info) {
			let obj = info;
			//遍历input将对应name的值放进去
			var inputArray = $("input[type!='radio']"); //取到所有的input text 并且放到一个数组中
			$.each(inputArray, function(k, v) {
					var key = $(this).attr("name");
					if (obj[key] != undefined) {
						this.value = obj[key];
					}
			})
			//判断单选框
			$("input[type='names2']").each(function(index) {
					if (this.value == obj.names2) {
						this.checked = true;
					} else {
						this.checked = false;
					}
				});
		    return obj;
}