jquery는 특정 형식에서 모든 입력을 가져옵니다.


84

특정 양식의 모든 입력을 채우는 방법이 있습니까? 다음과 같이 말하겠습니다.

<form id="unique00">
  <input type="text" name="whatever" id="whatever" value="whatever" />
  <div>
    <input type="checkbox" name="whatever" id="whatever" value="whatever" />
  </div>
  <table><tr><td>
    <input type="hidden" name="whatever" id="whatever" value="whatever" />
    <input type="submit" value="qweqsac" />
  </td></tr></table>
</form>
<form id="unique01">
  <div>
    <input type="text" name="whatever" id="whatever" value="whatever" />
    <input type="checkbox" name="whatever" id="whatever" value="whatever" />
  </div>
  <table><tr><td>
    <input type="hidden" name="whatever" id="whatever" value="whatever" />
  </td></tr></table>
  <select>blah...</select>
  <input type="submit" value="qweqsac" />
</form>
etc forms... forms...

* 참고 : 각 양식은 입력 및 유형의 양과 HTML 구조가 다를 수 있습니다.

그래서 특정 양식 ID에서 입력을 채우는 방법이 있습니까? 예를 들어 특정 양식 ID에서 제출 버튼을 클릭하면 jquery가 해당 양식 ID 내의 모든 입력을 채워줍니다. 현재 내가하는 일은 다음과 같습니다.

$("form").submit(function(){ return validateForm($(this)) });
function validateForm(form){
var retVal = true;
var re;
$.each(form.serializeArray(), function(i, field) {
  var input = $('input[name='+field.name+']');
  field.value = $.trim(field.value);
  switch(field.name){
    case "name" :
        and another cases...
      }
    })
 }

그게 작동했지만이 경우 field.name 및 field.value 만 가져오고 실제로 원하는 것은 각 입력 요소에 대한 jquery 객체를 원하므로 CSS, ID, 이름 및 입력 요소에 애니메이션을 적용 할 수도 있습니다.

이것에 대한 방법이 있습니까?

알려 주시고 미리 감사드립니다! 과

답변:


180

양식의 모든 입력을 반복하려면 다음을 수행 할 수 있습니다.

$("form#formID :input").each(function(){
 var input = $(this); // This is the jquery object of the input, do what you will
});

이것은 jquery : input 선택기 를 사용하여 모든 유형의 입력을 가져옵니다. 텍스트 만 원하면 다음을 수행 할 수 있습니다.

$("form#formID input[type=text]")//...

기타


3
내 생각에 : 입력이 작동하지만 그렇지 않으면 할 수 있습니다.$("form#formID input[type=text],form#formID select")
TJB

위의 첫 번째 답변에 오타를 기록하십시오. $ ( "from은 $ ("form)
Mitch

1
$("form#formID :input").eachinput유형, select유형 및 심지어 button유형 입력을 출력 합니다 . 적어도 내 코드에서는 그렇습니다.
TARKUS

3
@TARKUS input:input. $ ( ": input")은 모든 jQuery 양식 요소를 선택합니다. $ ( "input")은 입력 태그 만 선택합니다.
조나단 엘모어

25

아래 코드는 양식 ID가있는 특정 양식에서 요소의 세부 사항을 가져 오는 데 도움이됩니다.

$('#formId input, #formId select').each(
    function(index){  
        var input = $(this);
        alert('Type: ' + input.attr('type') + 'Name: ' + input.attr('name') + 'Value: ' + input.val());
    }
);

아래 코드는 로딩 페이지에있는 모든 양식에서 요소의 세부 사항을 가져 오는 데 도움이됩니다.

$('form input, form select').each(
    function(index){  
        var input = $(this);
        alert('Type: ' + input.attr('type') + 'Name: ' + input.attr('name') + 'Value: ' + input.val());
    }
);

아래 코드는 요소가 태그 내부에 배치되지 않은 경우에도 로딩 페이지에 배치되는 요소의 세부 사항을 가져 오는 데 도움이됩니다.

$('input, select').each(
    function(index){  
        var input = $(this);
        alert('Type: ' + input.attr('type') + 'Name: ' + input.attr('name') + 'Value: ' + input.val());
    }
);

참고 : 아래와 같이 개체 목록에 필요한 요소 태그 이름을 더 추가합니다.

Example: to get name of attribute "textarea",

$('input, select, textarea').each(
    function(index){  
        var input = $(this);
        alert('Type: ' + input.attr('type') + 'Name: ' + input.attr('name') + 'Value: ' + input.val());
    }
);

1
이 input.val ()을 사용하여 텍스트의 가치를 얻지 못합니다 .. 도와 줄 수 있습니까?
DhavalThakor

내 잘못이야. Sory 나는 출력을 위해 잘못된 곳을 찾고 있었다.
DhavalThakor

3

사용 HTML 양식 "요소"속성 :

$.each($("form").elements, function(){ 
    console.log($(this));
    });

이제 "입력, 텍스트 영역, 선택 ..."등과 같은 이름을 제공 할 필요가 없습니다.


두! -너무 많은 정보. 양식 정보를 더 빨리 보는 방법 $ ( "form : input"). each (function (index) {console.log (index, this.type, this.id, this.name, this.value, this.placeholder );});
Jules Bartow
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.