[jquery] 클릭 한 제출 버튼을 기준으로 상위 양식을 선택하려면 어떻게합니까?

Program / 글쓴이

3 개의 양식이있는 웹 페이지가 있습니다. 중첩되지 않고 차례대로 (거의 동일하며 다른 하나의 숨겨진 변수 만 있음). 사용자는 하나의 양식 만 작성하고 하나의 JS 스크립트로 모든 양식의 유효성을 검사하고 싶습니다.

그렇다면 사용자가 form # 1의 제출 버튼을 클릭 할 때 js 스크립트가 form1의 필드 만 처리하도록하려면 어떻게해야합니까? 나는 그것이 $ (this) .parents와 관련이 있다고 생각하지만 어떻게 해야할지 모르겠습니다.

내 유효성 검사 스크립트 (다른 ​​곳에서 단일 양식 만 사용)는 다음과 같습니다.


$(document).ready(function(){
    $("#submit").click(function(){
        $(".error").hide();
        var hasError = false;

        var nameVal = $("#name").val();
        if(nameVal == '') {
            $("#name").after('Please enter your name.');
            hasError = true;
        }


        if(hasError == false) {blah blah do all the processing stuff}

그래서 $ ( “# name”). val () 같은 것을 $ (this) .parents ( ‘form’). name.val ()으로 바꿔야합니까? 아니면 이것에 대해 더 좋은 방법이 있습니까?

감사!

답변

다음과 같은 양식을 선택할 수 있습니다.

$("#submit").click(function(){
    var form = $(this).parents('form:first');
    ...
});

그러나 일반적으로 양식 자체의 제출 이벤트에 이벤트를 첨부하는 것이 좋습니다. 필드 중 하나에서 Enter 키를 눌러 제출하는 경우에도 트리거되기 때문입니다.

$('form#myform1').submit(function(e){
     e.preventDefault(); //Prevent the normal submission action
     var form = this;
     // ... Handle form submission
});

양식 내에서 필드를 선택하려면 양식 컨텍스트를 사용하십시오. 예를 들면 :

$("input[name='somename']",form).val();

답변

입력 요소의 형식을 찾는 방법을 검색 할 때이 답변을 찾았습니다. 다음을 사용하는 것보다 더 나은 방법이 있기 때문에 메모를 추가하고 싶었습니다.

var form = $(this).parents('form:first');

jQuery에 언제 추가되었는지 확실하지 않지만 가장 가까운 () 메서드는 부모 ()를 사용하는 것보다 더 깔끔하게 필요한 작업을 수행합니다. 가장 가까운 코드는 다음과 같이 변경할 수 있습니다.

var form = $(this).closest('form');

그것은 당신이 찾고있는 것과 일치하는 첫 번째 요소를 찾아서 거기에서 중지하므로 : first를 지정할 필요가 없습니다.

답변

제출이 내부에있는 양식을 얻으려면 

this.form

결과에 대한 가장 쉽고 빠른 경로.

답변

나는 다음 방법을 사용했고 그것은 나를 위해 잘 작동했습니다.

$('#mybutton').click(function(){
        clearForm($('#mybutton').closest("form"));
    });

$('#mybutton').closest("form") 나를 위해 트릭을했다.

답변

Eileen : 아니요, 그렇지 않습니다 var nameVal = form.inputname.val();. 둘 중 하나 여야합니다 …

jQuery에서 :

// you can use IDs (easier)

var nameVal =  $(form).find('#id').val();

// or use the [name=Fieldname] to search for the field

var nameVal =  $(form).find('[name=Fieldname]').val();

또는 JavaScript에서 :

var nameVal = this.form.FieldName.value;

또는 조합 :

var nameVal = $(this.form.FieldName).val();

jQuery를 사용하면 다음 형식의 모든 입력을 반복 할 수도 있습니다.

$(form).find('input, select, textarea').each(function(){

  var name = this.name;
  // OR
  var name = $(this).attr('name');

  var value = this.value;
  // OR
  var value = $(this).val();
  ....
  });

답변