onsubmit = "submitForm();"의 차이점은 무엇입니까? 및 onsubmit = "return submitForm();"

Question

양식을 두 번 제출한다는 의미입니까?

<form name="myForm" action="demo_form.asp" onsubmit="submitForm();" method="post"> 

function submitForm(){ 
    document.myForm.submit(); 
} 

가끔씩 각 레코드 두 개를 기록하는 버그가 있습니다. 양식이 두 번 제출되기 때문에 의심됩니다.

Answer 1

양식 요소의 onsubmit = ""은 이벤트 기능을 정의합니다. 리턴 값은 정의 된 경우 브라우저로 다시 전달됩니다. 잘못된 값 (false, null, undefined 등)은 브라우저가 양식 제출을 진행하지 못하게합니다.

그것은 다른 기능

function isValid(form) { 
    if (someBadCondition) { 
    // record some error somewhere 
    return false; 
    } 
    if (someHorribleCondition || someEquallyBadCondition) { 
    // record some other error 
    return false; 
    } 
    return true; 
} 

function canSubmitForm(form) { 
    isValid(form); 
} 

마지막 줄은 결코 반환 값을 다시 통과하지 유사합니다. 따라서

console.log(isValid(someForm)); // true 
console.log(canSubmitForm(someForm)); // undefined 

onSubmit = "submitForm()"을 canSubmitForm으로 생각하십시오. 그것이 실제로 정확히 무엇입니까. onsubmit = ""에서 정의하는 것은 "우리가 제출할 수 있습니까?"라는 질문에 대한 답으로 함수로 평가됩니다. return 문은 지금 canSubmitForm의 호출자를 통해 isValid의 결과를 전달합니다

function canSubmitForm(form) { 
    return isValid(form); 
} 

주의 사항 :

당신처럼 위의 예를 해결하는 것입니다.

따라서

onsubmit="submitForm();" 

및

onsubmit="return submitForm();" 

사이의 디퍼 런스 세라마이드는 이전에 SubmitForm에의 리턴 값이 무시된다는 것이다. 다음 예제에서 submitForm이 값을 반환하면 브라우저 인 onsubmit 호출자에게 전달됩니다.

"양식을 제출할 때 양식을 제출하십시오."라는 내용의 코드가 있기 때문에 양식을 두 번 제출했을 가능성이 큽니다.

submitForm javascript 함수가 제출 프로세스 (ajax w/graceful 저하와 같은 것이 일반적 임)를 소유해야하는 경우 이벤트 핸들러에 return false를 추가해야합니다.

onsubmit="submitForm(); return false" 

또는 변경 SubmitForm에

는 false를 반환하고 다음 onsubmit 당신이 이벤트 처리기에서 명시 적으로 거짓을 넣어 내가 이전 추천

onsubmit="return submitForm();" 

function submitForm() { 
    // do some submission stuff 
    return false; 
} 

에 전달할 수 있습니다. 그 이유는 이벤트 핸들러가 false가 필요한 이유입니다. 제출은 거짓이 아닙니다. 당신은 어떻게 든 실패하거나 거절하지 않았습니다. submitForm은 제출물에 초점을 맞추고 이벤트 처리기가 브라우저 이벤트 처리 항목을 처리하도록해야합니다. 게다가 코드에 오류가 있습니다.

Answer 2

return 문은 제출시에 호출 된 함수의 결과를 반환합니다. false이 반환되면 양식 제출이 중단됩니다.

Answer 3

두 번 제출하는 이유는 submit과 submit submit 함수를 모두 실행하기 때문입니다. 함수에 사용자 정의 제출 논리를 사용하려면 다음과 같이하십시오.

onsubmit = "submitForm(); return false;"

제출 기능을 실행하지만 제출 단추의 기본 동작을 방지합니다.

(당신은 이중 제출 문제를 해결하면 마음이 모든 것이 불필요 있도록, 위의 예에서, SubmitForm에 기능은 정말 아무것도하지 않지만, 아마도 당신이 그 기능에 더 많은 로직을 계획하고 있었다)