<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>获得表单数据</title>
<script type="text/javascript" src="scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="scripts/jquery.easyui-1.4.min.js"></script>
<link rel="stylesheet" type="text/css" href="themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css" href="themes/icon.css" />
<script type="text/javascript">
function submitForm(){
//获得input text的值
var name1 = $("[name='name']").attr("value");
var name2 = $("[name='name']").val();
//获得input radio选中的值
var sex = $("[name='sex']:checked").val();
//获得easyUI 时间控件的值
var birthday = $("[name='birthday']").val();
//获得select的值和文字
var politicalStatus = $("[name='politicalStatus']").val();
var politicalStatusText = $("[name='politicalStatus']").find("option:selected").text();
//获得easyUI select的值
var language = $("#language").combobox('getValue');
var language2 = $("[name='language']").val();
//获得input checkbox的值
var habit = $("[name='habit1']").val();
var val = '';
$("input[name^='habit']:checked").each(function(){
val += $(this).val() + ',';
});
}
</script>
<style type="text/css">
#container{
padding: 20px;
}
.item{
margin-bottom: 10px;
}
.item label{
display: inline-block;
width: 120px;
}
</style>
</head>
<body>
<div id="container" class="easyui-panel" title="表单样式" style="width:400px;">
<form id="form" action="" method="post">
<div class="item">
<label>姓名</label>
<input type="text" name="name"/>
</div>
<div class="item">
<label>性别</label>
<input name="sex" type="radio" value="1" />男
<input name="sex" type="radio" value="2" />女
</div>
<div class="item">
<label>出生日期</label>
<input name="birthday" type="text" class="easyui-datebox"/>
</div>
<div class="item">
<label>政治面貌</label>
<select name="politicalStatus">
<option value="type1">共产党员</option>
<option value="type2">预备党员</option>
<option value="type3">共青团员</option>
<option value="type4">其他</option>
</select>
</div>
<div class="item">
<label>语言</label>
<select class="easyui-combobox" name="language" id="language">
<option value="ar">Arabic</option>
<option value="bg">Bulgarian</option>
<option value="ca">Catalan</option>
<option value="zh-cht">Chinese Traditional</option>
<option value="cs">Czech</option>
<option value="da">Danish</option>
<option value="nl">Dutch</option>
<option value="en" selected="selected">English</option>
</select>
</div>
<div class="item">
<label>爱好</label>
<input name="habit1" type="checkbox" value="1" />橘子
<input name="habit2" type="checkbox" value="2" />苹果
<input name="habit3" type="checkbox" value="3" />香蕉
</div>
<div style="text-align:center;padding:5px">
<a href="javascript:void(0)" class="easyui-linkbutton" οnclick="submitForm()"> Submit </a>
<a href="javascript:void(0)" class="easyui-linkbutton" οnclick="clearForm()"> Clear </a>
</div>
</form>
</div>
</body>
</html>
2014-09-29——Form表单
最新推荐文章于 2022-06-25 16:00:30 发布