以下是HTML代码：
<!DOCTYPE html><html xmlns='http://www.w3.org/1999/xhtml' >
<head>
<title>HTML Form Builder</title>
<link href='css/font1.css' rel='stylesheet' type='text/css'>
<link href='css/font2.css' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='css/style.min.css' type='text/css' media='all' />
<link rel='stylesheet' href='css/form.min.css' type='text/css' media='all' />
<link rel='stylesheet' href='css/style1.css' type='text/css' media='all' id='css-theme'/>
<link type='text/css' href='css/redmond/jquery-ui-1.8.23.custom.css' rel='stylesheet' />
<link rel='stylesheet' href='css/tipsy.css' type='text/css' media='all' />
<script type='text/javascript' src='js/jquery-1.8.0.min.js'></script>
<script type='text/javascript' src='js/jquery-ui-1.8.23.custom.min.js'></script>
<script type='text/javascript' src='js/jquery.metadata.js'></script>
<script type='text/javascript' src='js/jquery.validate.js'></script>
<script type='text/javascript' src='js/jquery.tipsy.js'></script>
<script type='text/javascript' src='js/jquery.json-2.3.min.js'></script>
<script type='text/javascript' src='js/main.min.js'></script>
<script type='text/javascript'>
$(function(){
changeInnerHTML('doctor_id');
changeInnerHTML('hospital_id');
changeInnerHTML('clinic_id');
changeInnerHTML('stockist_id');
changeInnerHTML('chemist_id');
changeInnerHTML('bloodbank_id');
changeInnerHTML('dialysis_id');
});
function changeInnerHTML(id)
{
if($('#dialog_box_'+id).length)
{
var tmp=id.split('_');
$.get('getDataValues.php?ref='+tmp[0],function(data,status){
$('#dialog_box_'+id).html(data);
});
}
}
</script>
</head>
<body>
<div id='container'>
<h1 id="form-name" style="background-color: rgb(255, 255, 255); box-shadow: none; border: none; margin: 8px 15px;">New Form</h1>
<form method="POST" id="preview_form" novalidate="novalidate">
<div class="row" style="display: block;"><label class="field" for="textarea_1">textarea_1</label><span class="textArea" data=""><textarea id="dialog_box_textarea_1" name="textarea_1" data="{"validate":{"required":false,"messages":{}}}"></textarea></span></div><div class="row" style="display: block;"><label class="field" for="radiobutton_1">radiobutton_1</label><span class="radioButton" data="" id="radiobutton_1"><label class="option" for="radiobutton_1_option_1"><input class="radio" id="dialog_box_radiobutton_1_option_1" type="radio" name="radiobutton_1" value="Option 1" data="{"validate":{"required":false,"messages":{}}}">Option 1</label><label class="option" for="radiobutton_1_option_2"><input class="radio" id="radiobutton_1_option_2" type="radio" name="radiobutton_1" value="Option 2">Option 2</label><label class="option" for="radiobutton_1_option_3"><input class="radio" id="radiobutton_1_option_3" type="radio" name="radiobutton_1" value="Option 3">Option 3</label></span></div><div class="row" style="display: block;"><label class="field" for="checkboxgroup_1">checkboxgroup_1</label><span class="checkBoxGroup" data="" id="checkboxgroup_1"><label class="option" for="checkboxgroup_1_option_1"><input type="checkbox" class="checkbox" name="checkboxgroup_1[]" id="dialog_box_checkboxgroup_1_option_1" value="Option 1" data="{"validate":{"required":false,"messages":{}}}">Option 1</label><label class="option" for="checkboxgroup_1_option_2"><input type="checkbox" class="checkbox" name="checkboxgroup_1[]" id="checkboxgroup_1_option_2" value="Option 2">Option 2</label><label class="option" for="checkboxgroup_1_option_3"><input type="checkbox" class="checkbox" name="checkboxgroup_1[]" id="checkboxgroup_1_option_3" value="Option 3">Option 3</label></span></div><div class="row" style="display: block;"><label class="field" for="dropdown_1">dropdown_1</label><span class="dropDown" data=""><select id="dialog_box_dropdown_1" name="dropdown_1" data="{"validate":{"required":false,"messages":{}}}"><option value="Option 1">Option 1</option><option value="Option 2">Option 2</option><option value="Option 3">Option 3</option></select></span></div><input type="button" class="button blue" value="Submit" id="submit-form"><input type='hidden' id='tname' name='tname' value='surveyForm_2' /></form></div> <!--container-->
<script type='text/javascript' src='js/form.min.js'></script>
</body>
</html>
这里将获得所有表单字段值的代码：
$("#hidAll").append($("#preview_form :input").map(function () {
if ($(this).val() != 'Submit') {
if ($(this).is('select')) {
var aa = $(this).children('option').map(function () {
return $(this).val();
}).get().join("|");
return $(this).attr('name') + '|' + aa;
} else if ($(this).is('input:checkbox')) {
return $(this).attr('name').substring(0, $(this).attr('name').length - 2) + '|' + $(this).val();
} else {
return $(this).attr('name') + '|' + $(this).val();
}
}
}).get().join(","));
alert($("#hidAll").html());
从这里我得到的输出值如下：
textfield_1|dgdfg,
checkboxgroup_1|Option 1,
checkboxgroup_1|Option 2,
checkboxgroup_1|Option 3,
radiobutton_1|Option 1,
radiobutton_1|Option 2,
radiobutton_1|Option 3,
dropdown_1|Option 1!Option 2!Option 3
我希望如下：
textfield_1|dgdfg,
checkboxgroup_1|Option 1!Option 2!Option 3,
radiobutton_1|Option 1!Option 2!Option 3,
dropdown_1|Option 1!Option 2!Option 3
答案 0 :(得分：118)
您可以使用JQuery的serialize（）函数：
var datastring = $("#preview_form").serialize();
$.ajax({
type: "POST",
url: "your url.php",
data: datastring,
success: function(data) {
alert('Data send');
}
});
用PHP阅读：
echo $_POST['datastring']['dialog_box_textarea_1'];
echo $_POST['datastring']['radiobutton_1'];
........
获取***数据 - ****标记HTML5，您可以看到此示例：
<div id="texto" data-author="Ricardo Miranda" data-date="2012-06-21">
<h4>Lorem ipsum</h4>
<p>
Lorem ipsum dolor sit amet, ius integre eligendi et,
sea ut expetendis conclusionemque,
mel at ornatus invenire. His ad moderatius definiebas omittantur,
liber saepe albucius sea cu.
Audire tamquam dolores vis ne, mediocrem consulatu eum ex.
Duo te agam saepe convenire, et fugit iisque his.
</p>
<script type="text/javascript">
$(function() {
alert("The text is write " + $('#texto').data('author'));
});
和
<div id="texto" data-author='{"nombre":"Ricardo","apellido":"Miranda"}' data-date="2012-06-21">
...
</div>
<script type="text/javascript">
$(function() {
alert("The text is write " + $('#texto').data('author').apellido + ", " +
('#texto').data('author').nombre);
});
</script>
答案 1 :(得分：13)
我知道你正在使用jQuery，但对于那些想要纯Javascript 解决方案的人来说：
// Serialize form fields as URI argument/HTTP POST data
function serializeForm(form) {
var kvpairs = [];
for ( var i = 0; i < form.elements.length; i++ ) {
var e = form.elements[i];
if(!e.name || !e.value) continue; // Shortcut, may not be suitable for values = 0 (considered as false)
switch (e.type) {
case 'text':
case 'textarea':
case 'password':
case 'hidden':
kvpairs.push(encodeURIComponent(e.name) + "=" + encodeURIComponent(e.value));
break;
case 'radio':
case 'checkbox':
if (e.checked) kvpairs.push(encodeURIComponent(e.name) + "=" + encodeURIComponent(e.value));
break;
/* To be implemented if needed:
case 'select-one':
... document.forms[x].elements[y].options[0].selected ...
break;
case 'select-multiple':
for (z = 0; z < document.forms[x].elements[y].options.length; z++) {
... document.forms[x].elements[y].options[z].selected ...
} */
break;
}
}
return kvpairs.join("&");
}
答案 2 :(得分：7)
jQuery有一个非常有用的函数叫serialize。
演示： http://jsfiddle.net/55xnJ/2/
//Just type:
$("#preview_form").serialize();
//to get result:
single=Single&multiple=Multiple&multiple=Multiple3&check=check2&radio=radio1
答案 3 :(得分：4)
尝试将表单输入文本值转换为JavaScript对象...
var fieldPair = {};
$("#form :input").each(function() {
if($(this).attr("name").length > 0) {
fieldPair[$(this).attr("name")] = $(this).val();
}
});
console.log(fieldPair);
答案 4 :(得分：3)
将其添加到其末尾：
var array = $("#hidAll").html();
x = array.split(',');
key=s="";
for (i=0; i<x.length; i++) {
oldkey = key;
key = x[i].split('|')[0];
if (oldkey==key) s+='!';
else s+=',\n'+key+'|';
s+=x[i].split('|')[1];
}
s = s.substring(1);
$('#hidAll').html(a);
答案 5 :(得分：0)
答案已经被接受了，我只是为了同一目的写了一个简短的技术。
var fieldPair = '';
$(":input").each(function(){
fieldPair += $(this).attr("name") + ':' + $(this).val() + ';';
});
console.log(fieldPair);
答案 6 :(得分：0)
如果要使用$（formName）.serializeArray（）或$（formName）.serialize（），
您必须在输入元素上添加name='inputName'。或者不会工作！
答案 7 :(得分：0)
我需要获取表单数据作为某种对象。我用了这个：
$('#preview_form').serializeArray().reduce((function(acc, val) {
acc[val.name.replace('[', '_').replace(']', '')] = val.value;
return acc;
}), {});
答案 8 :(得分：-1)
如果你想从简单数组中获取表单中的所有值，你可能会做这样的事情。
function getValues(form) {
var listvalues = new Array();
var datastring = $("#" + form).serializeArray();
var data = "{";
for (var x = 0; x < datastring.length; x++) {
if (data == "{") {
data += "\"" + datastring[x].name + "\": \"" + datastring[x].value + "\"";
}
else {
data += ",\"" + datastring[x].name + "\": \"" + datastring[x].value + "\"";
}
}
data += "}";
data = JSON.parse(data);
listvalues.push(data);
return listvalues;
};