使用jquery获取所有表单元素值？
这里是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
你可以使用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>
我知道你正在使用jQuery，但对于那些想要一个纯Javascript的解决scheme：
// 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("&"); }
jQuery有非常有用的函数称为序列化 。
演示： http : //jsfiddle.net/55xnJ/2/
//Just type: $("#preview_form").serialize(); //to get result: single=Single&multiple=Multiple&multiple=Multiple3&check=check2&radio=radio1
添加到它的结尾：
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);
试试这个获取表单input文本值到JavaScript对象…
var fieldPair = {}; $("#form :input").each(function(){ if($(this).attr("name").length > 0){ fieldPair[$(this).attr("name")] = $(this).val(); } }); console.log(fieldPair);
答案已经被接受了，我只是为了同样的目的而写一个简短的技巧。
var fieldPair = ''; $(":input").each(function(){ fieldPair += $(this).attr("name") + ':' + $(this).val() + ';'; }); console.log(fieldPair);
多一个
var submit = $('#submitId'); submit.on( 'click', function (e) { e.preventDefault(); e.stopPropagation(); var data ={}, inputs = $('#formId input'); function parseForm(inputs) { var i = 0, _l = inputs.length; for ( i; i < _l; i++ ) { data[inputs[i].name] = inputs[i].value; } } parseForm(inputs); console.dir( data ); });
返回散列
如果你想从简单的数组中获得所有的值，你可能会这样做。
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; };
