lấy tất cả các giá trị của phần tử Form bằng cách sử dụng jquery?

Dưới đây là HTML Code:lấy tất cả các giá trị của phần tử Form bằng cách sử dụng jquery?

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

Đây mã mà sẽ nhận được tất cả các giá trị trường có dạng:

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

Từ đó tôi đang nhận được giá trị đầu ra như 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

tôi muốn ra ngoài như sau:

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

Nguồn

2013-02-18 Siva G

câu hỏi là gì? – ohaal

Trước khi tự viết một trình tự tạo biểu mẫu, bạn đã xem: ['.serialize'] (http://api.jquery.com/serialize/)? – Yoshi

Bạn đang làm gì với đầu ra?Nếu bạn đang gửi điều này với AJAX, có những cách dễ dàng hơn. –

101

Bạn có thể sử dụng một hàm serialize() của JQuery:

var datastring = $("#preview_form").serialize(); 
     $.ajax({ 
      type: "POST", 
      url: "your url.php", 
      data: datastring, 
      success: function(data) { 
       alert('Data send'); 
      } 
     });

Và đọc trong PHP:

echo $_POST['datastring']['dialog_box_textarea_1']; 
echo $_POST['datastring']['radiobutton_1']; 
........

Và nhận dữ liệu *** - **** để gắn thẻ HTML5, bạn có thể xem ví dụ này:

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

Và

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

Nguồn

2013-05-03 15:35:37 Lito

Wow .... Tôi không bao giờ biết về '.serialize()' cho đến bây giờ ... Tôi đã thu thập dữ liệu đầu vào bằng ID của họ hơn và hơn .... ommyyygeerrrddd – RCNeil

Thêm này vào phần cuối của nó:

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

Nguồn

2013-05-03 07:07:54 dave

jQuery có chức năng rất hữu ích gọi serialize.

Demo: http://jsfiddle.net/55xnJ/2/

//Just type: 
$("#preview_form").serialize(); 

//to get result: 
single=Single&multiple=Multiple&multiple=Multiple3&check=check2&radio=radio1

Nguồn

2013-05-06 05:29:22

Tôi biết bạn đang sử dụng jQuery nhưng đối với những người muốn có một tinh khiết giải pháp 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("&"); 
}

Nguồn

2013-05-09 11:43:57 KrisWebDev

-2

nếu bạn muốn có được tất cả các giá trị từ hình thức trong mảng đơn giản bạn có thể làm một cái gì đó như thế này.

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

Nguồn

2015-12-29 22:43:50

Josue - Tôi không chắc tại sao điều này được giảm xuống, (Bạn là người dùng lần đầu tiên và chúng tôi nên khuyến khích câu trả lời tích cực), nhưng có thể vì câu trả lời được chấp nhận tốt hơn (tức là điều này không thêm gì vào cuộc thảo luận), hoặc có thể không có đủ thông tin về lý do của bạn đề xuất hoạt động tốt hơn mã gốc hoặc các câu trả lời khác. –

Phương pháp tôi đăng, trả về giá trị theo cách tương tự, ngoại trừ việc thay thế ký hiệu | bởi: –

Câu trả lời đã được chấp nhận, tôi chỉ viết một kỹ thuật ngắn cho cùng một mục đích.

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

console.log(fieldPair);

Nguồn

2016-01-14 11:21:09 Frahim

Hãy thử điều này để nhận dạng giá trị văn bản đầu vào cho đối tượng JavaScript ...

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

console.log(fieldPair);

Nguồn

2016-03-30 07:52:02

thêm một

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

lợi nhuận băm

Nguồn

2016-12-23 20:19:26

lấy tất cả các giá trị của phần tử Form bằng cách sử dụng jquery?

Trả lời

Các vấn đề liên quan