[javascript] 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 폼 입력이 작동하지 않습니다 serializeArrayjQuery를 버전 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;
});

요소 변수는 양식 내의 모든 입력, 선택, 텍스트 영역 및 필드 세트를 포함합니다.

답변

다음은 폼에 대한 모든 데이터를 가져 와서 서버 측 호출 또는 기타 용도로 사용할 수있는 다른 솔루션입니다.

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

비슷하지만 동일한 상황은 아니지만이 스레드가 매우 유용하다는 것을 알았고 마지막에 이것을 쓰면 다른 사람이 유용하다고 생각했습니다.