제출 버튼 onclick 이벤트에서 양식 제출을 어떻게 취소합니까?


99

ASP.net 웹 응용 프로그램에서 작업 중입니다.

제출 버튼이있는 양식이 있습니다. 제출 버튼의 코드는 다음과 같습니다 <input type='submit' value='submit request' onclick='btnClick();'>.

다음과 같이 작성하고 싶습니다.

function btnClick() {
    if (!validData())
        cancelFormSubmission();
}

어떻게해야합니까?


아야, 머리가 아파요. 여러 가지 submit입력이 있습니다. 이 페이지에서 서버 측 컨트롤을 사용해 보겠습니다.
Vivian River

답변:


183

당신은하는 것이 낫습니다 ...

<form onsubmit="return isValidForm()" />

isValidForm()반환 false되면 양식이 제출되지 않습니다.

또한 이벤트 핸들러를 인라인에서 이동해야합니다.

document.getElementById('my-form').onsubmit = function() {
    return isValidForm();
};

좋습니다.하지만 onsubmitASP.net을 사용할 때마다 작업을 할 수없는 것 같습니다. asp.net이 모든 것을 자체 형태로 감싸고 있기 때문입니다 ...
Vivian River

5
그의 두 번째 제안을 사용할 수 있습니다. 인라인 자바 스크립트는 어쨌든 악마입니다.
Stephen

3
ASP.NET 웹 양식을 사용하는 경우 (힌트 : 사용하지 마십시오) 다른 양식을 포함하지 마십시오. 그들은 단순히 호환되지 않습니다. ASP.NET MVC를 사용하면 관용적 태그를 사용하여 웹앱을 빌드 할 수 있다고 들었습니다.
Quentin

@David, 다른 양식을 사용하는 것이 ASP.net 웹 양식과 호환되지 않는 경우 서버 측 컨트롤 만 사용해야합니까?
Vivian River

2
다른 사람이 당신처럼 정확하게 대답했습니다 . stackoverflow.com/a/23604664/1639385 . 너무 우연이라고 생각합니다.
Ulysses Alves 2015

43

입력을 다음과 같이 변경하십시오.

<input type='submit' value='submit request' onclick='return btnClick();'>

함수에서 false를 반환합니다.

function btnClick() {
    if (!validData())
        return false;
}

13

당신은 변해야합니다

onclick='btnClick();'

onclick='return btnClick();'

cancelFormSubmission();

return false;

그건 내가 찬성 고유 이벤트 속성 피하려고 거라고 말했다 눈에 거슬리지 JS를 정말로 중요한하는 경우에 API와 넥타이를 처리하는 좋은 이벤트가 있습니다 (예 : YUI 또는 jQuery를 같은) 라이브러리 (예 : 양식의 대신에 이벤트를 제출 버튼의 클릭 이벤트).


2
onclick을 사용하면 사용자가 Enter 키를 누르고 검사를 무시할 수 있습니다.
Cfreak

7

때로는 onsubmitasp.net에서 작동하지 않습니다.

나는 아주 쉬운 방법으로 그것을 해결했습니다.

우리가 그런 형태를 가지고 있다면

<form method="post" name="setting-form" >
   <input type="text" id="UserName" name="UserName" value="" 
      placeholder="user name" >
   <input type="password" id="Password" name="password" value="" placeholder="password" >
   <div id="remember" class="checkbox">
    <label>remember me</label>
    <asp:CheckBox ID="RememberMe" runat="server" />
   </div>
   <input type="submit" value="login" id="login-btn"/>
</form>

이제 양식 포스트 백 전에 해당 이벤트를 잡아서 포스트 백에서 중지하고이 jquery를 사용하여 원하는 모든 ajax를 수행 할 수 있습니다.

$(document).ready(function () {
            $("#login-btn").click(function (event) {
                event.preventDefault();
                alert("do what ever you want");
            });
 });

5

유형을에서 submit로 변경해야 합니다 button.

<input type='button' value='submit request'>

대신에

<input type='submit' value='submit request'>

그런 다음 자바 스크립트에서 버튼 이름을 얻고 원하는 작업을 연결하십시오.

var btn = document.forms["frm_name"].elements["btn_name"];
btn.onclick = function(){...};

도움이되기를 바랍니다.


4

다음이 필요합니다 return false;.

<input type='submit' value='submit request' onclick='return btnClick();' />

function btnClick() {
    return validData();
}

1

제출 버튼을 일반 버튼으로 변경하고 클릭 이벤트에서 유효성 검사 테스트를 통과하면 양식을 제출하는 것이 어떻습니까?

예 :

<input type='button' value='submit request' onclick='btnClick();'>

function btnClick() { 
    if (validData()) 
        document.myform.submit();
} 

1
Enter 키를 누르면 수표가 생략됩니다. onSubmit 사용
Cfreak 2010

그런 다음 JavaScript를 사용할 수 없으면 전혀 작동하지 않습니다. <a href=" icant.co.uk/articles/pragmatic-progressive-enhancement/… 작동하는 것에 대해</a>.
Quentin

1

당신은 필요합니다 onSubmit. 아니 onClick, 그렇지 않은 사람은 키를 눌러 입력 할 수 있으며 유효성 검사를 생략합니다. 취소에 관해서. 거짓을 반환해야합니다. 코드는 다음과 같습니다.

<form onSubmit="return btnClick()">
<input type='submit' value='submit request'>

function btnClick() {
    if (!validData()) return false;
}

onSubmit 편집 은 양식 태그에 속합니다.


작동하지 않습니다. 데이터가 유효하면 true를 반환하지 않습니다. 반환을 true로 설정하십시오. btnClick () 함수의 끝에서
NickSoft 2013

1

간단합니다. false를 반환합니다.

아래 코드는 jquery를 사용하여 제출 버튼의 onclick 내에 있습니다.

if(conditionsNotmet)
{
return false;
}

0

사용하다 onclick='return btnClick();'

function btnClick() {
    return validData();
}

2
Enter 키를 누르면 수표를 우회합니다. onSubmit 사용
Cfreak 2010

0
function btnClick() {
    return validData();
}

1
작동하려면 이보다 더 많은 일을해야합니다. 나는 functino가 true 또는 false를 반환하도록 시도했지만 아무런 차이가없는 것 같습니다.
Vivian River

1
그의 대답은 정확합니다. 찬성. 입력 태그에서도 반환해야합니다
Cfreak 2010

1
또한 다른 컨트롤이 동일한 요소에서 동일한 이벤트를 관찰하는 경우 기본 동작을 사용 ev.preventDefault()하거나 ev.returnValue = false취소하지만 이벤트 버블 링을 방지하지는 않습니다. 사용 return false이 버블 링에서 이벤트를 중지 할 경우에만 기본 동작을 취소 할 수 있습니다. 이 기사를 참조 하십시오 .
Klemen Slavič 2010

이벤트 핸들러 자체에 반환해야하는 것은 답변에서 누락 된 매우 중요한 정보입니다. 그것 없이는 대답이 불완전하고 찬성 할 가치가 충분하지 않습니다.
Quentin

0
<input type='button' onclick='buttonClick()' />

<script>
function buttonClick(){
    //Validate Here
    document.getElementsByTagName('form')[0].submit();
}
</script>

2
유용한 답변을 얻으려면이 반응을 확장해야합니다. 이것이 질문에 대한 답인 이유를 설명하십시오.
Jeroen Heier

0

JQuery를 사용하면 훨씬 더 간단합니다. Asp.Net MVC 및 Asp.Core에서 작동합니다.

<script>
    $('#btnSubmit').on('click', function () {

        if (ValidData) {
            return true;   //submit the form
        }
        else {
            return false;  //cancel the submit
        }
    });
</script>
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.