Javascript 使用 jquery 获取所有表单元素值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14936494/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-24 18:23:07 来源:igfitidea点击:
get All Form elements values using jquery?
提问by Siva G
Here is the HTML Code:
这是 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>
Here the code which will get all form field values:
这里的代码将获取所有表单字段值：
$("#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());
From this i am getting the output value as followes:
由此我得到如下输出值：
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
i want the out as following:
我想要如下：
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
回答by Lito
You can use a serialize() function of JQuery:
您可以使用 JQuery 的 serialize() 函数：
var datastring = $("#preview_form").serialize();
$.ajax({
type: "POST",
url: "your url.php",
data: datastring,
success: function(data) {
alert('Data send');
}
});
And read in PHP:
并在 PHP 中阅读：
echo $_POST['datastring']['dialog_box_textarea_1'];
echo $_POST['datastring']['radiobutton_1'];
........
And get ***data-**** to tag HTML5 you can see this example:
并获取 ***data-**** 来标记 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'));
});
And
和
<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>
回答by KrisWebDev
I know you're using jQuery but for those who want a pure Javascriptsolution:
我知道您正在使用 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("&");
}
回答by Igor S.
jQuery has very helpful function called serialize.
jQuery 有一个非常有用的函数叫做serialize。
Demo: http://jsfiddle.net/55xnJ/2/
演示：http: //jsfiddle.net/55xnJ/2/
//Just type:
$("#preview_form").serialize();
//to get result:
single=Single&multiple=Multiple&multiple=Multiple3&check=check2&radio=radio1
回答by chintan kotadiya
Try this for getting form input text value to JavaScript object...
试试这个以获取表单输入文本值到 JavaScript 对象...
var fieldPair = {};
$("#form :input").each(function() {
if($(this).attr("name").length > 0) {
fieldPair[$(this).attr("name")] = $(this).val();
}
});
console.log(fieldPair);
回答by dave
Add this on to the end of it:
将其添加到它的末尾：
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);
回答by Hyman LI
If you want to use $(formName).serializeArray() or $(formName).serialize(),
you must add name='inputName'on your input element. or will not work!
如果您想使用 $(formName).serializeArray() 或 $(formName).serialize()，您必须添加name='inputName'您的输入元素。否则将无法工作！
回答by Aryeh Beitz
I needed to get the form data as some sort of object. I used this:
我需要将表单数据作为某种对象获取。我用过这个：
$('#preview_form').serializeArray().reduce((function(acc, val) {
acc[val.name.replace('[', '_').replace(']', '')] = val.value;
return acc;
}), {});
回答by Frahim
The answer already been accepted, I just write a short technique for the same purpose.
答案已经被接受，我只是为了同样的目的写了一个简短的技术。
var fieldPair = '';
$(":input").each(function(){
fieldPair += $(this).attr("name") + ':' + $(this).val() + ';';
});
console.log(fieldPair);
回答by Josue Barrios
if you want get all values from form in simple array you may be do something like this.
如果你想从简单数组中的表单中获取所有值，你可能会做这样的事情。
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;
};
