복붙노트

[JQUERY] jQuery를 사용하여 폼 입력 필드를 얻?

JQUERY

jQuery를 사용하여 폼 입력 필드를 얻?

해결법

  1. 1.

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

    이 코드가 실패합니다 참고 <선택 여러> 요소.

    새로운 HTML 5 폼 입력은 jQuery를 버전 1.3에서 serializeArray 작동하지 않는 것으로 보인다. 이 버전에서 작동 1.4 이상

  2. 2.이 질문에 파티에 늦게, 그러나 이것은 더 쉽게입니다 :

    이 질문에 파티에 늦게, 그러나 이것은 더 쉽게입니다 :

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

});

  3. 3.jquery.form 플러그인은 다른 사람이 질문에이를까지 무엇을 찾고에 도움이 될 수 있습니다. 그것은 바로 당신이 원하는 여부를 어떻게합니까 있는지 확실하지 않습니다.

    jquery.form 플러그인은 다른 사람이 질문에이를까지 무엇을 찾고에 도움이 될 수 있습니다. 그것은 바로 당신이 원하는 여부를 어떻게합니까 있는지 확실하지 않습니다.

    serializeArray 기능도 있습니다.

  4. 4.가끔 한 번에 하나를 얻는 찾을 것이 더 유용하다. 이를 위해이있다 :

    가끔 한 번에 하나를 얻는 찾을 것이 더 유용하다. 이를 위해이있다 :

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

  5. 5.

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

    요소 변수 폼 내의 모든 입력, 선택, 텍스트 영역 및 필드 셋을 포함 할 것이다.

  6. 6.여기에 또 다른 솔루션, 양식에 대한 모든 데이터를 가져오고 그것이 서버 측 호출 또는 무언가에 사용할 수있는이 방법입니다.

    여기에 또 다른 솔루션, 양식에 대한 모든 데이터를 가져오고 그것이 서버 측 호출 또는 무언가에 사용할 수있는이 방법입니다.

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

    그런 다음 아약스 전화에 이것을 사용할 수 있습니다 :

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

    이것은 당신의에 대한 소용이 희망 :)

  7. 7.약간의 트위스트와 비슷한 문제가 있었다 그리고 나는이 밖으로 던져 줄 알았는데. ( ': 입력 양식') 나는 이미 양식 객체를했고 수는 쉽지 $에 변형 있도록 양식을 얻을 수 콜백 함수를 가지고있다. 대신에 내가 함께했다 :

    약간의 트위스트와 비슷한 문제가 있었다 그리고 나는이 밖으로 던져 줄 알았는데. ( ': 입력 양식') 나는 이미 양식 객체를했고 수는 쉽지 $에 변형 있도록 양식을 얻을 수 콜백 함수를 가지고있다. 대신에 내가 함께했다 :

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

    그것과 유사하지만 동일 상황,하지만 난이 스레드가 매우 유용하다고 나는 끝에이를 감싸 거라고 생각과 희망을 다른 사람이 유용하다고.

  8. 8.연관? 아니 몇 가지 작업을하지 않고 있지만 일반 선택기를 사용할 수 있습니다 :

    연관? 아니 몇 가지 작업을하지 않고 있지만 일반 선택기를 사용할 수 있습니다 :

    var items = new Array();

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

  9. 9.jQuery를 serializeArray는 시도도 그 필요 그렇다면, 장애인 필드를 포함하지 않습니다

    jQuery를 serializeArray는 시도도 그 필요 그렇다면, 장애인 필드를 포함하지 않습니다

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

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

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

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

    이것은 또한 XMLHttpRequest의 레벨 2 FormData 객체를 사용하여 jQuery를없이 할 수

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

    var data = new FormData([form])

  11. 11.체크 박스와 라디오 버튼을 잊지 마세요 -

    체크 박스와 라디오 버튼을 잊지 마세요 -

    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

  12. 12.이 코드 조각은 작동합니다 대신 이름으로, 이메일은 양식 필드 이름을 입력

    이 코드 조각은 작동합니다 대신 이름으로, 이메일은 양식 필드 이름을 입력

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

  13. 13.아무도 upvoted하거나 목록 데이터를 얻는 데 간결한 솔루션을 제안했다 이상한 것 같다. 거의 형태의 단일 차원 개체가 될 것 없습니다.

    아무도 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;
}, {});

  14. 14.저도 같은 문제를 겪고과 다른 방법으로 그것을 해결했다.

    저도 같은 문제를 겪고과 다른 방법으로 그것을 해결했다.

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

    그것은 모든 입력 필드의 값을 반환합니다. 더 구체적으로 : 당신은 $ ( '입력')를 변경할 수 있습니다.

  15. 15.nickf 주어진 있지만 어레이 입력 이름 고려하여 동일 용액 예를 들어,

    nickf 주어진 있지만 어레이 입력 이름 고려하여 동일 용액 예를 들어,

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

  16. 16.당신은 입력에서 여러 값을 얻을 필요하고 여러 값으로 입력을 정의하기 위해 '] [S 사용하는 경우, 다음을 사용할 수 있습니다 :

    당신은 입력에서 여러 값을 얻을 필요하고 여러 값으로 입력을 정의하기 위해 '] [S 사용하는 경우, 다음을 사용할 수 있습니다 :

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

  17. 17.돌진 랜스와 Simon_Weaver의 답변에서 영감을, 이것은 내가 가장 좋아하는 솔루션입니다.

    돌진 랜스와 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"}

  18. 18.나는 각 루프없이이 코드를 사용하고 있습니다 :

    나는 각 루프없이이 코드를 사용하고 있습니다 :

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

  19. 19.나는이 도움이뿐만 아니라, 가장 쉬운 바랍니다.

    나는이 도움이뿐만 아니라, 가장 쉬운 바랍니다.

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

  20. 20.그들이 선택되었는지 여부를 모든 체크 박스를 돌려 입력 선택 : 나는 모든 양식 필드와 아약스 호출을 할 필요가 때, 나는 문제가 있었다. 난 그냥 제출-수 폼 요소를 얻을 수있는 새로운 선택을 추가 :

    그들이 선택되었는지 여부를 모든 체크 박스를 돌려 입력 선택 : 나는 모든 양식 필드와 아약스 호출을 할 필요가 때, 나는 문제가 있었다. 난 그냥 제출-수 폼 요소를 얻을 수있는 새로운 선택을 추가 :

    $.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 사이트에 제품 옵션을 사용자 정의 할 때 나는 이것을 사용했다.

  21. 21.직렬화 ()는 가장 좋은 방법이다. 크리스토퍼 파커 Nickf의 anwser 더 수행 말 @, 그러나 그것은 형태가 텍스트 영역을 포함하고 메뉴를 선택할 수있는 것을 고려하지 않는다. 그것은 훨씬 더 사용 직렬화 () 한 다음에 필요로하는 것을 조작 할 수있다. 직렬화 데이터는 () 아약스 게시하거나 얻을 중 하나에서 사용할 수있는, 그래서 아무 문제가 없다.

    직렬화 ()는 가장 좋은 방법이다. 크리스토퍼 파커 Nickf의 anwser 더 수행 말 @, 그러나 그것은 형태가 텍스트 영역을 포함하고 메뉴를 선택할 수있는 것을 고려하지 않는다. 그것은 훨씬 더 사용 직렬화 () 한 다음에 필요로하는 것을 조작 할 수있다. 직렬화 데이터는 () 아약스 게시하거나 얻을 중 하나에서 사용할 수있는, 그래서 아무 문제가 없다.

  22. 22.이 사람을 도움이되기를 바랍니다. :)

    이 사람을 도움이되기를 바랍니다. :)

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

  23. 23.모든 답변은 좋지만 경우에 당신이 그 함수에서 무시하고자하는 분야가있다? 쉬운 예를 ignore_this를 들어, 필드에게 재산을 제공합니다 :

    모든 답변은 좋지만 경우에 당신이 그 함수에서 무시하고자하는 분야가있다? 쉬운 예를 ignore_this를 들어, 필드에게 재산을 제공합니다 :

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

    그리고 당신의 직렬화 기능에 :

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

    즉, 일부 필드를 무시 방법입니다.

  24. 24.다음 코드를 사용해보십시오 :

    다음 코드를 사용해보십시오 :

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

  25. 25.여러 선택 요소 (<여러 =을 선택 "복수">), 나는 그것이 작동 얻을 @ 제이슨 노 우드 영의 솔루션을 수정했습니다.

    여러 선택 요소 (<여러 =을 선택 "복수">), 나는 그것이 작동 얻을 @ 제이슨 노 우드 영의 솔루션을 수정했습니다.

    답 (같은 배치는) 만 모든 그들을 선택한 첫 번째 요소의 값을합니다. 또한 전자는 자바 스크립트 오류를 ​​던지고하지 초기화 또는 데이터를 반환했다.

    여기에 새로운 버전입니다 :

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

    참고 : 당신은 당신의 선택의 이름은 [] 예를 들어,의 끝에 추가되었는지 확인해야합니다

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

  26. 26.

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

    27. from https://stackoverflow.com/questions/169506/obtain-form-input-fields-using-jquery by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] jQuery를 체크 박스 상태 변경 이벤트를 확인  (0) 2020.10.18
[JQUERY] 어떻게 jQuery를 UI 대화 상자에서 닫기 버튼을 제거하려면?  (0) 2020.10.18
[JQUERY] 어떻게 방법과 jQuery 플러그인을 만드는 방법?  (0) 2020.10.18
[JQUERY] 무료있는 jqGrid에 remapColumnsByName와 remapColums를 교체하는 방법  (0) 2020.10.18
[JQUERY] VueJS 및 jQuery를 플레이 멋진합니다  (0) 2020.10.18
,

티스토리툴바