jquery 특정 양식에서 모든 입력 받기
특정 양식에서 입력된 내용을 모두 채울 수 있는 방법이 있습니까?예를 들어, 이런 것들이 있습니다.
<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...
*note: 양식마다 입력량과 종류가 다를 수 있으며 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, name에 접근할 수 있고, 심지어 그 입력 요소를 애니메이션화할 수 있습니다.
이것을 위한 방법이 있습니까?
미리 알려주시면 감사하겠습니다! 그리고 D.
양식의 모든 입력을 반복하려면 다음 작업을 수행할 수 있습니다.
$("form#formID :input").each(function(){
var input = $(this); // This is the jquery object of the input, do what you will
});
jquery:input selector를 사용하여 모든 유형의 입력을 가져옵니다. 텍스트만 원하는 경우 다음 작업을 수행할 수 있습니다.
$("form#formID input[type=text]")//...
기타.
아래 코드는 폼 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());
}
);
HTML 양식 "elements" 특성 사용:
$.each($("form").elements, function(){
console.log($(this));
});
이제 "입력, 텍스트 영역, 선택..." 등의 이름을 제공할 필요가 없습니다.
$(document).on("submit","form",function(e){
//e.preventDefault();
$form = $(this);
$i = 0;
$("form input[required],form select[required]").each(function(){
if ($(this).val().trim() == ''){
$(this).css('border-color', 'red');
$i++;
}else{
$(this).css('border-color', '');
}
})
if($i != 0) e.preventDefault();
});
$(document).on("change","input[required]",function(e){
if ($(this).val().trim() == '')
$(this).css('border-color', 'red');
else
$(this).css('border-color', '');
});
$(document).on("change","select[required]",function(e){
if ($(this).val().trim() == '')
$(this).css('border-color', 'red');
else
$(this).css('border-color', '');
});
언급URL : https://stackoverflow.com/questions/4291005/jquery-get-all-input-from-specific-form
'bestsource' 카테고리의 다른 글
ng-required vs required 사용 (0) | 2023.10.26 |
---|---|
페이지 변경 청취자에서 페이지 설정 보기 더 이상 사용되지 않음 (0) | 2023.10.26 |
PDO - FETCH_CLASS - 결과를 매개 변수로 생성자에게 전달 (0) | 2023.10.26 |
PIL을 사용하여 픽셀의 RGB 가져오기 (0) | 2023.10.26 |
mysql은 각 일에 대해 두 날짜/시간 사이의 초를 계산합니다. (0) | 2023.10.26 |