使用jquery獲取所有表單元素值？

下面是HTML代碼：使用jquery獲取所有表單元素值？

$("#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());

從此我得到的輸出值followes：

<!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>

這裏這將讓所有的表單字段值代碼

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

來源

2013-02-18 Siva G

問題是什麼？ – ohaal 2013-02-18 12:38:54

在你自己編寫一個表單序列化程序之前，你看看：['.serialize']（http://api.jquery.com/serialize/）？ – Yoshi 2013-02-18 12:40:19

你在做什麼輸出？如果您使用AJAX發送此信息，則有更簡單的方法。 – 2013-05-03 06:52:12

101

您可以使用jQuery的序列化（）函數：

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>

來源

2013-05-03 15:35:37 Lito

哇....我從來不知道'.serialize（）'直到現在......我一直在收集他們的ID通過輸入和輸入.... ommyyygeerrrddd – RCNeil 2013-05-06 20:28:30

添加這它的結束：

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-03 07:07:54 dave

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-06 05:29:22

我知道你正在使用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-09 11:43:57 KrisWebDev

-2

，如果你想擺脫形式的所有值簡單的數組你可能會做這樣的事情。

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-29 22:43:50

Josue - 我不知道爲什麼這（你是第一次使用，我們應該鼓勵積極的答案），但也許是因爲接受的答案更好（即這不會增加任何討論），或者沒有足夠的信息來說明你爲什麼建議比原始代碼或其他答案更好。 – 2015-12-29 23:13:46

我發佈的方法以類似的方式返回值，除了替換符號|由： – 2016-01-04 17:03:11

答案已經被接受了，我只是爲了同樣的目的而寫了一個簡短的技巧。

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

console.log(fieldPair);

來源

2016-01-14 11:21:09 Frahim

嘗試這樣來表單輸入文本值到JavaScript對象...

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

console.log(fieldPair);

來源

2016-03-30 07:52:02

一個更

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); 
    });

回報哈希

來源

2016-12-23 20:19:26

使用jquery獲取所有表單元素值？

回答

相關問題