รับฟิลด์อินพุตแบบฟอร์มโดยใช้ jQuery หรือไม่

ฉันมีรูปแบบที่มีช่องป้อนข้อมูลมากมาย

เมื่อฉันจับเหตุการณ์ส่งแบบฟอร์มด้วย jQuery เป็นไปได้หรือไม่ที่จะรับฟิลด์อินพุตทั้งหมดของฟอร์มนั้นในอาเรย์แบบเชื่อมโยง

$('#myForm').submit(function() {
    // get all the inputs into an array.
    var $inputs = $('#myForm :input');

    // not sure if you wanted this, but I thought I'd add it.
    // get an associative array of just the values.
    var values = {};
    $inputs.each(function() {
        values[this.name] = $(this).val();
    });

});

ขอบคุณเคล็ดลับจาก Simon_Weaver ต่อไปนี้เป็นวิธีที่คุณสามารถทำได้โดยใช้serializeArray:

var values = {};
$.each($('#myForm').serializeArray(), function(i, field) {
    values[field.name] = field.value;
});

โปรดทราบว่าตัวอย่างนี้จะล้มเหลวใน<select multiple>องค์ประกอบ

ดูเหมือนว่าอินพุตแบบฟอร์ม HTML 5 ใหม่ไม่ทำงานserializeArrayใน jQuery เวอร์ชัน 1.3 ใช้งานได้ในเวอร์ชัน 1.4+

มางานปาร์ตี้เมื่อเร็ว ๆ นี้สำหรับคำถามนี้ แต่วิธีนี้ง่ายยิ่งขึ้น:

$('#myForm').submit(function() {
    // Get all the forms elements and their values in one step
    var values = $(this).serialize();

});

jquery.formปลั๊กอินอาจช่วยให้กับสิ่งที่คนอื่นกำลังมองหาสิ้นสุดที่ขึ้นกับคำถามนี้ ฉันไม่แน่ใจว่ามันจะตรงกับสิ่งที่คุณต้องการหรือไม่

นอกจากนี้ยังมีฟังก์ชั่นserializeArray

บางครั้งฉันพบว่าการใช้ทีละครั้งก็มีประโยชน์มากกว่า สำหรับสิ่งนี้มีสิ่งนี้:

var input_name = "firstname";
var input = $("#form_id :input[name='"+input_name+"']"); 

$('#myForm').bind('submit', function () {
  var elements = this.elements;
});

ตัวแปรองค์ประกอบจะมีอินพุตทั้งหมดเลือก textareas และ fieldets ภายในแบบฟอร์ม

นี่เป็นอีกวิธีการหนึ่งด้วยวิธีนี้คุณสามารถดึงข้อมูลทั้งหมดเกี่ยวกับแบบฟอร์มและใช้ในการเรียกใช้เซิร์ฟเวอร์หรือบางสิ่งบางอย่าง

$('.form').on('submit', function( e )){ 
   var form = $( this ), // this will resolve to the form submitted
       action = form.attr( 'action' ),
         type = form.attr( 'method' ),
         data = {};

     // Make sure you use the 'name' field on the inputs you want to grab. 
   form.find( '[name]' ).each( function( i , v ){
      var input = $( this ), // resolves to current input element.
          name = input.attr( 'name' ),
          value = input.val();
      data[name] = value;
   });

  // Code which makes use of 'data'.

 e.preventDefault();
}

จากนั้นคุณสามารถใช้สิ่งนี้กับการโทร ajax:

function sendRequest(action, type, data) {
       $.ajax({
            url: action,
           type: type,
           data: data
       })
       .done(function( returnedHtml ) {
           $( "#responseDiv" ).append( returnedHtml );
       })
       .fail(function() {
           $( "#responseDiv" ).append( "This failed" );
       });
}

หวังว่านี่จะเป็นประโยชน์สำหรับคุณ :)

มีปัญหาที่คล้ายกันกับการบิดเล็กน้อยและฉันคิดว่าฉันจะโยนมันออกไป $('form:input')ฉันมีฟังก์ชันการเรียกกลับที่ได้รับแบบฟอร์มเพื่อผมมีวัตถุรูปแบบที่มีอยู่แล้วและไม่สามารถง่ายที่แตกต่างบน แต่ฉันกลับมาพร้อมกับ:

    var dataValues = {};
    form.find('input').each(
        function(unusedIndex, child) {
            dataValues[child.name] = child.value;
        });

สถานการณ์ที่คล้ายกัน แต่ไม่เหมือนกัน แต่ฉันพบว่าเธรดนี้มีประโยชน์มากและคิดว่าฉันจะเก็บมันไว้ในตอนท้ายและหวังว่าคนอื่นจะพบว่ามีประโยชน์

เชื่อมโยง? ไม่ใช่โดยไม่มีงาน แต่คุณสามารถใช้ตัวเลือกทั่วไป:

var items = new Array();

$('#form_id:input').each(function (el) {
    items[el.name] = el;
});

jQuery serializeArrayไม่รวมเขตข้อมูลที่ถูกปิดใช้งานดังนั้นหากคุณต้องการสิ่งเหล่านั้นด้วยให้ลอง:

var data = {};
$('form.my-form').find('input, textarea, select').each(function(i, field) {
    data[field.name] = field.value;
});

http://api.jquery.com/serializearray/

$('#form').on('submit', function() {
    var data = $(this).serializeArray();
});

สิ่งนี้สามารถทำได้โดยไม่ต้อง jQuery ใช้วัตถุ XMLHttpRequest ระดับ 2 FormData

http://www.w3.org/TR/2010/WD-XMLHttpRequest2-20100907/#the-formdata-interface

var data = new FormData([form])

อย่าลืมช่องทำเครื่องหมายและปุ่มตัวเลือก -

var inputs = $("#myForm :input");
var obj = $.map(inputs, function(n, i) {
  var o = {};
  if (n.type == "radio" || n.type == "checkbox")
    o[n.id] = $(n).attr("checked");
  else
    o[n.id] = $(n).val();
  return o;
});
return obj

รหัสชิ้นนี้จะใช้งานได้ แทนที่จะเป็นชื่ออีเมลใส่ชื่อเขตข้อมูลฟอร์มของคุณ

$(document).ready(function(){
  $("#form_id").submit(function(event){
    event.preventDefault();
    var name = $("input[name='name']",this).val();
    var email = $("input[name='email']",this).val();
  });
});

ดูเหมือนแปลกที่ไม่มีใคร upvoted หรือเสนอวิธีแก้ปัญหาสั้น ๆ เพื่อรับข้อมูลรายการ แทบทุกรูปแบบจะเป็นวัตถุขนาดเดียว

ข้อเสียของการแก้ปัญหานี้คือแน่นอนว่าวัตถุเดี่ยวของคุณจะต้องเข้าถึงได้ที่ดัชนี [0] แต่ IMO นั้นเป็นวิธีที่ดีกว่าการใช้หนึ่งในโซลูชั่นการทำแผนที่โหล

var formData = $('#formId').serializeArray().reduce(function (obj, item) {
    if (obj[item.name] == null) {
        obj[item.name] = [];
    } 
    obj[item.name].push(item.value);
    return obj;
}, {});

ฉันมีปัญหาเดียวกันและแก้ไขมันในวิธีที่แตกต่าง

var arr = new Array();
$(':input').each(function() {
 arr.push($(this).val());
});
arr;

มันจะส่งคืนค่าของฟิลด์อินพุตทั้งหมด คุณสามารถเปลี่ยน$(':input')เป็นเฉพาะเจาะจงมากขึ้น

วิธีการแก้ปัญหาเดียวกับที่กำหนดโดยnickfแต่มีชื่ออินพุตของอาเรย์ที่นำมาพิจารณาเช่น

<input type="text" name="array[]" />

values = {};
$("#something :input").each(function() {
  if (this.name.search(/\[\]/) > 0) //search for [] in name
  {
    if (typeof values[this.name] != "undefined") {
      values[this.name] = values[this.name].concat([$(this).val()])
    } else {
      values[this.name] = [$(this).val()];
    }
  } else {
    values[this.name] = $(this).val();
  }
});

หากคุณต้องการรับค่าหลายค่าจากอินพุตและคุณใช้ [] เพื่อกำหนดอินพุตที่มีหลายค่าคุณสามารถใช้ค่าต่อไปนี้:

$('#contentform').find('input, textarea, select').each(function(x, field) {
    if (field.name) {
        if (field.name.indexOf('[]')>0) {
            if (!$.isArray(data[field.name])) {
               data[field.name]=new Array();
            }
            data[field.name].push(field.value);
        } else {
            data[field.name]=field.value;
        }
    }                   
});

แรงบันดาลใจจากคำตอบของLance RushingและSimon_Weaverนี่เป็นคำตอบที่ฉันโปรดปราน

$('#myForm').submit( function( event ) {
    var values = $(this).serializeArray();
    // In my case, I need to fetch these data before custom actions
    event.preventDefault();
});

ผลลัพธ์คืออาร์เรย์ของวัตถุเช่น

[{name: "start-time", value: "11:01"}, {name: "end-time", value: "11:11"}]

ด้วยรหัสด้านล่าง

var inputs = {};
$.each(values, function(k, v){
    inputs[v.name]= v.value;
});

มันจะเป็นผลลัพธ์สุดท้าย

{"start-time":"11:01", "end-time":"11:01"}

ฉันใช้รหัสนี้โดยไม่มีการวนซ้ำ:

$('.subscribe-form').submit(function(e){
    var arr=$(this).serializeArray();
    var values={};
    for(i in arr){values[arr[i]['name']]=arr[i]['value']}
    console.log(values);
    return false;
});

ฉันหวังว่านี่จะเป็นประโยชน์เช่นเดียวกับที่ง่ายที่สุด

 $("#form").submit(function (e) { 
    e.preventDefault();
    input_values =  $(this).serializeArray();
  });

เมื่อฉันต้องการทำการโทร ajax ด้วยฟิลด์แบบฟอร์มทั้งหมดฉันมีปัญหากับ:ตัวเลือกอินพุตส่งคืนช่องทำเครื่องหมายทั้งหมดไม่ว่าจะถูกตรวจสอบหรือไม่ ฉันเพิ่มตัวเลือกใหม่เพื่อรับองค์ประกอบแบบฟอร์มที่ส่งได้:

$.extend($.expr[':'],{
    submitable: function(a){
        if($(a).is(':checkbox:not(:checked)'))
        {
            return false;
        }
        else if($(a).is(':input'))
        {
            return true;
        }
        else
        {
            return false;
        }
    }
});

การใช้งาน:

$('#form_id :submitable');

ฉันยังไม่ได้ทดสอบด้วยหลายกล่องเลือก แต่มันใช้งานได้กับทุกเขตข้อมูลในรูปแบบที่จะส่งมาตรฐาน

ฉันใช้สิ่งนี้เมื่อปรับแต่งตัวเลือกผลิตภัณฑ์ในไซต์ OpenCart เพื่อรวมช่องทำเครื่องหมายและฟิลด์ข้อความรวมถึงประเภทกล่องเลือกมาตรฐาน

ทำให้เป็นอันดับ () เป็นวิธีที่ดีที่สุด @ Christopher Parker บอกว่า anwser ของ Nickf ทำงานได้สำเร็จมากขึ้นอย่างไรก็ตามไม่คำนึงว่ารูปแบบอาจมี textarea และเมนูที่เลือก เป็นการดีกว่าที่จะใช้ serialize () แล้วจัดการกับสิ่งที่คุณต้องการ ข้อมูลจากซีเรียลไลซ์ () สามารถใช้ได้ทั้งในโพสต์ Ajax หรือรับดังนั้นจึงไม่มีปัญหา

หวังว่านี่จะช่วยใครซักคน :)

// This html:
// <form id="someCoolForm">
// <input type="text" class="form-control" name="username" value="...." />
// 
// <input type="text" class="form-control" name="profile.first_name" value="...." />
// <input type="text" class="form-control" name="profile.last_name" value="...." />
// 
// <input type="text" class="form-control" name="emails[]" value="..." />
// <input type="text" class="form-control" name="emails[]" value=".." />
// <input type="text" class="form-control" name="emails[]" value="." />
// </form>
// 
// With this js:
// 
// var form1 = parseForm($('#someCoolForm'));
// console.log(form1);
// 
// Will output something like:
// {
// username: "test2"
// emails:
//   0: ".@....com"
//   1: "...@........com"
// profile: Object
//   first_name: "..."
//   last_name: "..."
// }
// 
// So, function below:

var parseForm = function (form) {

    var formdata = form.serializeArray();

    var data = {};

    _.each(formdata, function (element) {

        var value = _.values(element);

        // Parsing field arrays.
        if (value[0].indexOf('[]') > 0) {
            var key = value[0].replace('[]', '');

            if (!data[key])
                data[key] = [];

            data[value[0].replace('[]', '')].push(value[1]);
        } else

        // Parsing nested objects.
        if (value[0].indexOf('.') > 0) {

            var parent = value[0].substring(0, value[0].indexOf("."));
            var child = value[0].substring(value[0].lastIndexOf(".") + 1);

            if (!data[parent])
                data[parent] = {};

            data[parent][child] = value[1];
        } else {
            data[value[0]] = value[1];
        }
    });

    return data;
};

คำตอบทั้งหมดเป็นสิ่งที่ดี แต่ถ้ามีเขตข้อมูลที่คุณต้องการละเว้นในฟังก์ชันนั้น ง่าย ๆ ให้คุณสมบัติกับฟิลด์ตัวอย่างเช่นละเว้น _:

<input type="text" name="some_name" ignore_this>

และในฟังก์ชั่นต่อเนื่องของคุณ:

if(!$(name).prop('ignorar')){
   do_your_thing;
}

นั่นคือวิธีที่คุณไม่สนใจบางฟิลด์

ลองรหัสต่อไปนี้:

jQuery("#form").serializeArray().filter(obje => 
obje.value!='').map(aobj=>aobj.name+"="+aobj.value).join("&")

สำหรับองค์ประกอบที่เลือกหลายรายการ ( <select multiple="multiple">) ฉันแก้ไขโซลูชันจาก @Jason Norwood-Young เพื่อให้ทำงานได้

คำตอบ (โพสต์) ใช้เวลาเพียงค่าจากองค์ประกอบแรกที่ได้รับเลือกไม่ทั้งหมดของพวกเขา มันไม่ได้เริ่มต้นหรือกลับมาdataข้อผิดพลาดการขว้างปา JavaScript

นี่คือเวอร์ชั่นใหม่:

function _get_values(form) {
  let data = {};
  $(form).find('input, textarea, select').each(function(x, field) {
    if (field.name) {
      if (field.name.indexOf('[]') > 0) {
        if (!$.isArray(data[field.name])) {
          data[field.name] = new Array();
        }
        for (let i = 0; i < field.selectedOptions.length; i++) {
          data[field.name].push(field.selectedOptions[i].value);
        }

      } else {
        data[field.name] = field.value;
      }
    }

  });
  return data
}

การใช้งาน:

_get_values($('#form'))

หมายเหตุ: คุณเพียงแค่ต้องแน่ใจว่าตัวnameเลือกที่คุณเลือกได้[]ผนวกเข้ากับส่วนท้ายของตัวอย่างเช่น:

<select name="favorite_colors[]" multiple="multiple">
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

$("#form-id").submit(function (e) { 
  e.preventDefault();
  inputs={};
  input_serialized =  $(this).serializeArray();
  input_serialized.forEach(field => {
    inputs[field.name] = field.value;
  })
  console.log(inputs)
});