55

这是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="{&quot;validate&quot;:{&quot;required&quot;:false,&quot;messages&quot;:{}}}"></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="{&quot;validate&quot;:{&quot;required&quot;:false,&quot;messages&quot;:{}}}">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="{&quot;validate&quot;:{&quot;required&quot;:false,&quot;messages&quot;:{}}}">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="{&quot;validate&quot;:{&quot;required&quot;:false,&quot;messages&quot;:{}}}"><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
4

9 回答 9

142

您可以使用 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'];
........

并获取 ***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'));
});

和

<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>
于 2013-05-03T15:35:37.450 回答
15

我知道您使用的是 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("&");
}
于 2013-05-09T11:43:57.300 回答
8

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
于 2013-05-06T05:29:22.500 回答
5

试试这个获取表单输入文本值到 JavaScript 对象......

var fieldPair = {};
$("#form :input").each(function() {
    if($(this).attr("name").length > 0) {
        fieldPair[$(this).attr("name")] = $(this).val();
    }
});

console.log(fieldPair);
于 2016-03-30T07:52:02.087 回答
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);
于 2013-05-03T07:07:54.280 回答
0

答案已经被接受，我只是为了同样的目的写了一个简短的技术。

var fieldPair = '';
$(":input").each(function(){
fieldPair += $(this).attr("name") + ':' + $(this).val() + ';';
});

console.log(fieldPair);
于 2016-01-14T11:21:09.070 回答
0

如果要使用 $(formName).serializeArray() 或 $(formName).serialize()，则必须添加name='inputName'输入元素。否则将无法正常工作！

于 2018-04-11T03:51:32.230 回答
0

我需要将表单数据作为某种对象获取。我用这个：

$('#preview_form').serializeArray().reduce((function(acc, val) {
  acc[val.name.replace('[', '_').replace(']', '')] = val.value;
  return acc;
}), {});
于 2020-04-02T11:17:45.863 回答
-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;
};
于 2015-12-29T22:43:50.540 回答